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

Navigation zentrieren

H

Hansii

Mitglied
Hallo liebe Community,

arbeite derzeit wieder am Design meiner Homepage (Bundesliga Saison 2012/2013).

Auf der Homepage ist ein Header drauf (mit DIVs). Darunter ist eine Navigation. Diese soll zentriert werden. Wie mache ich das ?

Hier der CSS-Code der Navi :

Code: 
#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a
{
margin: 0;
padding: 0;
position: relative;
}


#cssmenu: after, #cssmenu ul: after
{
content: ";
display: block;
clear: both;
}


#cssmenu a
{
color: #ffffff;
display: inline-block;
font-family: Arial;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}


#cssmenu ul 
{
list-style: none;
}


#cssmenu > ul > li 
{
float: left;
}


#cssmenu > ul > li.active a 
{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
filter: none;
}


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


#cssmenu > ul > li a 
{
box-shadow: inset 0 0 0 1px #31B404;
-moz-box-shadow: inset 0 0 0 1px #31B404;
-webkit-box-shadow: inset 0 0 0 1px #31B404;
background: #31B404;
background: -moz-linear-gradient(top, #31B404 0%, #31B404 50%, #31B404 51%, #31B404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #31B404), color-stop(50%, #31B404), color-stop(51%, #31B404), color-stop(100%, #31B404));
background: -webkit-linear-gradient(top, #31B404 0%, #31B404 50%, #31B404 51%, #31B404 100%);
background: -o-linear-gradient(top, #31B404 0%, #31B404 50%, #31B404 51%, #31B404 100%);
background: -ms-linear-gradient(top, #31B404 0%, #31B404 50%, #31B404 51%, #31B404 100%);
background: linear-gradient(to bottom, #31B404 0%, #31B404 50%, #31B404 51%, #31B404 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#31B404', endColorstr='#31B404', GradientType=0);
border-bottom: 1px solid #31B404;
border-top: 1px solid #31B404;
border-right: 1px solid #31B404;
line-height: 34px;
padding: 0 33px;
filter: none;
}


#cssmenu > ul > li a:hover 
{
background: #8a8a8a;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ffffff), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}


#cssmenu > ul > li:first-child a 
{
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #5d5d5d;
}


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


#cssmenu .has-sub:hover ul 
{
display: block;
}


#cssmenu .has-sub ul 
{
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
/* IE7 */ *width: 100%;
}


#cssmenu .has-sub ul li
{
text-align: center;
}


#cssmenu .has-sub ul li a 
{
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}


#cssmenu a:hover 
{
color: #000000;
display: inline-block;
font-family: Arial;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #000000;
}
 
Werbung:
Ich habe versucht, diesen Code einzubauen und es auch dann geschafft. Allerdings ist die Navi nicht zentriert. Es hat sich nichts geändert. Kann man das auch noch irgendwie anders machen ??

MfG
 
Werbung:
Du hast auch im Moment 2 html tags in deinem code... jeweils mit head und body. Einmal reicht ;)

Das ist falsch:
<html>

<html>
</html>

</html>
 
Werbung:
Kein Doctype, CSS-Verlinkung im Body, was soll da auch funktionieren?

Ich hatte vor längerer Zeit mal ein einfach nachzuvollziehendes Grundgerüst für eine Navigation - samt erläuternden CSS-Kommentaren - mit bewusst minimal gehaltenem Styling gepostet.

Bau das aber nicht in dein Script ein, sondern speichere es als neue Datei, passe die Navigation deinen Vorstellungen an, style sie, und erst wenn alles funktionieren sollte, füge die anderen Elemente aus deiner Ursprungsdatei hinzu. Aber möglichst ohne Tabellen, <center> Tags und Attributen wie align, size oder face.

http://www.html.de/css/41038-horizontale-navigationsleiste.html
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben