This article is part of a series about website design and the basics of creating a CSS (cascading style sheet) layout in Dreamweaver. In the previous articles we discussed how to create Div’s, change the sizes and how to create “nested Div’s” (a Div inside a Div). This article will focus on how to centre your CSS layout inside a web browser.
If you’ve worked with table-based layouts before, you’ll know that centering your layout is relatively easy. CSS, however, can become a little bit more complicated. When browsing the internet for tutorials on this, you will find there are a few different techniques. The technique we are going to show you is the only sure way to get your layout centred every time, in every condition and in every browser.
Down at the bottom of the CSS Styles panel, you need to create a new CSS rule (click on the third icon from the bottom right of the menu in this panel). A dialogue box will pop up – select “Tag”’ as the Selector Type. Change the Tag to “body” and press OK. A dialogue box called “CSS Rule definition for body” will pop up. The only property that this tag will have needs to be changed in the Block category, set the text alignment to “Center” and click OK.
Now we are going to wrap our entire layout inside one single master Div. This happens inside the Code. Look for your opening <body> tag (give yourself some space to work so hit Enter a few times). Put your curser inside the white space and click on Insert at the top of the page – click on Layout Objects and then Div Tags in this drop-down menu. A dialogue box will pop up, click on New CSS Style, check the Advanced Sector Type and change the name of the Selector to #Master and press OK.
Another dialogue box will pop up and there are a number of definitions to set:
- Within the Box category: In the Margin definitions, uncheck the “Same for all” box and set the positions as follows (Top = 0; Right = auto; Bottom = 0; Left = auto).
- Within the Positioning category: The type should be set as Relative, Width = 990, leave the Height value empty (we’re going to allow the content to determine the height), Top = 0 and Left = 0, click on OK.
Inside the code, highlight the following line:
<div id=#Master”> Content for id “Master” Goes Here </div>. This is “dummy content”, so delete the “Content for id “Master” Goes Here” sentence and then cut the closing Div tag – </div> – and paste it just above the closing body tag – </body> – at the bottom of the page.
Save the document and check out the layout in your browser (by clicking on the Globe icon). Now that you have centred your layout, you can start refining the site by creating more nested Div’s, inserting content and so forth. This article is based on a video by Creativebits.org, an Apple-oriented design community). If you want to see the video, click here.