Gunther: zu "komplizierter" Ansatz

Beitrag lesen

Hallo!

Ich möchte einem header mit height: auto (drin ist ein dropdown Menü) einen transparenten Hintergrund geben. Dazu füge ich im header ein DIV ein mit 100% Höhe und Breite und weise diesem Farbe und opacity zu. Da die Höhe 100% ist, sollte es sich der Höhe des umgebenden headers anpassen.

So ganz verstehe ich deine Erklärung nicht ...!?
Warum braucht es ein extra Element für den Background, wenn dieses exakt dieselben Abmessungen haben soll wie das Elternelement?
Und wenn eh alles absolute oder fixed positioniert ist, warum dann height:100%; und nicht top: 0; bottom: 0;?

Tut es aber nicht. Warum, ist mir nicht ganz klar.

Das hat Gunnar dir ja schon erläutert.

In HTML sieht das ganze so aus (doctype ist HTML5):

Wenn du HTML5 verwendest, warum dann kein Header-Element?

(HINWEIS: Der header ist fixiert, der Code stammt von hier http://aktuell.de.selfhtml.org/artikel/css/footer/#fixierte_navigation

Du kennst aber auch die mit diesem Layout verbundenen (Usability-)Probleme? Stichwort "Responsive Design".

Der Code für das clearfix DIV stammt von hier: http://www.webtoolkit.info/css-clearfix.html)

<div id="header_container">
  <div id="header">
    <div class="clearfix">
      <div class="header_background"></div>
      <p>langer Text...</p>
    </div>
  </div>
</div>

Wozu der Clearfix!?
Auf der von dir verlinkten Quelle steht ja:"The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow."
Ich sehe bei dir aber nichts von irgendwelchen gefloateten Elementen ...!

Und das nächste Problem sehe ich auf dich zukommen, bei dem ersten Element nach deinem "header_container" ...!

Wenn du evt. nochmal etwas genauer dein eigentliches Ziel beschreiben könntest, könnte man ggf. einen Verbesserungsvorschlag machen.

Du kennst aber auch den Unterschied zwischen Opacity und transparentem Hintergrund?

Gruß Gunther