#header Höhe soll ich dem Inhalt anpassen

[derRenner]

Hallo,

ich habe in der Contao-Demo gesehen, dass in den Layouts für die Kopf und Fusszeilen keine Höhen angegeben sind und erkenne aber auch nicht, warum sich der Inhalt im #header den Platz nimmt, den es braucht und somit die Höhe des #header vergibt.

Bis dato habe ich immer die Höhe selbst in der Kopfzeile eingetragen - und ich würde nun gerne mal erkennen, warum es auch ohne Angabe funktioniert.
Was ist das ausschlaggebende CSS dazu?

Danke für die Aufklärung :-)

Bei mir verhält es sich so, dass die Höhe des header auf 0 zusammenschrumpft, der Inhalt aber angezeigt wird navi-links können nicht beklickt werden.

Gebe ich der Kopfzeile eine Höhe mit, klappt alles - aber wie erwähnt, ich hätte das gerne verstanden und zukünftig auch ohne Angabe einer Höhe gearbeitet ...

[Spooky]

Bei mir verhält es sich so, dass die Höhe des header auf 0 zusammenschrumpft, der Inhalt aber angezeigt wird navi-links können nicht beklickt werden.

Wenn ein Element die Höhe 0 bekommt (ohne Höhenangabe), dann hat das Element entweder keinen Inhalt, oder dessen Children haben keine definierte Höhe (bspw. weil sie floaten oder nicht relativ oder statisch positioniert sind).


Ohne Link kann man nichts genaueres sagen

[derRenner]

also Inhalt ist den jeweiligen div's vorhanden und gefloatet wird über das grid-system

[edit]link gelöscht[/edit]

[Spooky]

Ist das das Grid System von Contao? Dann ist das Problem, dass du das Grid System außerhalb von Artikeln oder Inhaltselementen benutzt - es fehlt dir jetzt nämlich das Clearing. Selber kannst du dir zB so ein Clearing machen:

#header > .inside:after {
    clear:both;
    display:block;
    content:"";
} 

[derRenner]

ich habe das grid16 von BugBuster in Verwendung
bugbuster/contao_grid_16_columns

Was genau meinst du mit 'ausserhalb von Artikel oder Inhaltselementen verwenden'?
Die Klasse grid16 ist jeweils beim "umgreifenden" Inhaltselement eingefügt
z.B. beim Slider im CE Umschlag Anfang
oder beim Modul 'Navigationsmenü' auch direkt in diesem Modul

Dein clearer funktioniert ... wenn ich das nun richtig verstehe, ist das floaten der einzelnen Elemente das Problem?

DANKE auf alle Fälle für deine Problemlösung - und wenn ich mir die Frage des Problemes oben selbst korrekt beantwortet habe, dann verstehe ich auch warum ;-)

[tab]

Ja, die gefloateten Elemente sind in deinem Fall das Problem. Gefloatete Elemente nehmen erst dann wirklich Raum ein, wenn die floats gecleart werden. Das ist das Problem. Ein anderes Problem mit der Headerhöhe ist oft, wenn das Headerbild als Hintergrundbild des #header gesetzt wird. Damit wird natürlich auch keine Höhe zustande kommen, weil ja kein Inhalt drin ist sondern nur ein Hintergrund.

Normalerweise wird in Contao allen Artikeln und Inhaltselementen die Klasse "block" gegeben. Wenn du mit dem Grid z.B. Artikel als "Zeile" nimmst und die Inhaltselemente bekommen die Gridklassen und floaten somit darin, dann klappt das mit der Höhe automatisch, weil der Artikel die Klasse "block" hat. Sofern der Layoutbuilder aktiv ist, wird dieser Klasse overflow:hidden zugewiesen, was auch eine Möglichkeit des Clearings ist. Wer also - aus welchem Grund auch immer - der Klasse "block" overflow:visible zuweist, der muss sich in aller Regel an zahlreichen Stellen dann eben selbst um das Clearing kümmern.

[varix]

Gib doch mal deinem Header ein min-height:1px
Das hat bei mir geholfen.

[Andreas]

Normalerweise gibt man, wie tab schon sagte einem Element, welches gefloatete Elemente enthält die Regel overflow:hidden;, auch wenn min-height:1px; in dem ein oder anderen Szenario funktionieren sollte. In hartnäckigen Fällen kann man dann auch noch den after-table-clear versuchen.

[Spooky]

Oder den Standard Clearfix wie schon von mir gepostet. overflow:hidden; möchte man unter Umständen nicht immer haben. min-height:1px; wird nichts bringen.

[Andreas]

Ah, ja, sorry. Das meinte ich mit after-table-clear, der so ähnlich ist.

.element::after, 
.element::before {
    content: " ";
    display: table;
}

[Spooky]

Ja, den braucht man aber nicht mehr. Für alle Browser ab IE8 (oder gar 7?) reicht

.element:after {
    clear:both;
    display:block;
    content:"";
} 

[tab]

Für IE 7 reicht es nicht, aber das dürfte heutzutage auch nicht mehr so furchtbar wichtig sein. IE 7 und älter kennen das Pseudoelement :after nicht und ignorieren das dann einfach.