Auf Thema antworten

Beitrag

[QUOTE="dchrist1, post: 6968, member: 159"]
Hey,

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

[HTML]
<div class="header-top">        
        
        <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>
                          
        <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> 
        
        <div class="header-bottom">
      
        
        <div class="nav2">
        <ul>
             
            <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>
[/HTML]Und hier die CSS-Datei:

[HTML]
/*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*/
[/HTML]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. [IMG]http://www.html.de/images/smilies/icon_sad.gif[/IMG]

Hier ist sonst auch nochmal die Zip-Datei mit der HTML-Datei und der CSS Datei. 
[URL]http://www.materialordner.de/4fyGYsq1Dr0fOQWj9Hmkr4zriHVcbzP5.html[/URL]

Könnt ihr mir vielleicht weiterhelfen?

Viele Grüße

Daniel
[/QUOTE]

Authentifizierung