Hintergrundfarbe verschwindet beim floaten der Navigation

[monaco]

Hallo,

ich benötige eure Hilfe. Sicherlicher nur eine Kleinigkeit, aber finde ich den Fehler nicht.

Wenn ich meiner Navigation eine Hintergrundfarbe vergebe:

#header .mod_navigation {
    background-color:#545353;
}

#header .mod_navigation ul {
    float:left;
    margin:0;
    padding:20px;
    list-style-type:none;
    width:auto;
}

#header .mod_navigation li {
    float:left;
    width: auto;
}

und gleichzeitig floate, - es soll eine horizontale Navigation sein - dann verschwindet die Hintergrundfarbe.
Wenn ich das float weglasse, dann hat meine Navigation eine Hintergrundfarbe.

Kann mir da jemand einen Tipp geben?

[BugBuster]

keine Ahnung, aber geb mal dem

#header .mod_navigation ul

zusätzlich die Definition der Hintergrundfarbe, dann sieht das glaube ich so aus wie du möchtest.

[monaco]

jo. Das hatte ich auch schon gemacht. Aber da bekommt ja nur die ungeordnete Liste die Hintergrundfarbe. Ich hätte ganz gerne, dass die Hintergrundfarbe über die komplette Breite des Screens verläuft.
Ich weis einfach nicht, warum das nicht funktioniert. Der CSS-Code ist doch korrekt.

[tab]

Die Floats in deiner <nav> werden nicht gecleart, deswegen hat sie die Höhe 0, womit die Hintergrundfarbe natürlich nicht sichtbar sein kann. Ist das ohne Layoutbuilder? Für die Klasse block werden nämlich keine CSS-Regeln angezeigt. Mit Layoutbuilder gibts da ein

.block {
   overflow: hidden;
}

was dann dazu führt, dass deine enthaltenen, gefloateten Elemente umschlossen werden. Falls du den Layoutbuilder nicht drin haben willst, kannst du ja so eine Regel selbst hinzufügen, hilft eventuell auch an anderer Stelle.

[monaco]

ach ja. Das war es. Besten Dank! das overflow: hidden hat gefehlt und somit spar ich mir das clearen.
Jetzt ist es so, dass die Hintergrundfarbe von da "startet", wo die Breite der Klasse .logo aufhört. Ich habe der Klasse #header .inside noch die selbe Hintergrundfarbe gegeben, wie meiner Navigation, damit der Hintergrund über die ganze Bildschirmbreite verläuft. Geht das auch eleganter? Würdest du evtl. das Logo und die Navigation absolut positionieren?

[tab]

Kommt drauf an, wie das am Ende aussehen soll. Soll die Navi erst rechts vom Logo anfangen? Soll die obere "Ecke" des Logos in den Balken / Navi oben reinragen oder nicht?

[monaco]

habs jetzt so realisiert:

und dem #header .inside die selbe Hintergrundfarbe gegeben.

vielen herzlichen Dank nochmal tab für den TIPP

[BugBuster]

Hättest ja gleich sagen können, das du den Header färben willst und nicht nur die Navigation.

[monaco]

hi tab,

den layout-builder habe ich deaktiviert.
Wenn ich nun das overflow:hidden einbaue, wird mir aber meine Unternavigation beim Hovern bei Leistungen nicht mehr angezeigt.
Muss ich da vielleicht mit dem clearfix-hack arbeiten?

[kos]

Schau dir doch mal das CSS von demo.contao.org an, da wird doch eine Lösungsmöglichkeit für dein Menüproblem vorgestellt.