Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Margin of Position?

Anoniem
Gooly
2 antwoorden
  • Ik heb onderstaande CSS code gemaakt om een menuknopje met een rollover effect te bewerkstelligen. De bedoeling is dat je een 60x60px plaatje ziet, dat bij een rollover veranderd in een grotere versie van 90x90px. Om de grotere afbeelding aan alle kanten evenredig over de kleine versie heen te laten verschijnen moet ik dus iets met de positionering doen. (anders wordt de linkerbovenhoek van beide versies op dezelfde plek gehouden, waardoor de grotere versie naar rechtsonder lijkt te springen.
    Onderstaande code werkt prima, daar niet van, maar mijn vraag is nu: Ik heb die positionering nu met een negatieve marge opgelost. Ik vraag me echter af of dit de juiste methode is. Ik kan het namelijk ook met position doen. Ik heb verder geen bijzondere reden om speciaal voor marge te kiezen. Position reageert bij mij nog wel eens onvoorspelbaar omdat ik steeds de verschillende waardes static, relative, fixed en absolute door elkaar wil gooien ;-)

    [code:1:2c40690d91]
    a#item1 {
    width: 60px;
    height: 60px;
    background-image: url(item1.png);
    display: block;
    text-decoration: none;
    }

    a#item1:hover {
    margin-top: -15px;
    margin-left: -15px;
    background-image: url(roll_item1.png);
    width: 90px;
    height: 90px;
    }
    [/code:1:2c40690d91]
  • Persoonlijk zou ik het inderdaad met margin oplossen, ook om de door jou opgegeven reden. Ik denk echter dat er niet echt een "goede" oplossing is, deze hangt sterk af van de situatie.

    Is er overigens een speciale reden dat je geen sprites* gebruikt? Het is een andere benadering van je probleem, maar heeft de nodige voordelen waaronder het "bufferen" van je roll-over-effect, lagere laadtijden omdat je slechts één bestand binnenhaalt en in het geval van simpele kleine afbeeldingen doorgaans ook nog eens kleiner.

    * Het artikel is al uit 2004 en daarmee redelijk oud voor internet-techniek-begrippen. Na het nog eens vlug doorgelezen te hebben denk ik dat de methode desalniettemin nog steeds goed is en voordelen heeft, sterker nog: ik denk dat problemen met oudere browsers zoals die in het artikel genoemd vandaag de dag minder relevant zijn dan bij het verschijnen, er is veel veranderd in het voordeel van de webdesigner.

    - Bas

Beantwoord deze vraag

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

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