Div's verschieben sich unerwünscht, trotz CSS

saga · 29.07.2005, 00:08

Guten Abend,

bin Dreamweaver Neuling und habe Schwierigkeiten mein dreispaltiges Div-Layout unter meinen #header_container zu bekommen. Im InternetExplorer funktioniert es, doch die Browser Opera/Firefox/Netscape wollen noch nicht so richtig (siehe Problem im Detail)

Ich würde mich sehr freuen, wenn mir hierbei jemand aus dem Traum-Projekt helfen könnte.

Viele Grüße aus München,
saga

- Problem im Detail

Div#navi_left rutscht ganz nach oben (in Opera/Firefox/Netscape), obwohl ich Div#navi_header (Inhalt ca. 100 Zeichen; nimmt also nicht die ganze Bildschirmseite ein) mit einem Div#header_container mit der Einstellung 100% im Code eingeschlossen habe (siehe Codeauszug unten)

- Codeauszug aus CSS-Datei:

#header_container {
width: 100%;
#navi_header {
float: right;
width: auto;
}
#navi_left {
float: left;
height: auto;
width: 200px;
border: none;
}
#content_center {
height: auto;
width: 480px;
float: left;
border: none;
}
#content_right {
float: right;
height: auto;
width: auto;
border: none;

- Codeauszug aus HTML-Datei:

<div id="header_container">
<div id="navi_header">
<a href="kontakt/kontakt.htm">Kontakt</a> | <a href="impressum/impressum.htm">Impressum</a> | <a href="agb/agb.htm">rechtlicher Hinweis</a>
</div>
</div>

Boris · 29.07.2005, 08:18

1. Lass das width: 100%; weg - DIVs sind immer automatisch maximal so breit, wie möglich

2. Fehlt bei #header_container die schließende Klammer }

3. height: auto; ist auch unnötig, das ist Standardmäßig bereits so eingestellt

4. welchen DOCTYPE benutzt Du?

Ein funktionierendes, dreispaltiges Layout würde so aussehen:

Code:

#linkeleiste
{
	width: 200px;
	float; left;
}

#rechteleiste
{
	width: 150px;
	float: right;
}

#mittlereleiste
{
	margin: 0 150px 0 200px;
}

<div id="linkeleiste"></div>

<div id="rechteleiste"></div>

<div id="mittlereleiste"></div>

saga · 29.07.2005, 14:39

Hallo Boris,

zunächst vielen Dank für die vielen Hinweise:

1. i.O. 100% lass ich dann in Zukunft weg
2. Ja, die schließende Klammer }. Kopierfehler ;o)
3. height: auto ist Standard. Und schon wieder was gelernt!
4. Den DOCTYPE muss ich zu Hause nachsehen - Info folgt (wird wahrscheinlich der Standard DOCTYPE von Dreamweaver sein)

Zum dreispalten Code-Layout: Über diesen drei Spalten möchte ich noch eine Überschriftenleiste (z.B. #überschrift_rechts) die über den drei Spalten rechts floaten soll. Und die nur 100px breit sein soll (wegen der Hintergrundfarbe). Deshalb würde #linkespalte auf jeden Fall nach oben rutschen. Kann ich das irgendwie verhindern?

Freu mich auf eine Antwort.

Viele Grüße,
saga

Boris · 29.07.2005, 18:40

Wenn außer der Leiste sonst nichts da sein soll, dann kannst Du doch auch ein DIV mit der vollen Breite nehmen und dessen Inhalt nach rechts lagern (text-align: right)

Ansonsten musst Du der linken Leiste einfach nur ein clear: left; mitgeben.

saga · 30.07.2005, 00:58

Hallo Boris,

nTraum! clear: right; ist die Lösung.

Hier noch der DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN". Wenn das nicht iO ist. Bitte kurze Info.

Danke und noch ein schönes Wochenende,
saga

Boris · 30.07.2005, 10:16

Zum Doctype siehe hier: http://www.fabrice-pascal.de/artikel/dtd/

Deiner ist veraltet und bringt den IE dazu, das CSS Boxmodel falsch zu interpretieren. Nimm den hier:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

saga · 01.08.2005, 09:38

Hallo Boris,

super. Vielen Dank und einen guten Start in die Woche.

saga