Frage von Rutherford1981, 70

Hintergrundfarbe verschwindet beim floaten?

Ich stehe vor folgendem Problem. Habe eine unordered List mit 3 oder mehr Listenpunkten, die horizontal in einer Reihe stehen sollen. Die Listen wurden gefloatet, doch sobald ich eine Hintergrundfarbe davor eingefügt habe z.B. UL {background color: Blue;} verschwindet diese Hintergrundfarbe wieder sobald der Float Befehl ausgeführt wird.

Mit Display inline klappt es, ich will aber wissen warum das mit dem Float nicht geht bzw. wo liegt der Fehler?

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Steffile, 51

Wenn die Hintergrundfarbe verschwindet, dann hat der container 0px Hoehe. Du kannst das ul floaten, dann aber die li nicht floaten, sondern mit inline oder inline-block positionieren.

Du kannst auch dem ul overflow: hidden geben, damit der Browser gezwungen wird, die Hoehe neu zu berechnen.

Kommentar von Rutherford1981 ,

Jap, das war der Grund. Ich habe die Höhe vergessen, deswegen verschwindet das ganze nach dem floaten, da man beim floaten immer die breite und höhe mitgeben muss daaaaanke ;-)

Kommentar von perhp ,

Nein das stimmt nicht, dass du eine höhe und breite mitgeben musst beim floaten. Schon mal was vom clearfix gehört? Der fehlt dir nämmlich zu 100% und ist eines der wichtigsten Grundlagen bei CSS.

Kommentar von Rutherford1981 ,

Ok und was ist das?

Habe bisher nur 1 Buch zu CSS gelesen ein ziemlich aktuelles, kann aber gut sein dass ich da was überlesen habe. In dem Buch stand aber was von "gefloatete Elemente werden nur so breit wie der Inhalt wenn man keine Breite also "width" mit gibt. Daher habe ich das. Sie meinen Clear: both?? Das benutze ich immer danach oder was ist Clearfix?

Antwort
von PeterKremsner, 41

Was meinst du mit sobald der Float Befehl ausgeführt wird?

Schreibts du der Liste mit Javascript zu einem bestimmten Zeitpunkt die float Eigenschaft zu oder, hast du die im css schon stehen?

Kommentar von Rutherford1981 ,

ich habe erst die Farbe definiert mit ul background ... dannach gefloatet. Die farbe kommt, aber sobald gefloatet wird geht die hintergrundfarbe verloren

Kommentar von PeterKremsner ,

https://jsfiddle.net/rfa766xj/

Du versuchst also das hier zu erreichen?

Und du hast sobald du die Float Anweisung im css einfügst, keine Hintergrundfarbe mehr?

Hast du vielleicht noch irgendein css, dass dir die Hintergrundfarbe überschreiben könnte?

Kommentar von Rutherford1981 ,

ich weiss wo der Fehler lag: ich habe mit dem float Befehl gearbeitet und davor dass margin und padding mit dem * Selektor auf 0 gesetzt. Dann habe ich die Höhe vergessen mit anzugeben, und das wird beim floaten benötigt. also background color: .... height: ... px;

Jetzt klappt es, danke ;-)

Kommentar von PeterKremsner ,

Alles klar :)

Antwort
von RedKungFuMastr, 31

http://stackoverflow.com/questions/4009931/css-div-containing-no-height-on-float...

ul:after {
  content: "";
  display: table;
  clear: both;
}

Keine passende Antwort gefunden?

Fragen Sie die Community