Nederdev : web and Drupal stuff

Niemand wil een kale website, iedereen wil dat de boel aangekleed is en gebruikt daarvoor afbeeldingen. Het gebruik hiervan kan je in twee categoriën onderverdelen: afbeeldingen als content en afbeeldingen voor het design. Het is belangrijk dat je onderscheid maakt tussen deze twee groepen.

De theorie

Als je afbeeldingen voor de content wil gebruiken, bijvoorbeeld foto's van huizen op de site van een makelaar, dan kan je heel eenvoudig gebruik maken van de image tag, zoals in het volgende voorbeeld wordt laten zien.

Of met een extra slash als je XHTML gebruikt:

Moeilijker is het als je afbeeldingen voor het design wil gebruiken. Je hebt misschien al gelezen dat design (CSS), structuur (HTML) en gedrag (Javascript) van elkaar gescheiden moeten worden, maar dat is lang niet altijd even makkelijk of logisch. Ik hanteer altijd de volgende vuistregel: "Is een afbeelding bedoeld om een pagina op te fleuren, gebruik dan CSS". Nu we de theorie gehad hebben, gaan we eens kijken naar hoe we dit voor elkaar krijgen.

In feite is er maar één goed werkende manier om afbeeldingen met CSS te gebruiken en dat is achtergrondafbeeldingen. Het is ook mogelijk middels de :before en :after pseudo-elementen en de content-eigenschap afbeeldingen aan bestaande content toe te voegen, maar dat wordt helaas niet door Internet Explorer ondersteund.

Als je je HTML op orde hebt, dan kan je beginnen het design toe te passen op de structuur. Het eerste wat je doet is kijken of je genoeg hebt aan de bestaande elementen. Soms moet je even puzzelen, maar vaak kan je met de elementen die je gebruikt hebt vele bereiken. Mocht je tóch nog ergens een achtergrondafbeelding kwijt willen, dan kan je daarvoor een extra <div> of een <span> aanmaken. Deze twee elementen hebben geen zogenaamde semantische waarde. Ze bestaan puur om dingen te groeperen of om een extra element toe te kunnen voegen, zodat je kan stylen.

Een eenvoudige header

We beginnen met het meest eenvoudige voorbeeld. Als situatie nemen we een pagina waarop je een headerafbeelding kwijt wil, maar waar je geen element voor hebt. We maken dus een extra <div> aan, aangezien de header gewoon block-level is. Als HTML krijgen we dan de volgende code:

De bijbehorende CSS code wordt dan:

Als eerste is de <div> een achtergrond gegeven, want dat is natuurlijk de bedoeling. Vervolgens geven we aan wat de afmetingen van de <div> moeten worden. Aangezien er geen content tussen de tags aanwezig is, zal je zonder deze gespecificeerde afmetingen geen <div> zien, want die is dan 0px breed en 0px hoog.

Hyperlinks

Voor het tweede voorbeeld gaan we kijken hoe we links maken die er een beetje mooi uitzien. Je hebt in Photoshop al een gave knop gemaakt en nu wil je dat je link er net zo uit ziet. De makkelijkste methode zou dan de volgende zijn:

Dit is toch goed zo, toch? Je hebt een link, een afbeelding en zelfs een alt-tag om zoekmachines en blinden te vertellen wat voor link het is. Het probleem is hier dat de afbeelding geen content is. Daarom moet je CSS gebruiken.


We zijn er me deze code nog niet. De tekst uit de link is namelijk nog zichtbaar en als je afbeelding groter is dan de link, dan zie je deze niet helemaal. De volgende stap is het volledig zichtbaar maken van de afbeelding:

Een hyperlink is standaard een inline element. We maken hem block-level met CSS, zodat we de afmetingen kunnen bepalen. Nu we de hele afbeelding zien, gaan we ons bezig houden met de tekst, die over de afbeelding nog steeds zichtbaar is. Hiervoor laten we de tekst negatief inspringen:

We hebben nu een simpele link die er mooi uit ziet, waarvan de code semantisch is en die zoekmachines en blinden eenvoudig kunnen lezen, doordat de tekst er gewoon staat.

The end

Tot zover dit artikel. Ik hoop dat ik je wat nieuwe technieken heb bij kunnen leren over het gebruik van afbeeldingen. Ik raad je aan hier veel mee te spelen, dan krijg je het vanzelf onder de knie. Succes!