Navigation, horizontal, zentriert, mousover, float left möglich?

[mtjvc]

Hallo Leute

Bin gerade dabei eine Website für einen Bekannten zu erstellen..

So weit so gut ... Hier kommt mein Problem

Wir haben hier eine Navigationsleiste, die ist fixed gesetzt weil sie bis zum Ende der Seite mitscrollen soll ..

Mousover Effekte damit es auch anschaulich ist ..

Meine Frage:

Wenn ich in den Browser rein oder rauszoome ... Dann verändert sich die Navigationsleiste..  Bzw. sie ist nichtmehr zentriert..

Die Html:

  
<ul class="nostyle">  
<li class="home"><a href="#box1"></a></li>  
<li class="profil"><a href="#box2"></a></li>  
<li class="leistungen"><a href="#box3"></a></li>  
<li class="kontakt"><a href="#box4"></a></li>  
<li class="niceprice"><a href="#box5"></a></li>  
</ul>  

Css

  
@charset "utf-8";  
/* CSS Document */  
  
  
.nostyle  
{		  
			margin-left: auto;  
            margin-right: auto;  
			list-style-type:none;  
			position:fixed;  
			top:20px;  
			left: 400px;  
			background:none;  
			float:right;  
			width:100%;  
			  
}  
  
  
  
.home  
{  
	float:left;  
}  
.home a       { display:block;  
             background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/home.png);  
             width:109px; height:41px }  
.home a:hover { background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/home_on.png); }  
  
  
  
  
  
.profil  
{  
	float:left;  
}  
.profil a       { display:block;  
          		   background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/profil.png);  
          		   width:109px; height:41px }  
.profil a:hover { background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/profil_on.png); }  
  
  
  
  
  
.leistungen  
{  
						float:left;  
}	  
.leistungen a       {	display:block;  
          			   background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/leistungen.png);  
          			   width:109px; height:41px; }  
.leistungen a:hover { background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/leistungen_on.png); }  
  
  
  
  
.kontakt  
{  
					float:left;  
}  
.kontakt a       { display:block;  
          		   background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/kontakt.png);  
          		   width:109px; height:41px; }  
.kontakt a:hover { background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/kontakt_rot.png); }  
  
  
.niceprice  
{  
					float:left;  
}  
.niceprice a	{	display:block;  
					background-image:url(../images/images_menueleiste/bilder_menueleiste_neu/niceprice.png);  
					width:109px; height:41px;}  
  
  

Zur veranschaulichung:

Website

Hoffe ihr versteht meine Frage und könnt mir helfen..

Mfg

Anto