Problem mit float

ghost77

Hallo

Ich habe ein Anzeigeproblem mit float.

und zwar habe ich eine Bildergallerie in meiner homepage doch starten die Bilder erst da wo die Navigation aufhört.
Die navigation ist auch mit float erstellt.

Das komische nur Firefox hat dieses "Problem" IE7 stellt die Seite richtig dar.

Hier der Link zur Seite.
http://klausboden.at/fotos.html

Code

/* Navigation Start */
#nav-oben {
margin-top: 10px;
margin-left: 14px;
margin-right: 5px;
float: left;
height: 25px;
width: 160px;
background: url(images/klausboden/nav-oben.jpg) no-repeat;
}


#menu {
clear: left;
margin-left: 14px;
margin-right: 5px;
float: left;
list-style-type: none;
text-decoration: none;
background: url(images/klausboden/nav-mitte.jpg);
width: 160px;
}


#nav-unten {
margin-left: 14px;
margin-right: 5px;
clear: left;
float: left;
height: 25px;
width: 160px;
background: url(images/klausboden/nav-unten.jpg) no-repeat;
}


/* Navigation Ende */




/* Bildergallerie */
.thumb {
float: left;
}


/* Bildergallerie */

Alles anzeigen

Danke schon mal für die Hilfe

chris90night

Hi,

soweit ich das erkennen kann, hast du mehrere Boxen untereinander auf der linken Seiten, die du jeweils immer mit clear und float positionierst. Da der Content erst danach kommt, fließt der Container dann eben um das letzte mögliche Element.

Ich würde es so lösen, dass du die ganzen Container in der Navi in einen großen Container packst, dann kannst du ganz normal die andere Box neben den floaten lassen.

MfG

sejuma

ungetestet:
Entferne mal bei #nav-unten das rot markierte:

Zitat

#nav-unten {
margin-left: 14px;
margin-right: 5px;
clear: left;
float: left;
height: 25px;
width: 160px;
background: url(images/klausboden/nav-unten.jpg) no-repeat;
}

Alles anzeigen

Das clear und float dürfte unnötig sein, weil das übergeordnete #menu bereits gefloatet ist.
Durch dieses clear positioniert der FF den #content dann erst an dieser Stelle.

ghost77

Hi

Danke an alle für die Antworten
chris90night hatte den richtigen einfall

Hier nun der ausgebesserte Code:

Code

<!-- start menu -->
<div id="main-nav">
<div id="nav-oben">
</div>
<div id="menu">
{menu template='klausbodenmenu' collapse='1'}
</div>
<div id="nav-unten">
</div>
</div>
<!-- end menu -->

Alles anzeigen

Code

#main-nav {
float: left;
}


#nav-oben {
margin-top: 10px;
margin-left: 14px;
margin-right: 5px;
height: 25px;
width: 160px;
background: url(images/klausboden/nav-oben.jpg) no-repeat;
}


#menu {
margin-left: 14px;
margin-right: 5px;
list-style-type: none;
text-decoration: none;
background: url(images/klausboden/nav-mitte.jpg);
width: 160px;
}


#nav-unten {
margin-left: 14px;
margin-right: 5px;
height: 25px;
width: 160px;
background: url(images/klausboden/nav-unten.jpg) no-repeat;
}

Alles anzeigen

Tags