Floaten von DIV Elementen

[Hans Hermes]

Hallo Leute,

ich habe ein Problem mit dem floaten von 2 DIV Elementen. Das erste ist ein Menü:

<div id="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>

Das Style dazu:

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

Dann darunter im HTML kommt das Headerbild:

<div id="headerpic"></div>

Das Style dazu:

#headerpic {
width:600px;
height:200px;
background-image(./img/test.jpg);
background-repeat:no-repeat;
}

Das Problem ist jetzt allerdings, das der Firefox das Menü irgendwie nicht richtig floaten läßt. Also das Menü beginnt an Position X=0,Y=0 das ist soweit auch richtig. Allerdings wird die Headergrafik auch an Position X=0, Y=0 angezeigt, und Links wird das Menü über der Grafik angezeigt. Müßte die Headergrafik nicht an Position X=200, Y=0 liegen?

Wieso ist das nicht so?

Vielen Dank für die Hilfe!

Gruß, Hans

[Malcolm Beck´s]

hi,

#menu {
float:left;
}
#headerpic {
}

Wieso ist das nicht so?

Rate mal an was es deinem #headerpic fehlt. :)

Was wissen wir über float?

grüße

[vvahsaga]

hi,

Das Problem ist jetzt allerdings, das der Firefox das Menü irgendwie nicht richtig floaten läßt.

works as designed

Müßte die Headergrafik nicht an Position X=200, Y=0 liegen?

wenn du dem nachfolgenden Element noch eine entsprechende margin-left-Eigenschaft gibst, wird es so sein.

Wieso ist das nicht so?

weil Du vielleicht floating noch nicht ganz verstanden hast?

gruß,
wahsaga

[suit]

Das Problem ist jetzt allerdings, das der Firefox das Menü irgendwie nicht richtig floaten läßt. Also das Menü beginnt an Position X=0,Y=0 das ist soweit auch richtig. Allerdings wird die Headergrafik auch an Position X=0, Y=0 angezeigt, und Links wird das Menü über der Grafik angezeigt. Müßte die Headergrafik nicht an Position X=200, Y=0 liegen?

deren inhalt sollte da liegen
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

ein float:left; auf #headerpic sollte dir helfen

btw: #headerpic ist kein guter name für eine id - warum nicht einfach nur #header oder eine überschrift <h1 /> mit dem ding als hintergrund und den text ausblenden?