De bedoeling van shorthand is dat we evenveel CSS gaan schrijven met minder tekst. Het voordeel hiervan is dat de stylesheets kleiner gaan zijn, dit is op zijn beurt weer goed voor de downloadtijd van je website. En een snelle website daar houden bezoekers van.
Bij het maken van een website zal je vroeg of laat gebruik willen gaan maken van een menu met wat rollover effecten om het allemaal wat mooier te maken. Veel webdevelopers denken nog altijd dat je voor zoiets te maken gebruik moet maken van javascript maar niets is minder waar. Vandaag de dag kan je zo’n menu volledig opbouwen met CSS en XHTML. Je kan ook afbeeldingen gaan gebruiken maar dat is vaak niet eens nodig.
Het voordeel van zulke menu’s is accessibility (toegankelijkheid van de site), beter voor zoekmachines en het laad sneller. Zoals je ziet zijn er niets anders als voordelen aan CSS menu’s. Als laatste voordeel zou ik ook nog willen vernoemen: als je een link wil toevoegen aan je menu dan is dit in 5 seconden klaar terwijl als je met afbeelding als knoppen zou werken dit al snel 10 tot 15 minuten werk zou vragen.
Hieronder kan je een voorbeeld zien van het menu dat je gaat maken. Als je op de afbeelding klikt kan je een werkend voorbeeld bekijken.
Als je een CSS website maakt dan vergeten veel webdevelopers eerst alle margins, paddings enzoverder te resetten. De CSS bepaalde volledig de layout van je website en als deze vanaf het begin al niet gelijk is in de verschillende browsers dan ben je gedoemd om in de problemen te komen.
Aangezien elke browser default verschillende margins, paddings en andere attributen meegeeft aan de verschillende elementen is het resetten hiervan noodzakelijk. Het bouwen van een website zonder een CSS reset kan je dus vergelijken met het bouwen van een huis op een scheve fundering.
Iedereen kent het waarschijnlijk wel, je wil iets gaan afprinten van het internet maar als je dan het afdrukvoorbeeld bekijkt is het één grote rommelhoop. Voor deze tutorial baseer ik me op de layout die ik maakte in de 3 kolommen layout tutorial.
Als we die layout eens in afdrukvoorbeeld bekijken krijgen we dit.
Zoals we op bovenstaande afbeelding zien is dat geen mooie pagina om af te drukken. Neem bijvoorbeeld het linker- en rechtermenu. Deze zouden bij het printen eigenlijk helemaal niet te zien moeten zijn omdat de gebruiker meestal enkel de hoofdtekst wil afdrukken die je in het midden van de pagina ziet.
In deze tutorial leg ik je uit hoe je aan de hand van CSS een website layout kan maken met 3 kolommen en zeker niet te vergeten, een layout die er hetzelfde uitziet in internet explorer als in mozilla firefox.
We zullen een layout maken die er als volgt uit gaat zien.
