In een eerder blogbericht liet ik zien hoe sites in Dreamweaver gecentreerd kunnen worden. Ik kreeg hier onder meer een volgende reactie op:
"De video klopt, maar met AP-div-tags werkt het niet. En dat is mijn probleem. Mijn websitepagina's zijn opgebouwd uit een aantal div-tags, waarvan er steeds tenminste twee naast elkaar staan. Ik krijg die niet in die 'container'. "
Er zijn inderdaad speciale vereisten als je werkt met absoluut gepositioneerde elementen in een pagina. Dan worden de elementen immers uit de standaard paginaflow gehaald en op basis van hun CSS-coördinaten gepositioneerd. Wat veel designers echter denken, is dat deze positionering altijd wordt berekend ten opzichte van het browservenster. En dat is niet correct. In werkelijkheid wordt hun positie berekend ten opzichte van het eerste bovenliggende element (parent element) dat uit de standaard paginaflow is gehaald. Op die manier wordt het ook mogelijk om elementen absoluut te positioneren binnen andere absoluut of relatief gepositioneerde onderdelen.
Bekijk de video voor een compleet stappenplan (07:29 min.)
Met deze kennis kun je er nu voor kiezen de div #container te relatief te positioneren, waarna je elementen binnen de container alsnog gewoon absoluut kunt positioneren zoals je eerder al deed. Nu wordt hun positie evenwel berekend ten opzichte van de linker bovenhoek van de container en niet de linker bovenhoek van het browservenster. En als daarmee de plaats van de gecentreerde container wordt aangepast, wordt ook de plaats van de AP-elementen binnen die container bijgewerkt.
Meer informatie
Enkele webpagina's over positionering met CSS:
Succes er mee!
Peter Kassenaar
-- 10 april 2008
dw_site_centreren_AP.zip (105,44 kb)