Hallo,
wahrscheinlich schon ein viel besprochenes Thema, ich habe allerdings nichts gefunden, bzw. wußte nicht wonach ich genau suchen könnte und unter den Ergebnissen war nichts passendes...
Zum Thema. Ich will eine einfache Horizontale Navigation haben. Einen Balken indem die einzelnen Navigationspunkte nebeneinander stehen mit einer Hintergrundfarbe.
Auf die Art, die ich versuche geht das aber irgendwie nicht, da die navigationspunkte über den Balken stehen (denke das liegt am padding im a).
Hier der Code (vielleicht versteht Ihr dann besser...)
HTML-Code:
<!-- ################################################################### -->
<!-- ### NAVIGATION ### -->
<!-- ################################################################### -->
<div id="navigation">
<ul>
<li class="aktiv">
<a href="#">Punkt</a></li>
<li>
<a href="#">Punkt</a></li>
<li>
<a href="#">Punkt</a>
</li>
<li>
<a href="#">Punkt</a>
</li>
<li>
<a href="#">Quick»Punkt</a>
</li>
<li>
<a href="#">Quick»Punkt</a>
</li>
<li>
<a href="#">Punkt</a>
</li>
</ul>
</div>
Hier das passende CSS
Code:
html, body, div, p, h1, h2, h3, ul, ol,
span, a, table, td, form, img, ul, li, input, textarea, select
{
font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
color: #3b4247;
font-size: 11px;
line-height: 1.5em;
}
html, body, div, p, h1, h2, h3, ul, ol,
span, a, table, td, form, img, li
{
margin: 0;
padding: 0;
}
/* ############################################################### */
/* ### NAVIGATION ### */
/* ############################################################### */
#navigation
{
background-color: #3b4247;
background-image: url(navigation_bg.gif);
background-repeat: repeat-x;
background-position: bottom left;
}
#navigation ul
{
margin-left: 15px;
}
#navigation ul li
{
display: inline;
list-style-type: none;
list-style-position: inside;
color: #ffffff;
padding: 0px;
}
#navigation ul li a
{
color: #ffffff;
font-size: 12px;
font-weight: normal;
padding: 8px;
line-height: 12px;
margin-right: 1px;
text-transform: uppercase;
display: block;
position: relative;
}
#navigation ul li a:hover
{
background-color: #2e3336;
}
#navigation ul li.aktiv a, #navigation ul li.aktiv a:hover
{
background-color: #64696d;
}
Ich hoffe Ihr könnte mir helfen