10april

AP-elementen centreren in Dreamweaver [video]

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.)

Klik om de video te starten

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)

Reacties

21-07-2008 07:29 #

Hai
Heldere video alleen reageert de pagina niet op mijn 'body' wijziging. Ik werk in CS3 (legaal). Het werkt wel op andere Mac (CS3 illegaal). Heb net je boek gekocht.
Ben beginner. Mis ik iets?

Peter Minnee Netherlands

28-07-2008 11:24 #

@Peter,

Ik heb gemerkt dat in de Ontwerp-weergave de code van de elementen soms anders worden geplaatst dan je verwacht.

Let er op dat de code voor de elementen die je wilt centreren ook daadwerkelijk binnen de #container vallen. Anders gelden de centreer-regels hier natuurlijk niet voor.

En dan ziet de pagina er niet uit zoals je verwacht/bedoeld. Ik vermoed niet dat dit iets te maken heeft met de legale/illegale versie, maar wel met de plaatsing van elementen in de code.

Je kunt hiervoor het beste werken in de Code-weergave, of het in elk geval controleren in de codeweergave om te zien of alle elementen op de juiste plek staan.

Peter Netherlands

24-08-2008 02:37 #

Duidelijk verhaal en aanvulling op je boek. Maar ik heb volgende probleem: AP-elementen die binnen container gemaakt zijn en keurig meebewegen met gecentreerde container, kun je niet verslepen. Zodra ik ze versleep, schieten ze buiten de container. Je kan ze alleen verplaatsen door de coordinaten te wijzigen. Wat gaat hier fout???

Martien Yland Netherlands

29-08-2008 02:01 #

@Martien,

Ik vermoed (kan het nu even niet checken) dat Dreamweaver bij slepen ook letterlijk de <div>-codes in het document gaat verplaatsen/herschikken, tot buiten de #container! En dan vallen ze uiteraard niet meer onder de regel van het centreren.

Je kunt dit controleren in de Codeweergave.

Voorlopig zou je dus het beste alleen kunnen werken door de coordinaten via de Property Inspector aan te passen.

Peter

15-01-2009 12:06 #

Hallo Peter,
Enige weken geleden de overstap gemaakt van GoLive naar Dreamweaver CS3....en dat betekent weer onderaan beginnen Smile

Ik heb me toch zitten rommelen met die AP-div's, want die kreeg ik inderdaad niet gecentreerd.

Jij legt het zo enorm goed uit, écht top !
Nu snap ik het en is het ook duidelijk en simpel wáarom dat niet ging.

Hoop dat er meerdere van dit soort video's komen, want het is een welkome aanvulling aan de al fantastische boeken die je schrijft.

Bedankt, het webdesign-leven zite er weer een stuk vrolijker uit, haha.

vriendelijke groeten
Rob Koning

Rob Koning Netherlands

05-07-2009 05:26 #

Waow, na 2 dagen zoeken heb ik het dankzij jou eindelijk gevonden! Hartelijk bedankt. Je legt het enorm goed uit, en dat je deze video's gewoon gratis aanbied vind ik helemaal fantastisch. Ik ga eens snel opzoeken of ik je boeken tot in Italië kan krijgen.

Anke Italy

06-07-2009 09:22 #

@Anke - haha, bedankt voor je complimenten. Mocht bol.com of computerboek.nl niet tot in Italie bezorgen, laat het dan even weten. Dan stop ik hoogstpersoonlijk een boek in een envelop en stuur ik die met plezier naar Italie. Smile

Succes met webdesign,

Peter

01-10-2009 03:34 #

Dit is een zeer goede en bruikbare uitleg over positionering. De beste wat ik heb kunnen vinden op het internet! Ik ga gelijk eens kijken welke boeken U geschreven heeft.

Ronny Netherlands

06-10-2009 04:15 #

Peter,

Inderdaad een duidelijke uitleg alleen het werkt helaas niet. Hoe kan jij die absolute lagen na de container relatief gemaakt te hebben zo makkelijk verplaatsen. In de demo pak jij ze zo op maar mij lukt dat absoluut niet dan springen ze buiten de container. Ik ben nog niet zo lang met Dreamweaver cs3 bezig dus misschien doe ik iets fout.

Remko Noordeloos Netherlands

07-10-2009 08:05 #

@Remko Noordeloos - Heb je de goede volgorde voor het toevoegen van lagen gebruikt (met andere woorden: zodat ze ook in de achtergrondcode *binnen* de container staan?).

Probeer het nog eens van nul af aan, met een nieuwe pagina.

Anders kun je me even je bestanden mailen waarin het fout gaat; als ik tijd heb kan ik er naar kijken.

Peter Netherlands

12-11-2009 11:22 #

Beste Peter
Je hebt prima uitgelegd hoe je elementen uit een container mee laat bewegen, maar ik heb een probleem met het centreren van de container zelf.
<div align="center" id="apDiv01"> <img src="../Fotos/Zijkant parketplank.jpg" alt="Achtergrond" width="710" height="500" /> (bij mij is de container eigenlijk apdiv01genoemd) maar enkel de foto binnenin de container wordt gecentreerd en niet de container zelf.
Ik zit echt met de handen in het haar, please help.
Groeten
Geert

geert Belgium

13-11-2009 08:51 #

@Geert - stuur me (via e-mail) even de pagina en eventuele afbeeldingen waar het om gaat. Dan kan ik er meer in detail naar kijken.

Peter

Reacties zijn gesloten