Archief - xHTML: Valid xhtml/css probleem

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
d

darthphili

Legacy Member
Ben momenteel aan een site bezig.
Css valideren gaat perfect... echter heb ik een probleem om de xhtml te valideren.

Ik probeer een rollover effect te krijgen die xhtml valid is en met css. Het effect werkt maar nu is m'n pagina niet meer xhtml valid.

Weet iemand mss een goeie manier om xhtml valid rollovers te maken?

Grtz, Phili

http://www.shortwood.be/Test/Shortwood
M

MrO

Legacy Member
je combineert je 'gewone' image en je 'rollover' image tot 1 (gewone image bovenaan, rollover onderaan).

in je css zet je:
a.menu{
background:url(menuImage.jpg) top;
}

a.menu:hover{
background:url(menuImage.jpg) bottom;
}

feitelijk zie je dus dezelfde image in beide gevallen, de ene keer zie je de bovenkant, de andere keer de onderkant.

bijkomend voordeel is dat je image niet moet geladen worden als de gebruiker er met z'n muis over gaat, wat soms een vervelende vertraging (witte vlek) kan opleveren

edit: dit wordt trouwens het 'sliding doors'-effect genoemd
D

Devastate

Legacy Member
hierboven staat idd de perfecte oplossing, waarom javascript als css het ook kan? ;)

probeer overigens ook, je menu zichtbaar te houden als je je css gaat uitschakelen. vrij belangrijk ...
voor de rest ziet het er wel mooi en clean uit.
d

darthphili

Legacy Member
je combineert je 'gewone' image en je 'rollover' image tot 1 (gewone image bovenaan, rollover onderaan).
Klik om te vergroten...

Dat had ik al... :p
Maar ik zie net hier een blog van iemand hoe het wel valid zou worden... morgen eens uitproberen. Kben es benieuwd.

In ieder geval toch al bedankt.
t

thondermonst

Legacy Member
MrO zei:
a.menu{
background:url(menuImage.jpg) top;
}

a.menu:hover{
background:url(menuImage.jpg) bottom;
}
Klik om te vergroten...

Zeer mooie oplossing, die kende ik nog niet. Eigenlijk zo simpel dat ik me bijna voor het hoofd sloeg omdat ik daar zelf niet opgekomen was. Bedankt voor de zeer bruikbare tip.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan