Probleme mit simpler horizontale Navigation

[Nick]

Hallo,
ich baue zum ersten Mal ne Seite mit CSS und habe noch Probleme mit der Navigation oben und unten. Ich muss vorweg sagen, dass das CSS auf einem Template basiert, bei dem ich einfach die Rahmen und Farben etc. entfernt habe. Kann also sein, dass da viel Mist drin ist, der nicht wirklich da rein gehört. Leider bekommt man über Google oder der Suchfunktion hier nirgends Anleitungen für so einfache Sachen, wie ich sie vorhab...

Problem 1: Wenn ich in der oberen Navi mit der Maus über den aktiven Link gehe, wird die Schrift um ca. 1px kleiner und finde einfach nicht heraus wieso.

Hier der Code:

 <ul class="menu">  
                    <li ><a href="index.html" class="active">Home</a></li>  
                    <li><a href="ueberuns.html">Über uns</a></li>  
                    <li><a href="produktuebersicht.html">Produktübersicht</a></li>  
                    <li><a href="shop.html">Shop</a></li>  
                    <li><a href="kontakt.html">Kontakt</a></li>  
                    <li><a href="impressum.html">Impressum</a></li>  
                  </ul>

.menu{  
	margin-top:65px;  
margin-left:50px padding:0px; height:10px;  
	width:100%;  
	display:block;  
	margin-left: 50px;  
}  
.menu li{padding:0; margin:0; list-style:none; display:inline;}  
.menu li a{float:left; padding-left:15px; display:block; color:rgb(0,0,0); text-decoration:none; font:15px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; outline:none;}  
.menu li a span{float:left; display:block; padding-right:15px;}  
.menu li a:hover{background-position:0px -60px; color:rgb(202,53,28);}  
.menu li a:hover span{background-position:100% -60px;}  
.menu li a.active,  
.menu li a.active:hover{font:15px Verdana, Arial, Helvetica, sans-serif; color:rgb(202,53,28);  
}

Der Text soll überall 15px groß sein, was er in meinen Augen auch ist. Wo hab ich was vergessen?

Problem 2:

So banal es auch klingt, aber ich werd deswegen noch wahnsinnig: Ich möchte ebenfalls im unteren Bereich der Seite unter dem vorletzten div mit einem breiten Balken drin eine kleine Navigation mit 3 Punkten, die in etwa wie die obere aufgebaut ist integrieren. Ich bekomme sie aber partout nicht mittig, egal was ich mache.

So sieht's aus:

 <ul class="menu1">  
            <li ><a href="kontakt.html"><span>Kontakt</span></a></li>  
            <li><a href="anfahrt.html"><span>Anfahrt</span></a></li>  
            <li><a href="newsletter.html"><span>Newsletter</span></a></li>  
          </ul>

.menu1 { width: 300px;  
	margin: 10px auto;  
	text-align: left; }  
  
.menu1 li{  
	padding:0;  
	margin: 10px aluto;  
	list-style:none;  
	display:inline;  
	width: 200px;  
	text-align:left;  
}  
.menu1 li a{float:left; padding-left:14px; display:block; color:rgb(0,0,0); text-decoration:none; font:14px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; outline:none;}  
.menu1 li a span{float:left; display:block; padding-right:15px;}  
.menu1 li a:hover{background-position:0px -60px; color:rgb(202,53,28);}  
.menu1 li a:hover span{background-position:100% -60px;}  
.menu1 li a.active, .menu li a.active:hover{font:14px Verdana, Arial, Helvetica, sans-serif;  
	color:rgb(202,53,28);  
}

Hat jemand den Durchblich und kann mir sagen, wo ich überall gepatzt habe?

Hier mal ein Bild davon, wie es unten ungefähr aussieht: Navi unten

[Matthias Apsel]

Om nah hoo pez nyeetz, Nick!

Man soll nicht auf die aktuelle Seite verlinken. Das hast du dir zumindest vorgenommen. Deshalb die Klasse active. Der Link ist dann aber immer noch da.

Besser

<ul id="nav">   <li><a href="..">...</a></li>   <li><a href="..">...</a></li>   <li>Aktuelle Seite</li>   <li><a href="..">...</a></li> </ul>

Dann kannst du über

#nav li das aktuelle Element formatieren und über #nav a, #nav a:hover und #nav a:active die Links. Schau ins Selfhtml-Wiki.

Blockelemente werden mithilfe von margin zentriert. Schau ebenfalls ins Wiki.

Matthias