nicht angemeldet
Hallo,
ihr werdet bestimmt lachen, aber ich habe eine (meine erste) Navigation in CSS versucht.
Fast gefällt es mir, aber ich möchte, das der Listenpunkt Hilfe ganz rechts außen steht und das der Listenpunkt Startseite ganz farbig ginterlegt ist.
Ich kann das leider nirgends als Beispiel verlinken, aber vielleicht kopiert sich jemand mal den Code heraus und hat eine Idee.
Vielen Dank
Andy
<style type="text/css">
<!--
A:link {
TEXT-DECORATION: none
}
#navcontainer ul
{
font-size: 80%;
padding-left: 0;
margin-left: 0;
background-color: #036;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer li
{
padding: 0.2em 1em;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#topnaviactive a:link, #topnaviactive a:visited, #topnaviactive a:hover
{
background-color: #FF6600;
color: #333;
}
#topnavirechts ul li #topnavirechtsa:link, #topnavirechtsa:visited, #topnavirechtsa:hover
{
float: right;
border-left: 1px solid #fff;
text-decoration: none;
clear: right;
padding-top: 0.2em;
padding-right: 1em;
padding-bottom: 0.2em;
padding-left: 1em;
}
A.hellabstand:link {
COLOR: #fff;
}
A.hellabstand:visited {
COLOR: #FBFBFB;
}
A.hellabstand:active {
COLOR: #FBFBFB;
TEXT-DECORATION: none;
border-bottom-width: 1px;
border-bottom-color: #CBE9C9;
padding-bottom: 1px;
}
A.hellabstand:hover {
COLOR: #CBE9C9;
TEXT-DECORATION: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CBE9C9;
padding-bottom: 1px;
}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="topnaviactive"><a class="hellabstand" href="#">Startseite</a></li>
<li><a class="hellabstand" href="#">Feld1</a></li>
<li><a class="hellabstand" href="#">Feld2</a></li>
<li><a class="hellabstand" href="#">Feld3</a></li>
<li><a class="hellabstand" href="#">Feld4</a></li>
<li id="topnavirechts"><a class="hellabstand" href="#">Hilfe</a></li>
</ul>
</div>