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

Einfaches Zentrieren

H

Hansii

Mitglied
Hallo.

Habe folgende Navigation : http://www.info-bundesliga.de/header.html

Wo muss ich welchen Code einfügen ? Der CSS-Code ist hier :


#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: #646464;

background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));

background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);

filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', 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, #646464 0%, #4a4a4a 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));

background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);

filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);

filter: none;

}


#cssmenu > ul > li a
{

box-shadow: inset 0 0 0 1px #8a8a8a;

-moz-box-shadow: inset 0 0 0 1px #8a8a8a;

-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;

background: #4a4a4a;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));

background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);

background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);

background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);

filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
border-bottom: 1px solid #5d5d5d;

border-top: 1px solid #5d5d5d;

border-right: 1px solid #5d5d5d;

line-height: 34px;

padding: 0 35px;

filter: none;

}


#cssmenu > ul > li a:hover
{

background: #8a8a8a;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));

background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);

background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);

background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);

background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 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;

}




Bitte helft mir dringend !!!
 
Zunächst einmal, herzlich willkommen bei HTML.de!

Was genau willst du denn zentrieren? Wenn du Hilfe möchtest, dann gib dir bitte auch etwas Mühe bei der Fehlerbeschreibung. Außerdem solltest du auf die
Code: 
-Tags zurückgreifen, um Code einzubinden.
 
Hi.

Will die ganze Menüleiste in die Mitte setzen. Hier nochmals der 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: #646464;

background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));

background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);

filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', 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, #646464 0%, #4a4a4a 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));

background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);

background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);

filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);

filter: none;

}


#cssmenu > ul > li a
{

box-shadow: inset 0 0 0 1px #8a8a8a;

-moz-box-shadow: inset 0 0 0 1px #8a8a8a;

-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;

background: #4a4a4a;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));

background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);

background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);

background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);

filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
border-bottom: 1px solid #5d5d5d;

border-top: 1px solid #5d5d5d;

border-right: 1px solid #5d5d5d;

line-height: 34px;

padding: 0 35px;

filter: none;

}


#cssmenu > ul > li a:hover
{

background: #8a8a8a;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));

background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);

background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);

background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);

background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 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;

}
Zum Vergrößern anklicken....

Danke für die Hilfe...
 
Wenn das Menü eine feste Breite hat, dann hilft

Code: 
#cssmenu {
 margin: 0 auto;
 width: 1129px;
}

Hab ich mit Firebug so ausgemessen, finde ich aber schon etwas extrem breit ..

Wenn das Menü eine dynamische Breite hat, dann solltest Du dich mal nach "css horizontales menü zentrieren" umschauen. Darunter findet Du verschiedene Tipps die allerdings recht komplex sind.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben