H1 met background over 2 regels en margin

Momenteel ben ik bezig met het ontwikkelen van een nieuwe website. Deze website word grafisch gelikter dan de huidige website en zal ook lekker dynamisch zijn. Tijdens de bouw van de look ik geheid tegen een aantal dingen aan en de oplossingen daarvoor zal ik in mijn blog gaan posten zodra ik een probleem met iets heb, zoals ik nu heb met een H1(over 2 regels of meer) + achtergrond + margin aan de onderkant en padding rondom.

Het probleem

Je kent het wel, je hebt een mooi ontwerp gemaakt voor een website maar bij de bouw ervan loop je tegen van alles aan. Zo liep ik een aantal dagen geleden aan tegen het feit dat je een H1 die over meerdere regels loopt geen mooie padding + achtergrond kan geven. Dan zal er een lelijk vierkant blok ontstaan.

Het idee was om rondom de tekst van de H1 een achtergrond te zetten met links en rechts 10px padding met een witruimte tussen eventueel meerdere regels. Zoals gezegd kan je hier niet af met alleen een H1.

De oplossing

Ik wist al snel dat ik jQuery moest gebruiken om het dynamisch te houden aangezien het in een CMS gebouwd gaat worden. Nu was de oplossing vrij simpel bedacht, alleen de uitvoering was wat lastiger; alle woorden in de H1 wrappen met een span en hieraan de achtergrondkleur + de padding + de witruimte aan de onderkant mee te geven.

Uiteindelijk kwam ik met de volgende oplossing:

http://jsfiddle.net/AAyNq/

Vorige Portfolio item

Meer nieuws items

Vorige Portfolio item

Nieuws