17 Augustus 2009

Probleemstelling

Je wilt de hoogte en/of breedte van een tekst of link vergroten of verkleinen met CSS. En dat wil toch maar niet lukken.

Oorzaak: inline

Tekst en links zijn inline-tags in html. Vrijwel alles in html is in te delen in 2 groepen:

• Inline
• Block

Inline elementen hebben geen eigen layout. Je kunt wel een kleur veranderen, zelfs een achtergrond kleur, maar je kunt niet de ruimte veranderen die ze in beslag nemen.

Bij een block kan dat wel.

De oplossing

Het is eigenlijk heel simpel, maar je moet er maar op komen:

a.mijnlink{

display:block;

}

Deze manier is vooral handig als je een vaste breedte en/of hoogte nodig hebt.

Afhankelijk van de breedte en positionering van het bovenliggende element (de parent) kan de tekst gelijk de volledige breedte van de parent oppakken. Gebeurt dat niet, kijk dan eerst of de parent elementen wel goed ingesteld zijn.

Alternatief: padding

Er is nog een andere mogelijkheid.

Een inline element kan namelijk wel een margin, padding of border krijgen. Deze oplossing is handig als de afmetingen ruimer moeten zijn dan de tekst, maar wel in verhouding moeten blijven.

Door de padding bij een link in te stellen vergroot je tevens het klikbare deel van de link. Want een padding is onderdeel van het element zelf.

Waarom handig?

Vooral voor een link kan dit handig zijn. Want hierdoor kun je zorgen dat het klikbare deel van de link groter is. Binnen een menu is dat vaak heel wenselijk.

Op deze site

• het menu bovenin de balk maakt gebruik van padding om het klikbare deel te vergroten
• het menu in de linkerbalk heeft een display:block op de link staan om een vaste breedte te krijgen