Andy89: Ausrichtung in Navigation

SELF-Forum

Ausrichtung in Navigation

Andy89
– Informationen zu den Bewertungsregeln

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>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Ausrichtung in Navigation

    EKKi
    – Informationen zu den Bewertungsregeln

    Mahlzeit Andy89,

    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.

    Beides ist zusammen mit der Inline-Darstellung der einzelnen Listenpunkte nicht ganz einfach - wieso belässt Du es nicht einfach bei "block"?

    #navcontainer ul li { display: inline; }

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Ausrichtung in Navigation

      Andy89
      – Informationen zu den Bewertungsregeln

      Mahlzeit Andy89,

      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.

      Beides ist zusammen mit der Inline-Darstellung der einzelnen Listenpunkte nicht ganz einfach - wieso belässt Du es nicht einfach bei "block"?

      #navcontainer ul li { display: inline; }

      MfG,
      EKKi

      Hallo EKKi,

      ich dachte es lockert das ganze etwas auf, wenn Di Hilfe ganz rechts außen steht.
      Das farbige bei "Startseite" war nur so ein Versuch, nicht unbedingt wichtig.

      Danke Andy

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln