Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Using the 'Centring a Design' Method with Dreamweaver
Here is a quick tutorial on how to centre a web page design using the 'wrapper' method and Dreamweaver.
First off, create yourself a basic HTML page. Next, select the 'New CSS Style' button as indicated by the red arrow below. Now you will need to define the CSS properties of your 'wrapper'. Select the 'Advanced' option under 'Selector Type' and call the style '#wrapper'.
Define the style in a 'New Style Sheet'. I call my main style sheet 'mainlayout' and this 'mainlayout.css' is how I will refer to the style sheet from now on. Note that you can define the style in just the HTML document you have created. The CSS style will sit in the 'head' tags.
When the CSS dialogue box pops up, select 'Positioning' and set the Type to 'relative' and the width to 800px (or however wide you want your site to be) and the height to 'auto' meaning that it will expand as your site grows.
Next, select 'Box' and set the width to 800px and the height to 'auto'. You will also need to set the margins as this is what will centre your design. Unckeck the tick box which says 'same for all' above the 'Margin' section and then set the left and right margins to 'auto'. Then click on 'OK'.
This is all the CSS styling you will need to add to your 'wrapper' to centre your design. All you need to do now is insert a div tag which will be styled with the CSS you have just created. Go to 'insert' and then select 'div tag'. In the dialogue box select the 'ID' 'wrapper' and choose to insert the div tag after the start of the tag as illustrated below.
Click on OK. Your HTML page should now have a centred box on it with the words 'Content for id "wrapper" Goes Here. This is where you will build the rest of your site, nicely centred by the 'wrapper' CSS defined in the mainlayout.css file.
