Feste Menübreite funktioniert nicht

[dchrist1]

Hallo zusammen,

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

        <!-- Navigation Level 2 (Drop-down menus) -->
        <div class="nav2">
    
          <!-- Navigation item -->
          <ul class="design_eins">
            <li ><a href="index.html">Ein sehr langer Menütitel</a></li>
          </ul>

          <!-- Navigation item -->
          <ul class="design_zwei">
            <li><a href="#">Ein sehr langer Menütitel 2</a></li>
          </ul>

          <!-- Navigation item -->
          <ul class="design_drei">
            <li><a href="#">Ein sehr langer Menütitel 3</a></li>
          </ul>

          <!-- Navigation item -->
          <ul class="design_vier">
            <li><a href="#">Ein sehr langer Menütitel 4</a></li>
          </ul>
          
          <!-- Navigation item -->
          <ul class="design_fuenf">
            <li><a href="#">Ein sehr langer Menütitel 5</a></li>
          </ul>                                        
        </div>

Hierzu 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; height:2.5em; line-height:2.5em; 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 li{background-color:rgb(51,103,153);}
.design_zwei li{background-color:rgb(159,0,95);}
.design_drei li{background-color:rgb(5,132,113);}
.design_vier li{background-color:rgb(173,10,15);}
.design_fuenf li{background-color:rgb(231,169,34);}

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 :(

Könnt ihr mir vielleicht weiterhelfen?

 

[Elroy]

Hallo.

Wenn du möchtest das alle Menüpunkte gleich breit sind dann musst du ihnen auch eine Breite zuweisen.
Davon kann ich in deinem CSS nichts sehen.

Gruss
Elroy

 

[dchrist1]

Hmm.. Ich würde gerne, dass der Browser die Breite der Menüpunkte automatisch zuweist. Also wenn ich noch einen Menüpunkt mehr mache, möchte ich ungern die ganzen Breiten wieder anpassen. Versteht ihr was ich meine?

Viele Grüße
Daniel

 

[threadi]

Es gibt 2 Breitenmaße:
1. Die Breite des gesamten Menüs an sich. Dort sind alle Menüpunkte enthalten.
2. Die Breite der einzelnen Menüpunkte.

Wenn man ersteres auf eine feste Breite setzt und letztere ebenfalls, wird die maximale Breite logischerweise gesprengt sobald die Summe der Menüpunkte größer ist als das Maximum.

Ich nehme an Du willst genau dieses Problem umgehen? Du hast eine maximale Breite für das Menü (1.) und willst aber die Menüpunkte darin in der Breite so haben, dass sie die gesamte Breite einnehmen, aber - sobald ein neuer Menüpunkt hinzugefügt wird - jeweils schmaler werden.

Um das zu realisieren solltest Du zunächst mal deinen Quellcode aufräumen. Das was Du momentan dort hast ist kein Menü. Es sind sinnfrei verwendete Listen mit einzelnen Einträgen. Wozu? So sähe es korrekter aus:

<ul class="nav2">
            <li  class="design_eins"><a href="index.html">Ein sehr langer Menütitel</a></li>
            <li class="design_zwei"><a href="#">Ein sehr langer Menütitel 2</a></li>
            <li class="design_drei"><a href="#">Ein sehr langer Menütitel 3</a></li>
            <li class="design_vier"><a href="#">Ein sehr langer Menütitel 4</a></li>
            <li class="design_fuenf"><a href="#">Ein sehr langer Menütitel 5</a></li>
          </ul>

 

[Bleccer]

also ich glaub das würde gehen wenn du den münu listen also li eine Breite in % abgibst und zwar immer 100% bei jedem so nimmt es immer alles ein was es einnehmen kann aber du musst auch bedenken das ihrgentwann einfach kein platz mehr sein wird und dann wird es einfach über die navigations-leiste drüberhinausgehen. Und du solltest noch die Schrifftgröße der Links in der Navigationsleite in em angeben

bin mir nicht sicher ob das so funktioniert ich hab nur schnell aus der schnelle geschrieben weil ich gleich wohin muss

 

[dchrist1]

Hallo,

vielen Dank für die ersten Tipps. Ich habe mal das Template an zwei Stellen hochgeladen. Ich hoffe, dass ihr mir noch ein wenig helfen könnt. Leider habe ich es bis jetzt noch nicht hinbekommen.

Datei Upload, Bilder hochladen, Datei Hosting auf Materialordner.de

Datei Upload, Bilder hochladen, Datei Hosting auf Materialordner.de

Viele Grüße
D. Christ

 

[threadi]

Bitte stell einen Link bereit oder zeig den kompletten Quellcode. Dateien lade ich nicht runter.

 

[dchrist1]

Hey,

leider habe ich noch keine Domain, daher kann ich auch keinen Link zeigen. Ich mache alles auf meinem PC daheim. Hier der Teil vom Header:

<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:

/*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*/

Viele Grüße

 

[threadi]

Wie schon 2 mal gesagt:
- das Menü hat einen falschen Aufbau (siehe oben)
- du hast keinerlei Breiten für das Menü angegeben (siehe oben)

Eine fehlende Domain ist kein Grund eine Seite nicht auf einen Webspace zu laden. Diesen gibt es auch kostenfrei.