Jan: jemand eine Idee wie ich das hier zentrieren kann?

Beitrag lesen

SELF-Forum

jemand eine Idee wie ich das hier zentrieren kann?

Jan Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich bastel gerade an einem neuen Design und habe folgendes Problem.
In meine Top-Navigation soll zentriert werden, doch leider kriege ich das nicht hin:

<body>  
  
<div id="topnav">  
            		<div class="moduletable">  
					  
<ul class="menu">  
<li class="item-101 current active"><a href="/" >Home</a></li>  
<li class="item-102 current active"><a href="/" >Home</a></li>  
    <li class="item-102 current active"><a href="/" >Home</a></li></ul>  
  
		</div>  
	  
        </div>  
  
</body>

body {background-color:#e5e5e5;}  
  
/* ************************** NAVIGATION ************************  
*****************************************************************/  
  
#topnav {  
    width: 1050px;  
	height: 40px;  
    float:left;  
}  
  
#topnav .menu{  
	height: 40px;  
    list-style-type:none;  
}  
  
#topnav .menu li a{  
	width: 200px;  
	height: 30px;  
	float:left;  
	  
    margin-top: 5px;  
	margin-left:10px;  
	margin-right: 10px;  
	  
	font-family: 'Oswald', Arial, sans-serif;  
	font-size: 22px;  
	font-weight: 600;  
	line-height: 30px;  
	text-align:center;  
	color: #FFF;  
	text-decoration: none;  
	  
	text-shadow: 2px 2px 2px #000;  
	  
	background-image:  url(http://yourown.de/templates/yourownmainpage/images/menuheaderbg01.png);  
    background-repeat: no-repeat;  
    background-position: 50% 50%;  
	-webkit-border-radius: 15px;  
        border-radius: 15px;  
	-webkit-border-radius: 15px;  
        border-radius: 15px;  
	  
	webkit-transition: all 100ms ease-in;  
	-moz-transition: all 100ms ease-in;  
	-ms-transition: all 100ms ease-in;  
	-o-transition: all 100ms ease-in;  
	transition: all 100ms ease-in;  
	  
}  
  
#topnav .menu li a:hover{  
    margin-left:5px;  
	margin-right: 5px;  
    margin-top: 3px;  
	width: 210px;  
	height: 34px;  
	  
	font-size: 25px;  
	font-weight: 800;  
	  
	-webkit-border-radius: 17px;  
        border-radius: 17px;  
	-webkit-border-radius: 17px;  
        border-radius: 17px;  
	  
	background-color: #fff;  
	text-shadow: 4px 4px 4px #000;  
	-webkit-transition: all 200ms ease-in;  
	-moz-transition: all 200ms ease-in;  
	-ms-transition: all 200ms ease-in;  
	-o-transition: all 200ms ease-in;  
	transition: all 200ms ease-in;  
}

Jsfiddle Link

Wie ihr seht konnte ich mir Vertikal helfen, da ich ja die Feste höhe der Elemente weiß. jedoch weiß ich ja nicht wie viele Links in der Navigation sein werden bzw sie sich ja immer wieder ändern, daher weiß ich nicht wie ich es hinkriegen soll.

Jemand eine Idee?

mfg Jan

Beitrag melden
–
Informationen zu den Bewertungsregeln