Hey,
ich würde gerne ein Menü mit einer festen Breite realisieren, egal wieviele Menüpunkte enthalten sind.
<div class="header-top">
<!-- Navigation Level 1 -->
<div class="nav1">
<ul>
<li><a href="#" title="Send us a message">Kontakt</a></li>
</ul>
<ul>
<li><a href="#" title="Send us a message">International</a>
<ul>
<li><a href="#" title="English">English</a></li>
<li><a href="#" title="Deutsch">Deutsch</a></li>
<li><a href="#" title="Francais">Français</a></li>
<li><a href="#" title="Italiano">Italiano</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" title="Who we are">Sitemap</a></li>
</ul>
<ul>
<li><a href="#" title="Send us a message">Impressum</a></li>
</ul>
</div>
<!-- Search form -->
<div class="searchform">
<form action="index.html" method="get">
<fieldset>
<input name="field" class="field" value=" Search..." />
<input type="submit" name="button" class="button" value="GO!" />
</fieldset>
</form>
</div>
<!-- A.3 HEADER BOTTOM -->
<div class="header-bottom">
<!-- Navigation Level 2 (Drop-down menus) -->
<div class="nav2">
<ul>
<!-- Navigation item -->
<li class="design_eins"><a href="index.html">Ein sehr langer Menutitel</a></li>
<li class="design_zwei"><a href="#">Ein sehr langer Menutitel 1</a></li>
<li class="design_drei"><a href="#">Ein sehr langer Menutitel 2</a></li>
<li class="design_vier"><a href="#">Ein sehr langer Menutitel 3</a></li>
<li class="design_fuenf"><a href="#">Ein sehr langer Menutitel 4</a></li>
</ul>
</div>
</div>
</div>
Alles anzeigen
Und hier die CSS-Datei:
/*Drop-down menu*/
.nav2 {margin:1.5em 0 0 0; white-space:nowrap /*IE hack*/; float:left; width:954px; color:rgb(255,255,255); font-size:120%;} /*Color navigation bar normal mode*/
.nav2 ul { list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(255,255,255);}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; padding:0 16px 0 16px; text-decoration:none; font-weight:normal; color: rgb(255,255,255);}
.nav2 ul li ul {display:none; border:none;}
.design_eins {background-color:rgb(51,103,153);}
.design_zwei {background-color:rgb(159,0,95);}
.design_drei {background-color:rgb(5,132,113);}
.design_vier {background-color:rgb(173,10,15);}
.design_fuenf {background-color:rgb(231,169,34);}
/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(218,222,226); text-decoration:none; color:rgb(80,80,80);} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(80,80,80);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(218,222,226); text-decoration:none;} /*Color subcells hovering mode*/
/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(218,222,226); text-decoration:none;color:rgb(80,80,80);} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(218,222,226); font-weight:normal; color:rgb(80,80,80);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(218,222,226); text-decoration:none;} /*Color subcells hovering mode*/
Alles anzeigen
Könnt ihr mir sagen, wieso das Menü eine zweite Zeile erhält? Ich würde gerne, dass alle Menüpunkte gleich breit sind und das ganze Menü zusammen nur 954px breit ist. Die Höhe des Menüs kann dann ruhig höher sein, wenn der Text sonst nicht reinpasst. Aber auf keinen Fall eine zweite Zeile in der ein Menüpunkt springt. [Blockierte Grafik: http://www.html.de/images/smilies/icon_sad.gif]
Hier ist sonst auch nochmal die Zip-Datei mit der HTML-Datei und der CSS Datei. Habe das einfach mal zweimal hochgeladen, weil es nur 25mal pro link heruntergeladen werden kann.
http://www.materialordner.de/mWUhgJs8ROrR4R…B5E0DQwzFI.html
http://www.materialordner.de/iMZfQ56OI9YIKK…pFxRj53u1a.html
Könnt ihr mir vielleicht weiterhelfen?
Viele Grüße
Daniel