Abstand Text zu horiziontaler Navigation

Hallo, ich habe die Navigation zweizeilig gestaltet. Die zweite Zeile wird nur eingeblendet, wenn auch Inhalte vorhanden sind. Leider ist der Abstand des Textes von der Navigation uneineitlich: bei einzeiliger Anzeige ist er größer als bei zweizeiliger. Bitte mal anschauen: www.denkmalverein-bonn-aktuell.de; zum Vergleich die Seiten http://denkmalverein-bonn-aktuell.de/der-verein.html und http://denkmalverein-bonn-aktuell.de/denkmaeler.html.

Die css, mit der ich die Anzeige der zweiten Zeile steuere, ist:

HTML-Code:

---

Zweite Ebene ausblenden wenn nicht aktiv
#header .mod_navigation .level_2 {
    width:0;
    height:0;
    left:-32768px;
    position:absolute;
    overflow:hidden;
    display:inline;
    margin-bottom:-2em;
    top: -32768px;
}
Zweite Ebene horizontal einblenden wenn aktiv
#header .mod_navigation .level_2 {
    width:100%;
    height:auto;
    left:0;
    top:auto;
    overflow:auto;
    float:left;
    display:block;
    margin-top:0;
    background-color:#4b5d73;
    border-radius:4px;
    font-size:13px;
    font-weight:normal;
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
}

---

Weiß jemand, woran es liegt. Soll ich evtl. weitere Angaben posten? Danke, Reinhard

Hallo radobo,

unter http://www.denkmalverein-bonn-aktuell.de;/

kann die Seite nicht angezeigt werden.

Viele Grüße
MiTsch

Der #header weiß nichts von dieser UL in 2. Ebenen, weil sie absolut positioniert ist. Deswegen dehnt diese UL den #header nicht nach unten aus.

Du könntest mit JS dieses Menü untersuchen, ob es einen LI mit der Klasse submenu hat und wenn ja, den #header in der Höhe entsprechend ausdehnen, evtl. mit Padding. Die UL in 2. Ebene hat eine Höhe von 44px.

Ich hatte da vorhin schon mal reingeschaut. Die zweite Zeile ist absolut positioniert, also wird für sie kein Platz reserviert bzw sie vergrößert den Header nicht, sondern steht teilweise über dem Hauptbereich und somit ist der Abstand kleiner.

Bei deinem momentanen CSS scheint auch dieses hier zu funktionieren (FF), dazu brauchst du kein JS.

PHP-Code:

---

#header .mod_navigation li.submenu {
  margin-bottom: 44px;
} 


---

Klasse, der Tipp von Andreas bringts - und ließ sich vor allem leicht realisieren! Danke!!