✔ Hilfe bei Div Design

[Identität]

Hi,
ich habe ein Design mit DIVs erstellt. Dort sind einige Fehler drin, vorallem beim Internet Explorer 6. Ich habe zwei Grafiken gemacht, und dazu den Quellcode. Ich hoffe ihr könnt mir beim Problem helfen.

Danke... Problem gelöst!

 

[Maik]

Hi,

das Versetzen der rechten Spalte im IE bekommst du folgendermaßen in den Griff:

#content_rechts{
    float:right;
    height:auto;
    width:179px;
    background-color: white;
}

#content_mitte_info{
    /*float:left;*/ /* auskommentiert = deaktiviert */
    height:auto;
    /*width:580px;*/ /* auskommentiert = deaktiviert */
    margin: 0 179px 0 160px;
    background-color: white;
}

und im HTML-Code wird das DIV #content_mitte_info nach den beiden äußeren Spalten notiert:

<div id="content_links_info">...i</div>
<div id="content_rechts">...</div>
<div id="content_mitte_info">...</div>

Der unerwünschte Abstand resultiert aus dem <br />-Tag im zweiten DIV content_info:

<div id="content_info"><br />
    <p id="headline_info"><img src="http://www.tutorials.de/forum/images/info_bereich/bild.gif" width="261" height="19" /></p>
    TEXTTEXT2<br />
    <p style="margin:3px 0 0 0;text-align:center;"><br />
    <img src="http://www.tutorials.de/forum/images/info_bereich/bild.gif" width="261" height="19" /></p>
    </div>

Und damit wären wir auch schon beim Grundsätzlichen, denn eine ID muß in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vorkommen. In diesem Fall müssen die mehrfach verwendeten IDs abstand, content_info und headline_info in Klassen umgewandelt werden.

 

[Identität]

Super! Das klappt 1A! Aber eine Frage noch: Warum müssen die <div>'s in der Reihenfolge stehen?
1000xDanke!

 

[Maik]

Die mittlere "statische" Spalte wird nach den beiden äußeren "floatenden" Spalten genannt, da sie diese ja umfliessen soll.

Grundsätzlich wird zuerst das zu umfliessende Element (mit float-Eigenschaft) notiert, und anschliessend das Element (ohne float-Eigenschaft), das es umfliessen soll.

Siehe auch http://www.yaml.de/artikel/xhtml/div_reihenfolge.html.