✔ Höhe Menüleiste innerhalb div-Container

Status
Nicht offen für weitere Antworten.
W

WIK-Lars

Erfahrenes Mitglied
Hallo Zusammen,

ich habe in folgendem Code ein waagerechtes Dropdown-Menü (im Code: <ul id="menu"> ), welches innerhalb eines div-Containers ( <div id="menuleiste"> ) liegt.
Die Höhe der Menüleiste soll bei nicht aufgeklapptem Menü immer der Höhe des <div>-Containers entsprechen. D.h., dass der farbige Hintergrund der Hauptmenüpunkte eben entsprechend hoch angezeigt werden soll.
Mit dem folgenden Code ( Achtung: alles schön bunt ) klappt es im Firefox. Im IE 6 leider nicht.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style text="text/css"> 
html,body {  margin:0;
  padding:0;
  height:100%; }
#header {       height: 15%;
  background-color: blue; } 
 
#menuleiste {         height: 5%;
  background-color: aqua; }
#right {        width: 25%;
  height: 75%;
  float: right;
  background-color: yellow;
  margin-left: 0;
  margin-left:-3px; }
#content {      height: 75%;
  background-color: red; }
#footer {       height: 5%;
  background-color: orange; } 
 
#menu { height: 100%; list-style-type:none; margin:0px 0 0px 0px; padding:0;}
#menu li {height: 100%; float:left; padding:0; margin:0 5px 0 0; position:relative; width:150px; z-index:100;}
#menu li dl {height: 100%; position:absolute; top:0; left:0;}
#menu li a, #menu li a:visited {height: 100%; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:20px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu tr { height: 100%; }
#menu dl {height: 100%; width: 150px; margin: 0; padding: 0; text-align:center;}
#menu dt { height: 100%; margin:0; padding: 0px; font-size: 1.1em; color: #fff; border-bottom:1px solid #444;}
#menu .one { height: 100%; background: #9AC0CD top left;}
#menu .two {height: 100%; background: #9AC0CD top left;}
#menu .three {height: 100%; background: #9AC0CD top left;}
#menu .four {height: 100%; background: #9AC0CD top left;}
#menu .five {height: 100%; background: #9AC0CD top left;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; background: #47a; text-align:left;}
#menu dd.last {border-bottom:1px solid #444;}
.gallery dt a, .gallery dt a:visited {display:block; color:#444;}
.gallery dd a, .gallery dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px;
background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;}
.gallery dd a:hover {background: #258 url(arrowr.gif) no-repeat 11px 10px; color:#9cf;}  
 
</style>
</head>
<body>
<div id="header">&nbsp;</div>
<div id="menuleiste">
<ul id="menu">
 <li> 
 <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
 <dl class="gallery">
 <dt class="one"><a href="Aktuell/index.html">Aktuell</a></dt>
 <dd><a href="Aktuell/nachrichten.html">Nachrichten</a></dd>
 <dd><a href="Aktuell/newsletter.html">Newsletter</a></dd>
 <dd><a href="Aktuell/stellenangebote.html">Stellenangebote</a></dd>
 <dd class="last"><a href="Aktuell/ausblicke.html">Ausblicke</a></dd>
 </dl>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 
 <li>
 <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
 <dl class="gallery"> 
 <dt class="two"><a href="Unternehmen/index.html">Unternehmen</a></dt>
 <dd>Unternehmen</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Berater &amp; Skills</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Presse</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Referenzen</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Stellenangebote</a></dd>
 <dd>Service</dd>
 <dd><a href="Aktuell/nachrichten.html">HELPdesk</a></dd>
 <dd><a href="Aktuell/nachrichten.html">HELPdesk international</a></dd>
 <dd><a href="Aktuell/nachrichten.html">SITEservice</a></dd>
 <dd>Support</dd>
 <dd><a href="Aktuell/nachrichten.html">PREMIUMsup</a></dd>
 <dd><a href="Aktuell/nachrichten.html">MAINTAINENCEsup</a></dd>
 <dd><a href="Aktuell/nachrichten.html">INDIVIDUALsup</a></dd>
 </dl>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 <li>
 <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
 <dl class="gallery">
 <dt class="three"><a href="Loesungen/index.html">L&ouml;sungen</a></dt>
 <dd>L&ouml;sungen</dd>
 <dd><a href="Aktuell/nachrichten.html">50map</a></dd>
 <dd><a href="Aktuell/nachrichten.html">CHEMmap</a></dd>
 <dd><a href="Aktuell/nachrichten.html">FOODmap</a></dd>
 <dd><a href="Aktuell/nachrichten.html">PHARMAmap</a></dd>
 <dd>Erweiterungen</dd>
 <dd><a href="Aktuell/nachrichten.html">ENERGYmap</a></dd>
 <dd><a href="Aktuell/nachrichten.html">MAMmap</a></dd>
 <dd><a href="Aktuell/nachrichten.html">SCANmap</a></dd>
 <dd><a href="Aktuell/nachrichten.html">UPGRADEmap</a></dd>
 <dd>Anwendungen</a></dd>
 <dd><a href="Aktuell/nachrichten.html">FastTrack - Revenue</a></dd>
 <dd><a href="Aktuell/nachrichten.html">FastTrack - Quality</a></dd>
 <dd><a href="Aktuell/nachrichten.html">OrderTracking</a></dd>
 </dl>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 <li>
 <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
 <dl class="gallery">
 <dt class="four"><a href="Spezialthemen/index.html">Spezialthemen</a></dt>
 <dd><a href="Aktuell/nachrichten.html">asdf</a></dd>
 <dd><a href="Aktuell/nachrichten.html">asdf</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Reach</a></dd>
 <dd><a href="Aktuell/nachrichten.html">asdf</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Validierung</a></dd>
 </dl>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 <li>
 <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
 <dl class="gallery">
 <dt class="five"><a href="Partner/index.html">Partner</a></dt>
 <dd><a href="Aktuell/nachrichten.html">Atima</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Chemgeneering</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Format</a></dd>
 <dd><a href="Aktuell/nachrichten.html">asdf</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Inside</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Laus</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Logitronic</a></dd>
 <dd><a href="Aktuell/nachrichten.html">asdf</a></dd>
 <dd><a href="Aktuell/nachrichten.html">asdf</a></dd>
 <dd><a href="Aktuell/nachrichten.html">SecurIntegration</a></dd>
 
 </dl>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
</ul>
</div>
<div id="right">&nbsp;</div>
<div id="content">&nbsp;</div>       
<div id="footer">&nbsp;</div>
 
</body>
</html>
Kann mir jemand sagen, woran dies liegt bzw. was ich tun muss, damit die Anzeige im IE 6 so dargestellt wird, wie ich es mir wünsche?

VIELEN DANK für sachdienliche Hinweise!
 
Hi,

da für den IE6 zusätzlich eine Tabelle um die Menüpunkte gelegt wird, müsste für sie ebenfalls eine 100%-Höhe definiert werden:

Code: 
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em; height:100%;}
 
Hallo Maik,

jawoll, danke schön, das war auf jeden Fall schon mal eine große Hilfe!

Nun habe ich nur noch das Problem, dass der Hintergrund der Menüpunkte nach unten - in den nächsten div-Bereich - etwas überlappt. Sieht ein bißchen beknackt aus. Ich poste noch mal den bis hierher korrigierten Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style text="text/css"> 
html,body {  margin:0;
  padding:0;
  height:100%; }
#header {       height: 15%;
  background-color: blue; } 
 
#menuleiste {         height: 5%;
  background-color: aqua; }
#right {        width: 25%;
  height: 75%;
  float: right;
  background-color: yellow;
  margin-left: 0;
  margin-left:-3px; }
#content {      height: 75%;
  background-color: red; }
#footer {       height: 5%;
  background-color: orange; } 
                          
#menu { height: 100%; list-style-type:none; margin:0px 0 0px 0px; padding:0;}
#menu li {height: 100%; float:left; padding:0; margin:0 5px 0 0; position:relative; width:150px; z-index:100;}
#menu li dl {height: 100%; position:absolute; top:0; left:0;}
#menu li a, #menu li a:visited {height: 100%; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:20px;}                                  
#menu table {height: 100%; border-collapse:collapse; padding:0; margin: 0px; font-size:1em;}
#menu tr {height: 100%;}
#menu dl {height: 100%; width: 150px; margin: 0; padding: 0; text-align:center;}
#menu dt { height: 100%; margin:0; padding: 0px; font-size: 1.1em; color: #fff; }
#menu .one { height: 100%; background: #9AC0CD top left;}
#menu .two {height: 100%; background: #9AC0CD top left;}
#menu .three {height: 100%; background: #9AC0CD top left;}
#menu .four {height: 100%; background: #9AC0CD top left;}
#menu .five {height: 100%; background: #9AC0CD top left;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; background: #47a; text-align:left;}
#menu dd.last {border-bottom:1px solid #444;}
.gallery dt a, .gallery dt a:visited {display:block; color:#444;}
.gallery dd a, .gallery dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px;
background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;}
.gallery dd a:hover {background: #258 url(arrowr.gif) no-repeat 11px 10px; color:#9cf;}  
  
</style>
</head>
<body>
<div id="header">&nbsp;</div>
<div id="menuleiste">
<ul id="menu">
 <li> 
 <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
 <dl class="gallery">
 <dt class="one"><a href="Aktuell/index.html">Aktuell</a></dt>
 <dd><a href="Aktuell/nachrichten.html">Nachrichten</a></dd>
 <dd><a href="Aktuell/newsletter.html">Newsletter</a></dd>
 <dd><a href="Aktuell/stellenangebote.html">Stellenangebote</a></dd>
 <dd class="last"><a href="Aktuell/ausblicke.html">Ausblicke</a></dd>
 </dl>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 
 <li>
 <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
 <dl class="gallery"> 
 <dt class="two"><a href="Unternehmen/index.html">Unternehmen</a></dt>
 <dd>Unternehmen</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Berater &amp; Skills</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Presse</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Referenzen</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Stellenangebote</a></dd>
 <dd>Service</dd>
 <dd><a href="Aktuell/nachrichten.html">HELPdesk</a></dd>
 <dd><a href="Aktuell/nachrichten.html">HELPdesk international</a></dd>
 <dd><a href="Aktuell/nachrichten.html">SITEservice</a></dd>
 <dd>Support</dd>
 <dd><a href="Aktuell/nachrichten.html">PREMIUMsup</a></dd>
 <dd><a href="Aktuell/nachrichten.html">MAINTAINENCEsup</a></dd>
 <dd><a href="Aktuell/nachrichten.html">INDIVIDUALsup</a></dd>
 </dl>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>

 <li>
 <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
 <dl class="gallery">
 <dt class="three"><a href="Loesungen/index.html">L&ouml;sungen</a></dt>
 <dd>L&ouml;sungen</dd>
 <dd><a href="Aktuell/nachrichten.html">50map</a></dd>
 <dd><a href="Aktuell/nachrichten.html">CHEMmap</a></dd>
 <dd><a href="Aktuell/nachrichten.html">FOODmap</a></dd>
 <dd><a href="Aktuell/nachrichten.html">PHARMAmap</a></dd>
 <dd>Erweiterungen</dd>
 <dd><a href="Aktuell/nachrichten.html">ENERGYmap</a></dd>
 <dd><a href="Aktuell/nachrichten.html">MAMmap</a></dd>
 <dd><a href="Aktuell/nachrichten.html">SCANmap</a></dd>
 <dd><a href="Aktuell/nachrichten.html">UPGRADEmap</a></dd>
 <dd>Anwendungen</a></dd>
 <dd><a href="Aktuell/nachrichten.html">FastTrack - Revenue</a></dd>
 <dd><a href="Aktuell/nachrichten.html">FastTrack - Quality</a></dd>
 <dd><a href="Aktuell/nachrichten.html">OrderTracking</a></dd>
 </dl>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 <li>
 <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
 <dl class="gallery">
 <dt class="four"><a href="Spezialthemen/index.html">Spezialthemen</a></dt>
 <dd><a href="Aktuell/nachrichten.html">Antiterror</a></dd>
 <dd><a href="Aktuell/nachrichten.html">D-U-N-S</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Reach</a></dd>
 <dd><a href="Aktuell/nachrichten.html">SOX</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Validierung</a></dd>
 </dl>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 <li>
 <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
 <dl class="gallery">
 <dt class="five"><a href="Partner/index.html">Partner</a></dt>
 <dd><a href="Aktuell/nachrichten.html">Atima</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Chemgeneering</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Format</a></dd>
 <dd><a href="Aktuell/nachrichten.html">IMC</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Inside</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Laus</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Logitronic</a></dd>
 <dd><a href="Aktuell/nachrichten.html">Nexio</a></dd>
 <dd><a href="Aktuell/nachrichten.html">SAP</a></dd>
 <dd><a href="Aktuell/nachrichten.html">SecurIntegration</a></dd>
 
 </dl>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
</ul>
</div>
<div id="right">&nbsp;</div>
<div id="content">&nbsp;</div>       
<div id="footer">&nbsp;</div>
 
</body>
</html>

Ich weiß nicht, ob ich da bei tr noch etwas anderes einstellen muss (?) :confused:
Wenn ich dort das height: 100%; weglasse, ist es ähnlich, wie wenn ich height:100% bei table weglasse. Wenn ich's hinschreibe, ist aber quasi zu viel.
Addieren sich hier die Prozente evtl. irgendwie?

Vielen Dank für weitere Tips!
 
Hi,

notier mal zu Beginn des Stylesheets diese Regel:

Code: 
* {
margin:0;
padding:0;
}
und notier nach dem Stylesheet den folgenden "Conditional Comment", da die 100%-Höhe der Hauptlinks an die Links der zweiten Menüebene vererbt, und diese daher in der Vertikalen auseinandergezogen werden:

Code: 
<style type="text/css">
...
</style>

<!--[if lte IE 6]>
<style type="text/css">
#menu dd a, #menu dd a:visited { height:1%; }
</style>
<![endif]-->
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück