Hallo ich will per CSS eine horizontale Navigation erstellen und wollte dies mit einer Liste und display:inline lösen. Klappt alles ganz prima, jedoch wollte ich nun dem link, also a, padding:10px zuweisen.
Tja und da hab ich das Problem.
Wenn ich li einen Rand zugewiesen habe, dann sehe ich den gar nicht mehr weil dieser von dem a Element überdeckt wird.
Wie kann ich es lösen, dass li mit a "mitwächst"?
height und width scheinen bei a und li nicht zu funktionieren.

Zeig uns doch bitte den betreffenden Auszug aus dem Quelltext – ohne ist es doch etwas schwierig nachzuvollziehen.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

#navigation {   margin:0;   padding:5px;   background-color:#000000;   border-left:6px #999999 solid;   border-right:3px #999999 solid;   border-bottom:2px #999999 solid;   border-top:2px #999999 solid;   font-family:Tahoma, Verdana, Arial, sans-serif;   font-size:16px;   letter-spacing:0px;   }     #navigation ul {   margin:0;   padding:0;   }     #navigation li {   display:inline;   margin:0;   padding:0;   border-left:15px #ff9900 solid;   background-color:#ffffff;   }     #navigation a {   margin:0;   padding:10px;   background-color:#ffffff;   }

Code :

1 2 3 4 5 6 7 8

<div id="navigation">     <ul>       <li><a href="#">&Uuml;ber Uns</a></li>       <li><a href="#">Kalender</a></li>       <li><a href="#">Forum</a></li>       <li><a href="#">Impressum</a></li>     </ul>   </div>

Bitteschön.

Probier's mal mit entgegengesetzten Werten:

Code :

1 2 3 4 5

#navigation a {   [b]margin:10px;   padding:0;[/b]   background-color:#ffffff;   }

Funktioniert irgendwie nur in der horizontalen Richtung?
Nach oben und unten hin wird kein margin angezeigt.
Ein 2. Problem das bei deine Lösung auftreten würde, wäre dass ich den Hintergrund als Hover-effekt nicht als ganze Zelle ändern kann.
Dann wird ja nur der Hintergrund der Schrift anders.

Okay, nächster Versuch:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

#navigation {   margin:0;   padding:5px;   background-color:#000000;   border-left:6px #999999 solid;   border-right:3px #999999 solid;   border-bottom:2px #999999 solid;   border-top:2px #999999 solid;   font-family:Tahoma, Verdana, Arial, sans-serif;   font-size:16px;   letter-spacing:0px;   }     #navigation ul {   [b]margin:5px 0 5px 0;[/b]   padding:0;   }     #navigation li {   display:inline;   margin:0;   padding:0;   /*background-color:#ffffff;*/ /* auskommentiert = deaktiviert */   /*border-left:15px #ff9900 solid;*/ /* auskommentiert = deaktiviert */   }     #navigation a:link, #navigation a:visited {   [b]padding:5px;[/b]   margin:0;   background-color:#ffffff;   [b]border-left:15px #ff9900 solid;[/b]   }     #navigation a:hover {   background-color:#e5e5e5;   }