Menu Close Menu

Layout met css

De, voor mij althans, meest ideale css layout als basis voor een webpagina kun je op deze pagina downloaden. Wat deze css layout doet is centreren in het midden van de browser. De layout houd altijd een marge onder de tekst. De footer plakt tegen de onderkant van de pagina. En je kan de pagina met content vullen zoveel je wilt. En dan komt er bij dat deze css layout in al m'n browsers hetzelfde wordt weergegeven. Wat willen we nog meer... Check zelf maar door de browser groter en kleiner te schalen.

download css layout


Css layout 1250px max

Edit: Deze is verbeterd (11-2-2012)
Voor de liefhebbers heb ik hier nog een layout die schaalbaar is van 980 pixel breedte tot een maximale layout breedte van 1250 pixels. Da's ook best een aardig gezicht op een beeldscherm van 1920 of 1680 breed. In ieder geval beter dan de volle 100% breedte wat vaak met layouts gedaan wordt. Je zou er dit css menu in kunnen zetten.

download css layout


Html/php / Css layout 1250px max. breedte

Onderstaande css layout is er eentje zoals de vorige maar dan met php bestanden. Een ideale basis template/layout om mee te beginnen. Om deze layout te bekijken moet je dus een apache server met php draaien op je pc. Je zou hem natuurlijk ook kunnen uploaden naar je host en de layout op de server editen.

download php css layout

Css layout 980px met dropdown-flyoutmenu en SEO vriendelijke code

De volgende css layout is er eentje zonder fixed/vaste footer. 980px vaste breedte en bezit een dropdown-flyoutmenu. In de css heb ik in plaats van float:left te gebruiken (wat gebruikelijke is) float:right gebruikt voor het menu en de tekst blokken. Misschien zijn er betere manieren maar dit was mijn manier om het menu in de code onder de tekst te krijgen. Het grote voordeel hiervan is dat Google naar mijn mening de h1 en de paragrafen met tekst veel liever zo hoog mogelijk in de code ziet. Het makkelijkste zou trouwens zijn, het menu gewoon aan de rechterkant maken iplv. links. Anders gezegd; Sites met het menu rechts zitten meestal SEO-technisch gezien beter in elkaar.

Stel dat iedere pagina begint met een menu van een paar honderd regels wat dus ook nog op elke pagina hetzelfde is. Dan kun je je misschien voorstellen dat het op deze manier beter zal scoren. Kortom het gewicht van je pagina specifieke zoekwoorden ligt op deze manier hoger en Google waardeert dit.

Nu kun je zeggen dat Google heel goed kan onderscheiden wat een menu is en wat unieke content is. Maar daar ben ik nog niet zo zeker van. Vandaar deze template.

download php css layout


Toch maar een website laten maken voor weinig geld? Bekijk dan eens deze link Webdesign Geldrop