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