Hallo,

Ik ben een echte beginner in het basen. Basen met tables ging me vrij gemakkelijk af, maar wou het toch maar eens met divs leren.

Nu heb ik dat aardig onder de knie, maar nog niet helemaal super.

Nu ben ik bezig met een lay-out waar ik een mouse-over wil toevoegen.
Ik heb raad gevraagd via MSN bij iemand, maar die wist het ook niet meer.
We weten dat het moet met: "menu1 a:hover" o.i.d.

Nu heb ik zoiets gedaan, maar ik weet niet waar de fout zit. Ik ben nog een echte beginner, en heb goed gezocht op Google, maar ik vind nog niet echt iets nuttigs.

Dit is de code van mijn CSS:

Code:

div#menu1 {
    background-image: url('images/Home.png');
    background-repeat: no-repeat;
    float: left;
}
div#menu1 a:hover {
    background-image: url('images/Home2.png');
    background-repeat: no-repeat;
    float: left;
}

Hierin is Home.png het normale menu-item, en Home2.png de Mouse-Over, maar dat spreek voor zich.

Kan iemand me helpen?

Groetjes
Kees

Hiervoor kan je beter javascript gebruiken, of het direct met css kan weet ik niet maar dit lijkt mij van niet.

beste Keess, natuurlijk kun je hier beter GEEN javascript voor gebruiken dat spreekt dacht ik voor zich.

Ik heb toevallig een keer een tutorial geschreven over mouseovers met css. Misschien dat je daar iets aan hebt, hij is hier te vinden:

http://blog.m-designz.nl/css/het-pre...images-in-css/

Relax ;-) Je hoeft niet gelijk te schreeuwen....
je hebt gelijk, ik zat te denken dat je misschien preloaden moet gebruiken omdat de afbeeldingen misschien niet gelijk geladen worden, maar ben niet helemaal bekent wat dat betreft ermee, ik doe het soms (vroeger met dreamweaver maar die heeft zo'n omslachtige code).

Ik heb het geprobeerd met de tutorial van M Cuijten, maar hierin krijg ik dus met

Code:

<a href="#" class="menu1"></a>

Maar dan krijg ik nog niks te zien. Als ik in divs dit gebruik:

Code:

<a href="#"><div class="menu1"></div>

krijg ik nog steeds niets te zien..

De CSS in de tutorial is:

Code:

a.menu1 {
    background-image: url('images/Home.png'); 
    background-repeat: no-repeat;
}
 
a.menu1:hover {
    background: url('images/menu/Home2.png');
    background-repeat: no-repeat;
}

Origineel gepost door Keess

Ik heb het geprobeerd met de tutorial van M Cuijten, maar hierin krijg ik dus met

Code:

<a href="#" class="menu1"></a>

Maar dan krijg ik nog niks te zien. Als ik in divs dit gebruik:

Code:

<a href="#"><div class="menu1"></div>

krijg ik nog steeds niets te zien..

De CSS in de tutorial is:

Code:

a.menu1 {
    background-image: url('images/Home.png'); 
    background-repeat: no-repeat;
}
 
a.menu1:hover {
    background: url('images/menu/Home2.png');
    background-repeat: no-repeat;
}

Nope, je hebt het verkeerd gedaan. Zal even voor je kijken,.
Hij heeft dit:

Code:

a.button {
width: 54px;
height: 23px;
background: url('je link') 0 0 no-repeat;
overflow:hidden;
text-indent: -9999px;
}
a.button:hover {
background-position: 0 100%;
}

Wat je (denk ik) verkeerd doet is dat je de a een background meegeeft zonder hem display:block; te zetten.
Probeer de standaard achtergrond eens aan a mee te geven en de hover achtergrond aan a:hover. Let er wel op dat je bij a ook display: block; doet, en de height en width meegeeft.