03april

Sites centreren in Dreamweaver [video]

Regelmatig krijg ik van lezers de vraag 'Hoe kan ik mijn site centreren in Dreamweaver?'. Dit is daarmee zeker iets wat in een volgend boek over Dreamweaver aan de orde zal komen! Omdat ik jullie daar niet op wil laten wachten heb ik alvast een korte videodemo gemaakt waarin wordt getoond hoe je een site in Dreamweaver een vaste breedte kunt geven en deze vervolgens kunt centreren in de browser (06:32 min).

Ik werk in de video met een nieuwe pagina, maar als je dit wilt toevoegen aan bestaande pagina's, dan kun je eenvoudig de tag <div> om de bestaande content plaatsen, ongeveer zoals in

<div id="container">

…Overige inhoud van de pagina

</div>

En dan uiteraard de juiste codes voor #container schrijven in je CSS-bestand zoals in de video wordt aangegeven. De bestanden die in de demo worden gemaakt kun je hier downloaden. Veel succes er mee!

Peter Kassenaar
-- 3 april 2008

dw_site_centreren.zip (18,33 kb)

 

(PS: in aanvulling op het bloggen ben ik sinds kort ook actief op Twitter, voor korte berichten en handige links. Je kunt me volgen via http://twitter.com/PeterKassenaar (@PeterKassenaar is mijn Twitternaam). 

 

Reacties

10-04-2008 08:11 #

Bedankt!! Op dit filmpje heb ik acht maanden zitten wachten Smile Heb alleen nog problemen met layer die ik gebruik in de site. Die verplaatsen nl. niet zoals ik het wil, maar staan op de meest vreemde plaatsen. Is er een handigheidje waardoor alles blijft staan zoals ik in eerste instantie op het scherm zie? Gegroet, Jan

Jan Netherlands

10-04-2008 01:33 #

@Jan - Mogelijk gebruik jij absoluut gepositioneerde layers, waardoor ze niet binnen de gecentreerde #container blijven staan.

Kijk in dat geval ook even naar mijn volgende post over dit onderwerp. Misschien kan dit je probleem oplossen:

www.kassenaar.com/.../...reren-in-Dreamweaver.aspx

Peter Kassenaar Netherlands

29-08-2008 01:36 #

Thx voor de video uitleg!!! Heb toch nog een vraagje hoe doe je dit als je met een left, top en mainframe werkt? Moet je dit invoegen in elk frame?! Ik werk met 2004 MX.. Waar jij een new css style sheet aanmaakt staat bij mij niks.. Wat moet ik dan doen?

Alvast bedankt!!!

Joachim Belgium

29-08-2008 02:11 #

@Joachim,

Ik heb al sinds 1998 niet meer met frames gewerkt Smile, dus dat zou ik zo niet weten. Je zult dit waarschijnlijk moeten/willen instellen voor de pagina die centraal in je frameset wordt getoond. Voor een topframe (banner?) en leftframe (navigatie?) hoef je dit niet apart in te stellen.

In MX 2004 zul je dit ook rechtstreeks in de code moeten invoegen denk ik, want de CSS-opties zijn hierin nog niet zo uitgebreid. Ik zou je adviseren te upgraden naar een nieuwere DW-versie.

Peter

10-09-2008 01:36 #

Hallo Peter
Bedankt voor je filmpje!!! Ook mijn pagina staat nu eindelijk in het midden. Alleen kan ik sindsdien geen waarden meer veranderen van layers, container, body etc. Heb misschien ergens per ongeluk een instelling fout geklikt? Als ik een ander cijfer bij positie ofzo wil typen krijg ik de optie auto of (value) maar ik kan verder niks veranderen.
Weet u misschien welke instelling dit is of een andere oplossing?

Groetjes

Willeke van Rijn

12-10-2008 02:49 #

Hoi Peter,
Super bedankt voor het filmpje.
Het is zo'n handige basis.
Ik heb alleen nog 1 probleempje.
Als je je div tag (container) maakt en je stelt Top margin in op 0, dan klopt dat maar bij Bottom margin stel ik dat ook op 0 in, zoals in jouw filmpje, en dan komt de container niet tegen de onderkant..
Kan je dit instellen dat dat wel zo komt, ik vind dat mooier.
Mvg wannes

wannes Belgium

27-10-2008 08:32 #

Hoi Peter,
Ben een cursus aan het volgen DW8 en stelde mij al vragen hoe je een volledige pagina kon centreren.
Als ik het goed begrijp kan je alle styls in die Container steken.  Juist?

vrgr
Martine

martine Belgium

28-10-2008 10:00 #

@martine,

Ja, dat klopt. Je kunt alle stijlen binnen de #container plaatsen. Je zult wel begrijpen dat vooral de *positionerings* stijlen hiervan effect hebben. Stijlen voor lettertype, kleuren enzovoort zijn niet afhankelijk van de container en kunnen net zo goed elders geplaatst worden.

Probeer altijd het overzicht op je stijlbestanden te houden.

Peter

07-12-2008 02:56 #

Peter,
Ik heb een .css file gecreeerd voor de layout van mijn site (external .css file)

Op de indexpagina werkt het prima.

Echter als ik een nieuwe pagina aanmaak en in het css palet de  optie attach style sheet aanklik gebeurt er niets met de pagina.
Deze blijft gewoon blank. En de .css file staat duidelijk in de code en in het css palet.  Echter er is geen resultaat op mijn pagina.


Echter als ik een copy maak van de index pagina en deze dan hernoem dat blijft het allemaal werken
In de <head> staat nochtans deze css file vermeldt.
<link href="container.css" rel="stylesheet" type="text/css" />

Hoe los je dit op?

vrgr
Martine

martine Belgium

15-12-2008 10:22 #

@Martine: Kijk goed of de referentie naar het css-bestand wel naar de juiste map verwijst. Als je de stylesheet in een andere map hebt geplaatst, is de code wel zichtbaar, maar kan het bestand door de browser niet worden gevonden (en worden de stijlen dus niet toegepast.

Een andere mogelijkheid is dat de browser het bestand uit zijn cache haalt in plaats van de laatste versie te tonen. Druk op Shift, terwijl je op Vernieuwen klikt in de browser, om geforceerd de laatste versie op te halen.

Ik hoop dat dit helpt,

Peter Netherlands

15-12-2008 12:57 #

Peter,
Ik heb het gevonden.  Ik had de CSS file gewoon toegepast op een blanco pagina en dat werkt natuurlijk niet daar de nodige DIV tags onvindbaar zijn dan.

Ik heb van mijn beginpagina nu een template gemaakt en bepaalde delen omgezet naar een editable region.

Enkel nu nog even kijken of de onderliggende #content en de #container zelf ook als editable region moeten gemaakt worden.

Kopijen maken pagina per pagina lukt ook natuurlijk maar zal iets meer werk geven bij veranderingen.

Hartelijk bedankt voor je hulp.

Groetjes
Martine

martine Belgium

15-12-2008 02:15 #

@Martine - Het werken met templates is inderdaad de aangewezen manier in dit soort situaties. Je bent dan het beste voorbereid op uitbreiding van de site in de toekomst.

Peter Netherlands

01-01-2009 12:58 #

Is #container hetzelfde als #wrap?

zoë Belgium

02-01-2009 09:15 #

Zoe,

Inderdaad #wrap is hetzelfde als #container.

Sommige noemen het zelfs #outline of #wrapper.

Elke #ID die je maakt om je pagina te centreren en waarin je nadien al het andere steekt zoals een #ID voor je header, navigatiebalk, je inhoud en eventueel je footer, komt allemaal in die ``container`` of ``wrap`` of ``outline``.

Je kan die bv ook #verzamelbox gaan noemen.   Je kan het eender welke naam geven.

Hoop dat dit je een beetje heeft geholpen.

Groetjes
Martine

martine Belgium

17-01-2009 01:20 #

beste Peter, u hebt me een stuk vooruit geholpen met 2 video's van deze (+ AP elementen centreren). Ik kocht uw boek CS3 nog in novemb maar intussen werk ik met CS4 en sommige zaken zijn inmiddels gewijzigd in DW4 of zelfs niet meer beschikbaar. (knoppen aanmaken vond ik precies gemakkelijker in CS3). Ik heb ooit een eigen site gemaakt in 2001 met GoLive 4 (Mac) met de handleiding 'op de schoot' en nadien nooit meer naar uitgekeken of aangepast. Ik geraak héél moeilijk van start. Nu had ik graag die intro eruit gehaald want die vind ik veel te lang en complex (toen leuk dacht ik). Er steken ook enkele klassieke debutantfouten in (doortroming site,...).  Alles lijkt complexer en heel wat problemen vermits ik niets afweet van html coderen. Toen ging dat zonder, nu lijkt dat onmisbaar om op de juiste plaatsen (als je die al vind - er zoveel beschikbaar!) een aanpassing te doen. Ik vertrek vanuit firework en ga dan naar Dreamweaver maar bep. zaken lukten maar niet (vb deze in video). Centreren had ik bv via het uitlijnen bereikt maar u doet dat hier op een heel andere wijze.
Dus we zoeken nog even verder want ik ben eerst bezig voor een klant (wat ik steeds had proberen af te houden) maar uiteindelijk toch toegegeven... Hopelijk is er een vlugge manier om die oude site van mij binnen te trekken maar ook dat schijnt niet evident te zijn omdat de versie reeds te oud zou zijn? Prettig weekend verder, nogmaals bedankt en plaats vooral nog wat filmpjes want dit is zoveel gemakkelijker dan in een boek te volgen vind ik...

rik claus Belgium

05-02-2009 03:52 #

Hallo Peter
Ik heb een vraag over het centreren van mijn site in de browser wat betreft links en rechts heb ik geen problemen meer maar ik wil het ook verticaal gecentreerd hebben dus hoe groot ik het browservenster ook maak hij blijft altijd in het midden van de browser staan
hoop dat je me kunt helpen

met vriendelijke groet bert

bert van kooten Netherlands

05-02-2009 07:10 #

Ik werk met Dreamweaver Mx2004
Het is super wat jij gemaakt hebt. Ik heb echter een klein vraagje.
Ik heb al een bestaande site. Plaats ik de de tag <DIV> dan voor mijn inhoud(mijn site) Ik heb er niet veel verstand van. Ik wek echt in de Design mode!!
Kun je me helpen?

Rene Netherlands

05-02-2009 07:41 #

@Bert - Over het verticaal centereren van elementen binnen een ander element is bijvoorbeeld deze goede blogpost verschenen (alleen in het Engels): www.jakpsatweb.cz/.../...ical-center-solution.html

@Rene - Inderdaad kun je dan de container-<div>  het beste rondom alle inhoud zetten. Dus bijvoorbeeld vlak na <body> en vlak voor </body> schrijf je </div>. Dan weet je zeker dat alle informatie op je pagina er binnen valt.

Verder adviseer ik je in dit geval zeker om je verder te verdiepen in de code-mogelijkheden Smile.

Peter Netherlands

29-03-2009 04:38 #

Beste Peter,

Bedankt voor bovenstaand filmpje. Ik ben voor het eerst sinds jaren een webpagina aan het maken in HTML (werk zelf over het algemeen met flash cs3). En ik probeer mijn pagina op jouw manier te centreren.

Binnen de container heb ik een tabel geplaatst met daarin de achtergrond van de site. Nu is deze in het Dreamweaver cs3 designpanel keurig gecentreerd. Open ik hem echter in mijn browser dan staat deze nog steeds links uitgelijnd. Enig idee hoe dit zou kunnen?

Alvast bedankt voor je hulp

Eelco Netherlands

31-03-2009 08:54 #

@Eelco - nee, ik weet niet hoe dat zou kunnen komen. Wel een vraag: waarom ken je de achtergrond niet gewoon toe via een CSS-regel aan de container? Met background-image:url('...');

Dat scheelt weer in de markup-code en mogelijk het zoeken naar de oorzaak.

Peter Netherlands

01-04-2009 05:06 #

Hoi Peter,

Bedankt voor je reactie... Dat is inderdaad ook een idee. Ik heb de achtergrond gemaakt in photoshop en daar "gesliced" zodat ik deze kon importeren in dreamweaver. Vandaar dat ik deze in eerste instantie in de body heb geplaatst. Ik ga eens proberen of ik dit ook in de CSS op kan nemen hiervoor.

GrtZ

Eelco

16-04-2009 11:45 #

heel erg bedankt voor de duidelijke uitleg. na wat vogelen ben ik erachter gekomen dat voor de bestaande site je eerst alles selecteerd dan kan je bij het instellen van de DIV de tag rondom de selectie plaatsen.

johan van roekel Netherlands

24-05-2009 07:53 #

Beste Peter,

Hartelijk dank voor de demo 'hoe een website te centreren in Dreamweaver'!

Groet,

Rob

Rob van der Velde Netherlands

04-06-2009 02:12 #

Hoi Peter,
Kan je ook sites vertikaal centreren? Als ik ook bij de margin-top en -botom 'auto' aangeef, blijft de site toch aan de bovenkant van het scherm geplakt zitten. Is dat te omzeilen? Alvast bedankt!

esther Netherlands

08-06-2009 06:52 #

@Esther - zie ietsje hoger in de lijst, bij het commentaar van 5 februari Smile

Peter

09-06-2009 04:24 #

Ha Peter,

heldere vidio

Voor het eerste deel lukt het. Dan:
Ik beschik over MX4(NL versie) en kan de insert <div> niet vinden. Is dit hierin anders geregeld? Hoe werk dit vervolgens? Groet,

Ruud

Ruud Netherlands

09-06-2009 04:41 #

Sorry,

Video

Ruud

Ruud Netherlands

11-06-2009 12:12 #

Peter,
In aanvulling op mijn eerdere mail beschik ik niet over de button 'insert div tag' in het pallet insert bij MX2004. Is er een manier om deze toe te voegen? Is er een andere manier om de CSS style aan een container of layer te koppelen?

Alvast bedankt!

Ruud Netherlands

11-06-2009 01:40 #

@Ruud - Ik heb DW MX2004 niet meer tot mijn beschikking, maar ik dacht dat de knop Insert Div tag hier aanwezig was in het palet Layout.

Ik heb even in een van mijn oude boeken gekeken, en het lijkt mij de derde knop in deze werkbalk.

Peter Netherlands

22-06-2009 03:29 #

Helemaal top! Hartstikke bedankt voor deze info. Hier was ik al een tijd naar op zoek.

patricia veerman Netherlands

31-07-2009 05:03 #

thank you for sharing it

stop dreaming start action Indonesia

19-04-2010 01:14 #

Hallo Peter,

Duidelijke video,
ik heb echter wel het probleem dat er een ruimte boven de container blijft, dus dat de box verticaal niet helemaal aansluit op de bovenkant.
Ik weet niet hoe ik dit probleem kan oplossen.
Jij enig idee?

mvrgr,
Bernd Holtkamp

Bernd Netherlands

19-04-2010 02:13 #

Hallo Peter,

Duidelijke video.
Ik heb echter nog het probleem dat de container niet aansluit bij de bovenkant van het scherm. Hoe kan ik dat verhelpen?

mvrgr,
Bernd Holtkamp

Bernd Netherlands

19-04-2010 08:40 #

Bernd,

Misschien kan ik je helpen daar ik dit ook ooit eens gehad heb.

Je moet eens in je codes kijken en eventueel een break <BR> eruit halen, of een andere spatie code.

Als je niet weet naar welke code te kijken dan is er nog een truukje.  Zet je cursur helemaal vooraan in de ruimte bovenaan.  Dus eigelijk in de ruimte die je graag weg wil hebben.  Staat je cursur daar?  Click enkele malen op Delete tot je container helemaal aansluit.

Maar normaal is het niet-aansluiten van je container te wijten aan één of andere spatie code die je per ongeluk daar vooraan hebt gezet.

Hoop dat dit je een beetje helpt.

Groetjes

Martine

martine Belgium

Reacties zijn gesloten