horizontales menü

[akali]

hi,

ich stehe vor einem Problem,

ich möchte ien horizontales Menü erstellen.

-es soll in einem div-container liegen. der die maße 700x30 hat
-jeder menüpunkt hat die maße 100x30 (dementsprechend 7 menüpunkte nebeneinander)
-es gibt eine "hintergrundgrafik die bei jedem punkt gleich ist
-wenn ein menüpunkt aktiv ist soll er von einer anderen grafik unterlegt sein
-auf der Grafik steht ein Text : home, company etc.

wie ist dieses am besten möglich?

grafiknamen nav_bg.png und bei aktivem punkt nav_bg_active.png

bitte helft mir, ich bin am verzweifeln...

liebe grüße

eure akali

[Azra]

Könnte so aussehen:

HTML

Code: Alles auswählen

   <ul id="navigation" class="clearfix">
      <li><a href="#" title="Linktitel">Navipunkt 1</a></li>
      <li><a href="#" title="Linktitel">Navipunkt 2</a></li>
      <li><a href="#" title="Linktitel">Navipunkt 3</a></li>
      <li><a href="#" title="Linktitel">Navipunkt 4</a></li>
      <li><a href="#" title="Linktitel">Navipunkt 5</a></li>
      <li><a href="#" title="Linktitel">Navipunkt 6</a></li>
      <li><a href="#" title="Linktitel">Navipunkt 7</a></li>
   </ul>


CSS

Code: Alles auswählen

*{margin:0;padding:0;}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}.clearfix{display:inline-block;}html[xmlns] .clearfix{display:block;}* html .clearfix{height:1%;overflow:visible;}
ul{list-style-type:none;}a{outline:none;text-decoration:none;}

#navigation{width:700px;height:30px;} /* ID Navigation = <ul> */
#navigation li{text-align:center;float:left;display:block;width:100px;height:26px;padding:4px 0 0;background:gray;} /* das spricht ein einzelnes Listenelemt an <li> */
#navigation li a{display:block;width:100px;height:30px;} /* das spricht einen einzelnen Link an <a> */
#navigation li:hover{background:red;} /* das ändert das Hintergrundbild bei :hover */


Die Bilder legst du nun bei den beiden Attributen background fest. Da ich die Ordnerstruktur nicht kenne habe ich dort Farben hinterlegt (gray, red).
Das Attribut sähe dann eventuell so aus (wenn das Bild im selben Ordner liegt):

Code: Alles auswählen

background:url(nav_bg.png) no-repeat;