Make a Centered Layout with Expression Web: Part 1

Back to the tutorials page

For an example of the layout we are making click here.

This tutorial explains how to make a centered, fixed width layout with CSS.

Some people have 800x600 windows, 1024x768, and others have different configurations. This will make your website consistent.

Open a blank HTML document. Save it and name it Centered-Layout.  In the Task Panes open the Apply Styles window. Click on New Style. At the selector window use the pull down and select Body. In the Define In window pick new stylesheet. Put a check in Apply new style to document.  In the category window pick Box and go over to padding. Leave the check in the box. type in 0 and leave the px as is. In the margin in the top and bottom type in zero and in the left and right type in auto.  Now select Background and pick a color (pick a dark color for now) that you want. This will give you the coloring you need when you expand and contract your Browser window. Don't worry about the color, you can change it anytime you want. On the bottom of the popup pick Apply. Pick yes to attach the style sheet. then click OK to close the window pane. 

The next step is a container, this will be the part that centers your website.

toolbox

In the TaskPanes, open the Toolbox.  Right click on div and click Insert.  Make sure the div is highlighted in the page toolbar (it will be orange)

example

In the Apply Styles, click New Style. Check the box in Apply new style. In the Define in box, pick New Style Sheet

stylemaker

This will make a new stylesheet.  In the Selector, backspace through until the space is completely empty. Type in #container. The # indicates this is a one time style and will not be used again.  In the Box section leave the boxes checked, and put 0 in the padding and margin sections.  In the Position section the width will be 80% (use the dropdown by px for %) and the height will be 100%.   This is also the place you want to pick your main Font style.  You can change your font styles at any time.  Click Apply at the bottom and OK.  If you are going to use one style of Font (which I recommend for a fluid look throughout your site) this is the place to put it. As you make other styles you can apply other fonts that will override this one. But this font is the one you are going to mainly use. Pick the size of what your text will be, I use 1em. Em will increase or decrease depending on your browser window. Some people like fonts to be bigger for reading purposes. This will make it the standard size for the font. If you want a larger font, pick 1.1 or 1.2em etc. If you want italic - go to the font-style and pick it here also.  When you are done making these styles, save the page.  It will bring up a dialog that asks what you want to save the stylesheet as.  Put a name in it.  You now have an external stylesheet.  Keep all your styles on this sheet.

 

Continue to Part Two:   Adding Sections to a Centered Layout

Trademark Disclaimer - Expression Web is the Trademark of and the property of Microsoft Corporation. Microsoft is not affiliated with Certain Web Design or this website, nor is Certain Web Design sponsored by Microsoft Corp.

©2009-2010 Certain Web Design, All Rights Reserved.