How to centre your CSS layout inside a web browser

Posted by on Jan 20, 2011 in Website Development |

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. Step 1 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. Step 2 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. Step 3 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...

read more

The basics of creating CSS layouts

Posted by on Dec 2, 2010 in Website Development | 1 comment

Most graphic designers will tell you that anybody can use Dreamweaver. Although this is true, you can’t always just download the program and expect to know how to start using it. If you’re an experienced graphic designer that hasn’t built a site in Dreamweaver before (or you have no website design experience and want to get the hang of it), your first point of departure is creating CSS layouts – also known as Div-based layouts. CSS layouts help you create a website with a creative layout without using inhibiting tables. So, after you’ve opened Dreamweaver, defined the site and saved the pages, this is what to do to start creating CSS layouts: Create CSS layouts Step 1: Turn the Insert bar on (if you don’t have the Insert bar turned on, go to the Window menu at the top of the page and look for insert – this is the first command in the drop-down menu).  Inside the insert bar, go to the Layout tab and click on the second icon in the bottom row called “Draw AP Div”. Once you’ve clicked on this button, you will be able to draw a box in your screen. Click anywhere in the screen and draw a box – this box is called a Div (if you have used Dreamweaver before, this can be confusing because these Div’s used to be called “layers” in previous versions of Dreamweaver). Step 2: To change the size of placement of the Divs, click on the box and drag. These Div’s can hold any type of content such as text, video, images, another Div and tables. If you come from a print background, Div’s may remind you of image boxes when designing in InDesign or Quark. For the first exercise, draw three Div’s (boxes) in the page – you can do this by going back to the “Draw AP Div” button on the insert bar. You will need three Div’s for this exercise because we are going to be making a header, content and footer layout. When you are done, close the Insert bar at the top of the page. Step 3: Click on the first Div so that it becomes highlighted, then go down to the property inspector at the bottom left hand side of the page and give the Div a different name than “AP div 1” (rename it to Header for this exercise). Grab second Div and rename it to Content and then the last Div and call it Footer. You can drag these Div’s around on the page to determine positioning, but it’s much more accurate to use fixed values for your CSS layouts. These are the basics of creating a CSS...

read more