4. Navigation

Navigation

  • ?

    Ich habe eine vertikale navi, die aus 4 grafiken besteht undnochmal 4 hover. Alles sind verschiedene Bilder.
    Die navi möchte ich mit einer liste realiseren und die css daten extern auslagern.
    Wie mache ich das aber? Die google ergebnisse haben immer die gleinen HINTERGRUNDbilder auf dennen dan geschrieben wird. Ich habe wie gesagt grafiken und nochmal grafiken als hover.

    0
  • R

    Verstehe ich die Frage richtig? Du hast vier Graphiken für die du per CSS jeweils einen Hover-Effekt machen möchtest?

    Dann bist du bei Hintergrundgraphiken gar nicht so verkehrt. Du nimmst einfach ein <div>-Tag, klatscht per CSS Länge und Breite der Graphik ran und nimmst diese zuletzt als Hintergrundbild. Dann definierst du für den <div>-Tag noch eine Hover-Eigenschaft mit entsprechend geändertem Hintergrundbild.

    #obj   {
   width: 200px; /* z.B. */
   height: 30px; /* z.B. */
   background-image: url('graphic.jpg');
}
#obj:hover   {
   background-image: url('graphicHover.jpg');
}

    Falls ich dich falsch verstanden haben sollte, formuliere bitte deine Frage ein klein wenig präziser 😉

    0
  • ?

    Also:
    Ich habe ein div. Darin möchte ich per css ( <li> eine navi realiserien).
    So:
    HTML:

    <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Hab kein Text, nur ein anderes Bild</a></li>
<li><a href="#">Hab kein Text, nur ein anderes Bild</a></li>
<li><a href="#">Hab kein Text, nur ein anderes Bild</a></li>
<li><a href="#">Hab kein Text, nur ein anderes Bild</a></li>
</ul>
</div>

    CSS:

    #navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

#navcontainer li { margin: 0 0 3px 0; }

#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 160px;
background-color: #999;
background-image: url(images/l1_down.gif);
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
border: 1px solid #333;
background-color: #F60;
background-image: url(images/l1_over.gif);
color: #333;
}

#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(images/l1_over.gif);
color: #333;
}

    Nur wird bei jedem <li> das gleiche hintergrundbild angezeigt.
    Ich habe aber ja 4 verschiedene Grafiken. (halt jeder navipunkt eine grafik)

    0
  • R

    Dann musst du wohl 4 verschiedene IDs vergeben ...

    0
Anmelden zum Antworten