Hvordan lage denne navbaren i html/css?

[Mira]

Har laget en navbar i PS, men sitter å vrir hodet av meg ved å prøve å finne ut hvordan denne kan lages i html/css.

Som dere kanskje forstår så er annehver knapp, ved mouseover og den neste ikke.

 

[Loomy]

Lag ett (1) bilde som består av vanlig og hover-versjonen av bildet. Noe ala dette:

____________

|---VANLIG---|

|--- HOVER---|

Så legger du det som bakgrunn i a-elementet i menyen bygget opp av lister (<li>) Ved :hover kan du endre background-position slik at bare hover-delen av bakgrunnsbildet er synlig.

 

Se hvordan arve har gjort det på www.absentvoid.com. Tror det er neonlunde samme opplegget der.

Endret 1. september 2004 av Loomy

[PoleCat]

Jeg vil anta at du bør legge bakgrunnen slik den er uten hover som bakgrunn på den uordnede listen;

ul#menu {
 height: 15px;
 overflow: hidden;
 background: url("meny-bg.gif") repeat-x;
}

ul#menu li {
 display: inline;
 float: left;
}

ul#menu li a {
 display: block;
 margin: 3px 0;
 padding: 11px 0 0 0;
 height: 0 !important;
 height: 11px;
 width: 60px;
}

ul#menu li a:hover {
 margin: 0;
 padding: 15px 0 0 0;
 height: 0 !important;
 height: 15px;
 background-poisition: -11px;
}

.link1 {
 background-image: url("link1.gif");
}
.link2 {
 background-image: url("link2.gif");
}
.link3 {
 background-image: url("link3.gif");
}
.link4 {
 background-image: url("link4.gif");
}

 

<ul id="menu">
 <li><a class="link1">Link1</a></li>
 <li><a class="link2">Link2</a></li>
 <li><a class="link3">Link3</a></li>
 <li><a class="link4">Link4</a></li>
</ul>

 

Jeg har ikke målt opp osv eller testet denne, bare vist deg prinsippet. Burde være greit å forstå dersom du har vært borti det før, dersom du ikke har det, kan jeg heller forklare nærmere eller lage et eksemplet.

 

(Hvor eeeer det jeg har sett denne menyen før? )

 

EDIT: Loomy; Saken er, at de har forskjellige størrelser hover/ikke hover, derfor blir det litt annerledes.

Endret 1. september 2004 av PoleCat

[PoleCat]

Sådær.

[Mira]

Sådær.

I must say

PC