ablauffolge div-container gestört

C

clintcs

Grünschnabel
Hallo Leute,

ich sitze hier vor einem kleinen Problem, dessen Lösung ich hier im Forum auf die Schnelle nicht finden konnte.
Ich bin sicher, es ist keine grosse Sache, aber ich sitze gerade völlig auf dem Schlauch.

hier mal die Prog:

<div id="headerline">
</div> sitzt wo und wie es soll
<div id="slideshow">
</div> sitzt wo und wie es soll
<div id="content">
<div id="textarea">
<div id="text">
</div>
<div id="textpicture">
</div>
</div> sitzt wo und wie es soll
</div>
<div id="footerline">
</div> und hier geht es schief! Statt unter dem content wird ab hier alles unter der HEADERLINE angezeigt, dann aber wieder in der richtigen Reihenfolge. Wo ist der Haken?
<div id="sitemap">
</div>
<div id="footer">
</div>

irgendetwas funktioniert hier doch mit dem Eltern-Kind-Verhältnis nicht.
Bis TEXTPICTURE ist alles absolut positioniert, ab FOOTERLINE nicht mehr, macht aber auch keinen Unterschied, habe ich schon versucht.
Hat jemand einen Tip?

Danke im Voraus!
 
css dazu

zur Veranschaulichung ist hier noch das css dazu:
CSS: 
body {
	margin: 0px;
	padding: 0px;
	background-color: #FFFFC8;
	font-weight: normal;
	font-size: 12px;
	height: 100%;
	width: 100%;
	font-family: Arial, sans-serif;
	color: #747473;
	}
	
a            { text-decoration: none; color: #953000; font-size: 12px; font-family: Arial, sans-serif; font-weight: normal; }
a:visited    { text-decoration: none; color: #953000; font-size: 12px; font-family: Arial, sans-serif; font-weight: normal; }
a:active     { text-decoration: none; color: #953000; font-size: 12px; font-family: Arial, sans-serif; font-weight: normal; }
a:hover      { text-decoration: none; color: #953000; font-size: 12px; font-family: Arial, sans-serif; font-weight: normal; }



#headerline {
	width: 100%;
	margin: 0px auto;
	height: 30px;
	text-align: right;
	padding-top: 9px;
	color: #FFFFC8;
	font-weight: bold;
	background-color: #792700;
	
}

	a.headerline            { text-decoration: none; color: #FFFFC8; font-size: 12px; font-family: Arial, sans-serif; font-weight: normal; }
	a.headerline:visited    { text-decoration: none; color: #FFFFC8; font-size: 12px; font-family: Arial, sans-serif; font-weight: normal; }
	a.headerline:active     { text-decoration: none; color: #FFFFC8; font-size: 12px; font-family: Arial, sans-serif; font-weight: normal; }
	a.headerline:hover      { text-decoration: none; color: #FFFFC8; font-size: 12px; font-family: Arial, sans-serif; font-weight: normal; }


#slideshow {
	position: absolute;
	left: 50%;
    margin-left: -512px;
    width: 1024px;
    height: 400px;
}

#slideshow IMG {
	position: absolute;
	top: 0;
    left: 0;
    z-index: 8;
    opacity: 0.0;
}

#slideshow IMG.active {
    z-index: 10;
    opacity: 1.0;
}

#slideshow IMG.last-active {
    z-index: 9;
}


#content {
	position: absolute;
	left: 50%;
    margin-left: -512px;
    top: 450px;
    width: 1024px;
}

#textarea {
	position: absolute;
	left: 62px;
	width: 900px;
}

#text	{
	position: absolute;
	width: 550px;
}

	h1.text	{
		text-decoration: none;
		color: #953000;
		font-family: arial, sans-serif;
		font-size: 30px;
}

#textpicture	{
	position: absolute;
	margin-top: 80px;
	margin-left: 600px;
	width: 300px;
}

#teaser1	{
	width: 300px;
	margin-top: 50px;
}
	
	a.menu            { text-decoration: none; color: #953000; font-size: 30px; font-family: Arial, sans-serif; font-weight: normal; }
	a.menu:visited    { text-decoration: none; color: #953000; font-size: 30px; font-family: Arial, sans-serif; font-weight: normal; }
	a.menu:active     { text-decoration: none; color: #953000; font-size: 30px; font-family: Arial, sans-serif; font-weight: normal; }
	a.menu:hover      { text-decoration: none; color: #953000; font-size: 30px; font-family: Arial, sans-serif; font-weight: normal; }


#teaser2	{
	margin-top: 50px;
	margin-left: 350px;
	width: 550px;
}

#teaser3	{
	margin-top: 320px;
	width: 550px;
}

#teaser4	{
	margin-top: 320px;
	margin-left: 600px;
	width: 300px;
}

#footerline {
	width: 100%;
	margin-top: 50px;
	height: 10px;
	background-color: #B55743;
	
}

#sitemap {
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	color: #FFFFC8;
	font-weight: normal;
	background-color: #953000;
	
}

#footer {
	width: 100%;
	margin-bottom: 0px;
	height: 50px;
	text-align: center;
	color: #FFFFC8;
	font-weight: normal;
	background-color: #792700;
	
}

	a.footer            { text-decoration: none; color: #FFFFC8; font-size: 8px; font-family: Arial, sans-serif; font-weight: normal; }
	a.footer:visited    { text-decoration: none; color: #FFFFC8; font-size: 8px; font-family: Arial, sans-serif; font-weight: normal; }
	a.footer:active     { text-decoration: none; color: #FFFFC8; font-size: 8px; font-family: Arial, sans-serif; font-weight: normal; }
	a.footer:hover      { text-decoration: none; color: #FFFFC8; font-size: 8px; font-family: Arial, sans-serif; font-weight: normal; }
 
Zuletzt bearbeitet von einem Moderator:
Hi,
der Hacken ist das position: absolute. Diese elemente werden aus dem Zeilenfluss genommen.
Warum verwendest du den die absolute positionierung? Das macht hier irgendwie wenig sinn wenn du alles in Reihenfolge darstellen willst.

Auch solltest du bei deiner fertigen Webseite nicht alles mit Divs aufbauen. Texte gehören in ein Paragraphen und Bilder werden mit img eingebunden. Diese Elemente kannst du auch direkt stylen und musst keine wrapper Divs verwenden welche semantisch keine Rolle spielen.

Viele Grüße
 
Hey Jan Frederik,

erst mal vielen Dank für Deine rasche Antwort. Ich habe die absolute Positionierung gewählt, weil eben nicht alles nacheinander ausgegeben werden soll. Die Teaser z.B. sitzen immer nebeneinander.
Auch soll das Bild neben dem Text immer an genau der selben Stelle stehen - daher kein float.

Ich muss zugeben, dass ich noch nicht so firm bin im CSS scripten, aber das soll und wird sich möglichst schnell ändern.

Kann ich denn nun den Zeilenfluss trotz der gesetzten absoluten Positionierung wieder aufnehmen, wie z.B. nach eineml float?

Grüsse!
 
So, habe jetzt mal ein wenig rumgebastelt.
Die Slideshow funktioniert schon mal nicht, wenn ich die Position nicht als absolut angebe. Die Bilder kommen dann alle untereinander und hauen mir alles quer.
 
Hi,
also der Zeilenfluss ist ja für die Elemente nach den absolut positionierten Elementen regulär. Deshalb rutscht ja dein Footer nach oben.
Wenn ich mir dei nBeislpiel aber anschaue gibt es für mich keinen Grund die Positionsart zu ändern.
Mit Float erreichst du hier bessere Ergebnisse.

Um dir Arbeit zu ersparen kannst du natürlich auch ein fertiges CSS-Grid verwenden.

Ich hab hier mal ein Beispiel angefertigt welches nur mit floats auskommt: http://jsbin.com/eDiwOTO/6/edit

Grüße

PS: gewöhne dir eher an mit Klassen als mit IDs zu arbeiten.
 
? ? ?

Hast Du jetzt meine Seite so rucki-zucki umgebaut, daß es läuft?

Und das darf ich jetzt auch verwenden und mit meinen Inhalten ausbauen?

Verstehen tu' ich die Abläufe ja noch nicht so richtig, das muss ich mir erst mal genauer angucken.
Hoffentlich steig ich da durch.

Jedenfalls erst mal ganz ganz lieben Dank!
 
Hi,
Hast Du jetzt meine Seite so rucki-zucki umgebaut, daß es läuft?
Zum Vergrößern anklicken....
Ja jabe ich. Aber das CSS ist nicht 100% perfekt. Und man kann nun darüber streiten ob man noch weitere Wrapper für z.B. den Text unter dem Slider verwenden möchte. Das hängt etwas davon ab ob man verschiedene Layouts benötigt etc.

Verwenden darfst du das natürlich. Aber nur unter der Premise das du dir das auch anschaust um was zu lernen!

Viele Grüße und ein schönes Wochenende.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück