DropDown-Menü - 2 Problemchen

Status
Nicht offen für weitere Antworten.
W

WIK-Lars

Erfahrenes Mitglied
Hallo Zusammen,
ich habe mit dem folgenden Dropdownmenü noch so meine Problemchen (leider kann ich's z.Zt. nichts auf einem Server zum Ansehen zur Verfügung stellen, weshalb ich hier den kompletten Code zum Kopieren einfüge).

Im 2. und 3. Menü (Unternehmen, Lösungen) gibt es zwischen den Menüpunkten Zwischenüberschriften. Diese werden automatisch nach links gerückt. Sie sollen aber auf der gleichen 'Ebene' wie die Menüpunkte angezeigt werden. Hat jemand einen Vorschlag?

Desweiteren wird die Menüleiste, wenn der Browser verkleinert wird, umgebrochen. Das geht natürlich gar nicht. Leider weiß ich auch hier nicht, wie ich's ändern kann.

Und nun der Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style text="text/css"> 
html,body { margin:0;
padding:0;
height:100%; }
#header { height: 15%; 
border-width: 1px;
border-style: solid;
border-color: black;
} 

#menuleiste { height: 5%;
border-width: 1px;
border-style: solid;
border-color: black; }
#right { width: 25%;
height: 75%;
border-width: 1px;
border-style: solid;
border-color: black;
float: right;
margin-left: 0;
margin-left:-3px; }
#content { height: 75%;
border-width: 1px;
border-style: solid;
border-color: black; }
#footer { height: 5%;
border-width: 1px;
border-style: solid;
border-color: black; } 

#menu { height: 100%; list-style-type:none; list-style-position:inside; margin:0px 0 0px 0px; padding:0;}
#menu li {height: 100%; float:left; padding:0; margin:0 5px 0 0; position:relative; width:180px; 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: 180px; margin: 0; padding: 0; /* text-align:center; */}
#menu dt { height: 100%; margin:0; padding: 0px; font-size: 1.1em; color: #444444; }
#menu .first { height: 100%; background: #9AC0CD top left; text-align:center;}
#menu dd {margin:0; padding:0; color: #444444; font-size: 1em; background-color: #CCCCFF; text-align:left;}
#menu .zwischenueberschrift { color: #444444; background-color: #99CCCC; }
.gallery dt a, .gallery dt a:visited {display:block; color:#444444;}
.gallery dd a, .gallery dd a:visited {color:#444444; text-decoration:none; display:block; padding:4px 5px 4px 20px;
background: #CCCCFF url(arrow.gif) no-repeat 10px 10px; width:125px;}
.gallery dd a:hover {background: #9AC0CD url(arrowr.gif) no-repeat 11px 10px; color:#444444;}
img .topll { } 

</style>
</head>
<body>
<div id="header">
<img id="logo" src="logo.gif" alt="" height="60" width="200" border="0" />
<img id="map_basis" src="map_basis.gif" alt="" height="40" width="260" border="0" />
<img class="topll" src="topll.gif" alt="" height="67" width="137" border="0" />
</div>
<div id="menuleiste">
<ul id="menu">
<li> 
<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
<dl class="gallery">
<dt class="first"><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><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 cellspacing="0" cellpadding="0"><tr><td><![endif]-->
<dl class="gallery"> 
<dt class="first"><a href="Unternehmen/index.html">Unternehmen</a></dt>
<dd class="zwischenueberschrift">Unternehmen</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxx</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 class="zwischenueberschrift">Service</dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">HELPdesk international</a></dd>
<dd><a href="Aktuell/nachrichten.html">SITEservice</a></dd>
<dd class="zwischenueberschrift">Support</dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">Ixxxxxxxxx</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 
<li>
<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
<dl class="gallery">
<dt class="first"><a href="Loesungen/index.html">L&ouml;sungen</a></dt>
<dd class="zwischenueberschrift">L&ouml;sungen</dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd class="zwischenueberschrift">Erweiterungen</dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd class="zwischenueberschrift">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 cellspacing="0" cellpadding="0"><tr><td><![endif]-->
<dl class="gallery">
<dt class="first"><a href="Spezialthemen/index.html">Spezialthemen</a></dt>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">Reach</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</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 cellspacing="0" cellpadding="0"><tr><td><![endif]-->
<dl class="gallery">
<dt class="first"><a href="Partner/index.html">Partner</a></dt>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</a></dd>
<dd><a href="Aktuell/nachrichten.html">xxxxxxxxx</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>

VIELEN DANK für Eure Tips!!
 
Hi,

die Zwischenüberschriften lassen sich ganz bequem mit Hilfe der padding-left-Eigenschaft einrücken.

Das Umbrechen der Menüleiste kannst du mit Hilfe der min-width-Eigenschaft unterbinden.

Da diese vom IE6 nicht unterstützt wird, empfehle ich dir als Workaround http://www.cssplay.co.uk/boxes/minwidth.html
 
Maik hat gesagt.:
Das Umbrechen der Menüleiste kannst du mit Hilfe der min-width-Eigenschaft unterbinden.

Da diese vom IE6 nicht unterstützt wird, empfehle ich dir als Workaround http://www.cssplay.co.uk/boxes/minwidth.html
Zum Vergrößern anklicken....

Hab's gerade mal mit dem Tutorial versucht. Hat bei mir irgendwie nicht funktioniert, vielleicht hab ich's aber auch nicht ganz richtig verstanden.
Gibt's da keine andere Möglichkeit für den IE 6?
( IE 6, mach nur Probleme das Ding :mad: )

Danke für Deine Tips!!
 
Ich hab es eben mit dem Original-Menü probiert, aber darin funktioniert noch nicht mal die min-width-Eigenschaft in den modernen Browsern (Firefox, Opera & Co.) :eek: ... folglich kann auch der IE-Workaround nicht greifen ;)

Bliebe als Lösung eine fixe Breitenangabe für das Menü, um das Umbrechen der Menüpunkte beim Verkleinern des Fensters zu unterbinden.
 
Tja, hallo noch mal Zusammen,

hat da nicht vielleicht noch jemand eine Lösung parat?
Ich komme mit diesem Problem einfach nicht weiter.
Ideen, Vorschläge ... WILLKOMMEN!

Und DANKE!!
 
Hi,

ich hab dir doch die Lösung genannt, die in diesem Fall übrig bleibt, um das Umbrechen der Hauptlinks beim Verkleinern des Browserfensters zu vermeiden.
 
Und was spricht hier bitte gegen eine fixe Breite für das Menü, wenn derzeit in deinem Layout-Gerüst die Hauptmenüpunkte eine fixe Breite besitzen? :suspekt:

Ansonsten wirst du damit leben müssen, dass die Menüpunkte beim Verkleinern des Fensters umbrechen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück