• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigationsbreite voll ausnutzen

H

Hansii

Mitglied
Hallo liebe Leute.

Hier ist meine Navigation : http://www.info-bundesliga.de/menu.html

HTML :

HTML: 
<html>
<head>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>1. Bundesliga</span></a>
      <ul>
         <li><a href='#'><span>Spieltage</span></a></li>
         <li><a href='#'><span>Tabelle</span></a></li>
         <li><a href='#'><span>Sieger</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>2. Bundesliga</span></a>
      <ul>
         <li><a href='#'><span>Spieltage</span></a></li>
         <li><a href='#'><span>Tabelle</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>DFB-Pokal</span></a>
      <ul>
         <li><a href='#'><span>1. Vorrunde</span></a></li>
         <li><a href='#'><span>2. Vorrunde</span></a></li>
         <li><a href='#'><span>Achtelfinale</span></a></li>
         <li><a href='#'><span>Viertelfinale</span></a></li>
         <li><a href='#'><span>Halbfinale</span></a></li>
         <li><a href='#'><span>Finale</span></a></li>
         <li><a href='#'><span>Pokalsieger</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Champions League</span></a>
      <ul>
         <li><a href='#'><span>Gruppenphase</span></a></li>
         <li><a href='#'><span>Achtelfinale</span></a></li>
         <li><a href='#'><span>Viertelfinale</span></a></li>
         <li><a href='#'><span>Halbfinale</span></a></li>
         <li><a href='#'><span>Finale</span></a></li>
         <li><a href='#'><span>Sieger</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Europa League</span></a>
      <ul>
         <li><a href='#'><span>Gruppenphase</span></a></li>
         <li><a href='#'><span>Sechzehntelfinale</span></a></li>
         <li><a href='#'><span>Achtelfinale</span></a></li>
         <li><a href='#'><span>Viertelfinale</span></a></li>
         <li><a href='#'><span>Halbfinale</span></a></li>
         <li><a href='#'><span>Finale</span></a></li>
         <li><a href='#'><span>Sieger</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Tippspiel</span></a>
      <ul>
         <li><a href='#'><span>Login</span></a></li>
         <li><a href='#'><span>Registrieren</span></a></li>
         <li><a href='#'><span>Rangliste</span></a></li>
         <li><a href='#'><span>Aktuelles</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>Gästebuch</span></a></li>
   <li><a href='#'><span>Forum</span></a></li>
</ul>
</div>
</body>
</html>

CSS :

Code: 
#cssmenu{ 
width:1200px;
height:37px; 
display:block; 
padding:0; 
margin:20px auto;  
border:1px solid #279409; 
border-radius:5px; 
} 


#cssmenu > ul {
list-style:inside none; 
padding:0; 
margin:0;
} 


#cssmenu > ul > li {
list-style:inside none; 
padding:0; 
margin:0; 
float:left; 
display:block; 
position:relative;
} 


#cssmenu > ul > li > a{ 
outline:none; 
display:block; 
position:relative; 
padding:12px 20px; 
font:bold 13px/100% Arial, Helvetica, sans-serif; 
text-align:center; 
text-decoration:none; 
text-shadow:1px 1px 0 rgba(0,0,0, 0.4); 
} 


#cssmenu > ul > li:first-child > a{
border-radius:5px 0 0 5px;
}


#cssmenu > ul > li > a:after{ 
content:''; 
position:absolute; 
border-right:1px solid; 
top:-1px; 
bottom:-1px; 
right:-2px; 
z-index:99; 
} 


#cssmenu ul li.has-sub:hover > a:after{
top:0;
bottom:0;
} 


#cssmenu > ul > li.has-sub > a:before{ 
content:''; 
position:absolute; 
top:18px; 
right:6px; 
border:5px solid transparent; 
border-top:5px solid #ffffff; 
} 


#cssmenu > ul > li.has-sub:hover > a:before{
top:19px;
} 


#cssmenu ul li.has-sub:hover > a{ 
background:#3f3f3f; 
border-color:#3f3f3f; 
padding-bottom:13px; 
padding-top:13px; 
top:-1px; 
z-index:999; 
} 


#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{
display:block;
}


#cssmenu ul li.has-sub > a:hover{
background:#3f3f3f; 
border-color:#3f3f3f;
} 


#cssmenu ul li > ul, #cssmenu ul li > div{ 
display:none; 
width:auto; 
position:absolute; 
top:38px; 
padding:10px 0; 
background:#3f3f3f; 
border-radius:0 0 5px 5px; 
z-index:999; 
} 


#cssmenu ul li > ul{
width:200px;
} 


#cssmenu ul li > ul li{
display:block; 
list-style:inside none; 
padding:0; 
margin:0; 
position:relative;
} 


#cssmenu ul li > ul li a{ 
outline:none; 
display:block; 
position:relative; 
margin:0; 
padding:8px 20px; 
font:10pt Arial, Helvetica, sans-serif; 
color:#fff; 
text-decoration:none; 
text-shadow:1px 1px 0 rgba(0,0,0, 0.5); 
} 




#cssmenu, #cssmenu > ul > li > ul > li a:hover{ 
background:#279409; 
background:-moz-linear-gradient(top, #279409 0%, #279409 100%); 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#279409), color-stop(100%,#279409)); 
background:-webkit-linear-gradient(top, #279409 0%,#279409 100%); 
background:-o-linear-gradient(top, #279409 0%,#279409 100%); 
background:-ms-linear-gradient(top, #279409 0%,#279409 100%); 
background:linear-gradient(top, #279409 0%,#279409 100%); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#279409', endColorstr='#279409',GradientType=0); 
} 


#cssmenu{
border-color:#279409;
} 


#cssmenu > ul > li > a{
border-right:1px solid #279409; 
color:#fff;
} 


#cssmenu > ul > li > a:after{
border-color:#279409;
} 


#cssmenu > ul > li > a:hover{
background:#3f3f3f;
}

Die Navi hat je eine Breite von 1200 px. Das ist richtg so. Nur rechts ist dort alles so leer. Wie bekomme ich es hin, dass die Menupunkte sich über die volle Breite der Navi hinziehen ?

Danke im Voraus
 
Wenn du das dynamisch machen willst berechne die Anzahl der Menüpunkte via JS. Dann weist du jedem li die Breite: 100/Anzahl der Menüpunktezu. In Prozent natürlich.
 
1200 Pixel? Erscheint mir viel. Passt nicht auf jeden Bildschirm.
(Bei statischen HTML-Seiten kannst du alternativ zu einer Breitenberechnung mit JS auch einfach in die CSS-Datei reinschreiben, ob die Navigationspunkte je 25%, 20%, 17%, 14% oder 12,5% der Breite einnehemen sollen, je nach dem obs 4, 5, 6, 7 oder 8 Menüpunkte gibt.)
 
960 Pixel ist momentan ein gängiges Maß. Vermutlich orientiert sich das an 1024 Pixel breiten Monitoren. Und in denen sollte die Seite schon auch angezeigt werden können.
 
Hallo

960 Pixel ist momentan ein gängiges Maß
Zum Vergrößern anklicken....

Das sehe ich anders. Die 960 Pixel bzw. alle fixen Breitenangaben sind bereits seit dem Jahr 2000 (Einführung von CSS2) veraltet.

Aktuell und noch mehr die Zukunft sind flexible Layouts der Stand der Dinge, wie auch an der Ausrichtung von HTML5 und CSS3 sowie an dem Siegeszeug der MediaQueries und Responsive Design ablesbar ist.

An der Hardware ist dies an der Verdrängung der klasssichen PCs durch Notebooks (mit meist kleineren Displays) und der Verbreitung von iPhone, Smartphone, Tablets und Konsorten nachvollziehbar.

Es steht natürlich jedem frei, "seiner" Seite eine fixe Breite mit auf dem Weg zu geben - aber die dann bitte nicht als "momentan" oder "aktuell" bezeichnen. Seiten mit fixer Breite sind meiner Ansicht nach schlicht und einfach veraltet.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben