CSS meny..

[nAD]

Hallo!

 

Jeg har da laget mine egne knapper, og en hover knapp som jeg vil skal komme frem med mouseover..

 

Jeg har f.eks

'knapp_start.gif' og mouseover 'knapp_start_hover.gif'

Hvordan går jeg frem?

 

Hvordan gjør jeg dette i CSS?

Endret 16. mai 2004 av nAD

[anderlin]

En mulig fremgangsmåte:

 

Lim bildene sammen, slik:

 

Så skriver du dette i html-koden:

 

<div class="knapper">
        [...flere knapper...]
       <div class="gjestebokLink"><a href="index.php?side=gjestebok">
       <span class="usynlig">Gjestebok</span></a></div>
</div>

 

Og dette i css-filen:

 

.knapper a:hover {    background-position: top;  
}
.gjestebokLink a {	background-image: url(grafikk/gjestebokKnapp.jpg);
                               background-position: bottom;
}
.usynlig  {                 visibility: hidden;	
}

 

På denne måten slipper du problemene med at man må vente på hover-effekten mens bildene lastes.

 

EDIT: Tok vekk kode som ikke hadde noe med saken å gjøre...

Endret 16. mai 2004 av anderlin

[nAD]

For og si det sånn, den ble jeg ikke klok på!

[anderlin]

Hm.. Litt dårlig forklart fra meg. Du kan jo lese Arve87 sin tutorial, og se om den gjør det klarere.

[nAD]

men er det akkurat SÅNN du skal lage css meny med photos?

[Haraldson]

Jepp. Mye bedre enn javascript.

 

Edit: Du kan eventuelt bruke to bilder, men da vil nedlastingsstørrelse øke, du vil se at det tar litt tid til rollover kommer, og det vil bli mer arbeid å forandre hvert eneste bilde...

Endret 16. mai 2004 av Mr.Berg

[nAD]

Finn 4 feil?

 

Html kode

<div id="meny">
<div class="knapper">
<div class="startLink"><a href="index.php?side=index2">
   <span class="usynlig">Start</span></a></div>
<div class="crewLink"><a href="index.php?side=crew">
   <span class="usynlig">Crew</span></a></div>
<div class="filmLink"><a href="index.php?side=films">
   <span class="usynlig">Film</span></a></div>
   <div class="gjestebokLink"><a href="index.php?side=gjestebok">
   <span class="usynlig">Gjestebok</span></a></div>
</div></div>

Rotete kode, føler på meg at det er feil inni der, men er trøtt nå.. a wake @ 27 hour now.

 

CSS kode

#meny 
{
width: 740px;
height: 70px;
text-align: center;
}
.knapper a:hover {    
background-position: top;  
}
.gjestebokLink a { 
background-image: url(bilder/guestbook.gif);
background-position: bottom;
}
.startLink a {
background-image: url(bilder/start.gif);
background-position: bottom;
}
.crewLink a {
background-image: url(bilder/crew.gif);
background-position: bottom;
}
.filmLink a {
background-image: url(bilder/film.gif);
background-position: bottom;
}
.usynlig  {                 
visibility: hidden; 
}

Endret 16. mai 2004 av nAD

[Haraldson]

Ta en kikk på koden i denne, samt dette stilarket. Mulig du skjønner mer da..

[nAD]

se 2 poster opp ^^ !

[Haraldson]

Bumpetibump...

 

Uansett, ta en kikk på den CSS-en i "avsnittet" meny, så ser du litt av det andre som ofte trengs...

[nAD]

Greitt, så kom jeg frem til det også!

Nå står knappene oppå hverandre.. Hvordan får jeg dem til og stå rett ved siden av hverandre?

Endret 16. mai 2004 av nAD

[Haraldson]

display: inline; på meny-diven, display: block; på alle menyelementene.

[nAD]

Og der forsvant menyen...

[Arve Systad]

Greitt, så kom jeg frem til det også!

Nå står knappene oppå hverandre.. Hvordan får jeg dem til og stå rett ved siden av hverandre?

sett float: left; på li elementet.

[nAD]

Hvilket li elemenNt?

[Arve Systad]

Hvilket li elemenNt?

http://www.absentvoid.com/index.php?sectio...ials/typography <= sjå på lista med ting der...

[magh]

nAD, last ned kildekoden og CSS-filen til denne:

http://www.csszengarden.com/?cssfile=/089/089.css&page=0

 

Her er det brukt samme metode som ble foreslått lengre opp i denne tråden. Kanskje det virker klarere for deg hvis du kikker på denne linken

[nAD]

nah, fekk da til te slutt! takker folkens!