Menu Probleme mit CSS

[fraglos]

Hallo Leute,
ich mache schienbar oft den gleichen Fehler, eine Menüliste zeigt immer einen rechten Rand, den ich abgeschaltet glaube. Ich plane eine horizontales Menü mit 4 Items, je 150px breit. Bei der gesamtbreite von 600px rutscht ein Kästchen immer raus, da das erste Kästchen erst bei ca 50px anfängt.

 body{
   margin:0;
   padding:0;
   font-family:verdana, arial, sans-serif;
   background-color:#ccc;
  }
  #seite{
   width:600px;
   height:100%;
   position:relative;
   left:50%;
   margin-left:-300px;
   background-color:#ffe;
   border:1px solid #666;
  }
#menu{
   width:100%;
     margin:0;
   padding:0;
   
  }
  #menu li{
   list-style-type:none;
   display:inline;
   float:left;
     margin:0;
   padding:0;
  }
  #menu li a{
   width:150px;
   height:63px;
   display:block;
     margin:0;
   padding:0;
   border:1px solid #666;
   border-top:1px solid #fff;
   border-left:1px solid #fff;
   background-color:#ab9364;
   color:#000;
   text-decoration:none;
   text-align:center;
  }
  #menu li a:hover{
   background-color:#8d8d8d;
   color:#fff;
  }

Ich habe da schon soviel null-padding und null-margins reingeschrieben.
ts.

 

[Tronjer]

Das liegt an deinem Border. Der verbreitert die Elemente.

 

[fraglos]

Hallo Tronjer,
hier ein screen-shot. (die Border-anweisung ist es nicht.)

Alles funktioniert bisher, nur das Menü unter der Kopfzeile nicht

 

[Tronjer]

Wenn du

#menu list a {
    width: 150px;
    border: 1px solid #666
}

schreibst, dann ist jedes Element 152px breit. Macht 608px für die vier Elemente.

Bei der Gelegenheit wirf mal das display:inline raus, float:left sollte reichen. Und um das Div #seite horizontal zu positionieren, schreibt man nicht left: 50% margin-left: -300px, sondern schlicht margin: 0 auto.