hoverimg vises for langt til siden...

hoverimg vises for langt til siden...

Innleggav iguan » søn 15.05.2011 22:55

Jeg har lagt inn følgende for å få farge på menyen ved "hover".

Men "hoverbildet" kommer alltid til siden for orginalbildet?!
Har prøvd å legge inn "position:absolute;" og endret plasserng sidelengs...

Noen gode tips?
Her er koden:
Kode: Merk alt
.home {
background-image:url(../bg/navelement/home.png);
}
.home:hover {
background-image:url(../bg/navelement/homehover.png);
margin:0 px;


}

.work {
background-image:url(../bg/navelement/work.png);
}
.work:hover {
background-image:url(../bg/navelement/workhover.png);
}
medlem i 115 måneder
 

Re: hoverimg vises for langt til siden...

Innleggav iguan » tor 19.05.2011 23:57

Har funnet ut at jeg har gjort det korrekt, og at det nå fungerer med denne løsningen:

Kode: Merk alt
#home {
background-image:url(../bg/navelement/home.png);
}

#home:hover {
background-image:url(../bg/navelement/homehover.png);
}

#work {
background-image:url(../bg/navelement/work.png);
}

#work:hover {
background-image:url(../bg/navelement/workhover.png);
}


Var nok Safari som trengte en pause ... da virket det som meningen var:)
medlem i 115 måneder
 

Re: hoverimg vises for langt til siden...

Innleggav Forth » fre 20.05.2011 9:49

Jeg ville anbefale deg å lage en grafikksprite på slike ting, så sparer du deg for mange requests for grafikkfiler til serveren og siden din vil lastes raskere.

Lag fekst alle menybildene dine på en stor flate med et grid på 50x50px, så kan man lage hvert menyvalg hver hundrede piksel horisontalt og hoverstates på samme posisjon horisontalt men 100px offset vertikalt.

På den måten behøver du bare å referere til en grafikkfil, og du styrer hvilket utsnitt av spriten som vises i menycontainerene med hjelp av background-position :)
Da har du full kontroll på bakgrunnbildet og behøver ikke lage "fikser" slik som den du viste til. Husk at barna arver alltid fra morelementet i css, og du kan overstyre med å gjenta kode lenger ned i css filen eller presisere hvilket element du spesefikt ønsker å style med å definere arvebanen.

Et lite tips i tillegg, jeg ser du er brukt id'er for menycontainerene dine, det er også god politikk i dette tilfelle å samle alt menyknappene har til felles i en klasse du putter på alle sammen, og setter det unike for hvert menypunkt i id'en.

Disse tingene sammen gjør koden langt ryddigere og gjør at du feks kan bytte ut koden din med:
Kode: Merk alt
.menyContainer {
background-image:url(../bg/navelement/menysprite.png);
}

#home {
background-position: 0 0;
}

#home:hover {
background-position: 0 -100px;
}

#work {
background-position: -100px 0;
}

#work:hover {
background-position: -100px -100px;
}


og da kan du skrive containerene dine slik:
Kode: Merk alt
<div class="menyContainer" id="home">Home</div>


Da er det lettere å endre på selve containeren i etterkant, si du vil at menyvalgene dine skal ha mer eller mindre padding, border, høyde/bredde eller lignende uten å måtte endre på alle id'ene for hvert menyvalg :)

Var ikke meningen å belære eller noe altså, jeg sitter bare å kjeder meg litt mens jeg venter på en korrektur fra kunde :)

Brukerens avatar
medlem i 169 måneder
 


Returner til CSS



Hvem er i Forumene

Registrerte brukere: Google [Bot]