Hey,


ich würde gerne ein Menü mit einer festen Breite realisieren, egal wieviele Menüpunkte enthalten sind.

HTML-Code:
<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&ccedil;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>
Und hier die CSS-Datei:

HTML-Code:
/*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*/
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.

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/mWUhgJs...5E0DQwzFI.html

http://www.materialordner.de/iMZfQ56...FxRj53u1a.html

Könnt ihr mir vielleicht weiterhelfen?

Viele Grüße

Daniel
Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!