Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Beeld verschuift bij hover afbeelding

Anoniem
Gooly
3 antwoorden
  • Hallo,

    Ik hoop dat jullie mij kunnen helpen met dit probleem. Het gaat om deze pagina: http://www.szomers.nl/

    Wanneer ik mijn muis over het logo linksboven schuif verschuiven de onderliggende divs een paar pixels.

    Ook als ik de onderliggende divs verwijder en alleen de footer over hou, verschuift ook de footer.

    Het probleem treedt op in diverse browsers.

    Ik heb wel een manier gevonden om het probleem op een niet nette manier op te losssen: de doctype aanpassen van strict naar transitional , maar dit vind ik geen bevredigende oplossing. Zeker aangezien mijn code valideert op strict.

    Andere afbeeldingen gaan goed, alleen bij het logo gaat het mis. Iemand een idee?
  • Een kant en klare oplossing heb ik njiet voor je, maar er vallen me wel een paar dingen op:

    Je regelt drie keer in je stylesheet de default a:hover en a:active.
    Waarom? Ik vermoed dat je iets anders wilt doen?

    Dit zou ook wel eens de oorzaak van je probleem kunnen zijn, want aangezien je het default gedrag van a:hover aanpast, wordt dit dus ook toegepast op de hover van je logo. (want dat is ook een link)

    Probeer je de hover en active van de daarvoor genoemde ID aan te passen, dan moet de selector zijn:
    [code:1:ffc97d16d9]#left a, #left a:hover, #left a:active[/code:1:ffc97d16d9]

    regel 125
    [code:1:ffc97d16d9]#left a, a:hover, a:active {
    color: #0173CB;
    font: normal 100% 'CandelaBook', arial, sans-serif;
    text-decoration: none
    }[/code:1:ffc97d16d9]

    regel 177
    [code:1:ffc97d16d9]#middle a, a:hover, a:active {
    color: #0173CB;
    font: normal 100% 'CandelaBook', arial, sans-serif;
    text-decoration: none
    }[/code:1:ffc97d16d9]

    regel 318
    [code:1:ffc97d16d9]#content a, a:hover, a:active {
    color: #0173CB;
    font: normal 100% 'CandelaBook', arial, sans-serif;
    text-decoration: none
    }[/code:1:ffc97d16d9]


    In regel 48 probeer je border, padding en margin te resetten, maar je selector klopt niet.
    Er zit immers nergens een A in een IMG.
    Andersom zou de selector in eider geval kloppen:
    #header a:hover img

    [code:1:ffc97d16d9]#header img a:hover {
    border: 0;
    padding: 0;
    margin: 0
    }[/code:1:ffc97d16d9]
  • Bedankt Gooly! In plaats van drie keer, heb ik nu de settings voor a:hover en a:active nog maar één keer bovenin de sheet staan. Dit lost inderdaad het probleem op!

    De selector heb ik ook aangepast! Nogmaals bedankt!

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.