[Gelöst] Probleme mit float und Modul Album

[ghost77]

CMS Made Simple Version: CMS Made Simple 1.5.3 "Arecibo"
Album Version: 0.9.3
Derzeitige PHP-Version (phpversion): 5.2.6
Server-Datenbankversion (server_db_version): 5.0.51a

Hallo

Ich habe ein Anzeigeproblem mit float.

und zwar habe ich eine Bildergallerie "Album 0.9.3" 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: Select all

/* 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 */

Danke für die Hilfe

[antibart]

Wie hast Du das Album eingefügt? Mich wundert etwas, dass es bei den Seiten mit Text zu funktionieren scheint. Und die Text müssten doch theoretisch genauso eingefügt werden wie das Modul. Warum als ein Extra-Div für das Album, wenn jenes doch auch nur normaler content ist ?

Ansonsten ganz allgemein:
Du machst es dir ein wenig schwer mit deinen vielen floats und clears im menü. Denn eigentlich willst Du ja nur zwei Elemente floaten: Menü und Album bzw Content. Dem Album-Div fehlt eigentlich auch eine width.

Einfacher wäre es so:
Lösch allle Floats und Clears aus den drei Menü-Divs, denn die stehen untereinander und müssen nicht gefloatet werden. Pack die drei Menu-Div  in ein neues Hautpdiv: Das floatest Du dann. Gecleart wird erst wieder danach. zB im Footer

Beispiel (vereinfacht):

Code: Select all

<div id="menu-main">

<div id="nav-oben"></div>
<div id="menu">
<ul>
<li>Punkt 1</li>
<li>Punk 2</li></ul>
</div>
<div id=nav-unten"></div>
</div>

<div id="album">
-----------
</div>

<div id="footer"></div>

css

Code: Select all

#menu-main {float:left;}
#album {float:left;}
#footer {clear:both;}

Dass verschiedene Browser verschiedene Ergebnisse ausgeben, ist nicht so komisch, sondern Webcodierer-Alltag ... das heisst aber nicht, dass der IE7 Deine Seite "richtig" darstellt ... sondern eben zufällig so, wie du es gerne hättest.

[ghost77]

Hi

Danke antibart für den Tip genau das war mein Fehler.
Hab es jetzt so gelöst wie du geschrieben hast.

Hier noch der neue Code:

Code: Select all

<!-- 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 -->

Code: Select all

#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;
}

Ps.: Danke nochmal für deine Hilfe