Create CSS Page Layout
Use CSS to control page layout with different areas of content inside their own <div> tags.
Stretching background images
top
Use multiple stylesheets for flexibility
- stylesheet for text / fonts: text.css
- stylesheet for navigation / menus: nav.css
- stylesheets for different kinds of layout, which include body style
- stylesheet for 2 column fluid layout (both columns expand and contract when browser size changes)
- stylesheet for 2 column, navigation column fixed width, main one fluid: 2col1fix1liquid.css
- other types of layout
use a main stylesheet to import others
main.css
/* CSS Document */
@import url(2col_liquidlayout.css);
@import url(text.css);
@import url(nav.css);
or link / import all 3 stylesheets into document
<head>
<link href="2col_liquidlayout.css" rel="stylesheet" type="text/css" />
<link href="text.css" rel="stylesheet" type="text/css" />
<link href="nav.css" rel="stylesheet" type="text/css" />
</head>
DIV elements on page
Container
- This element holds the entire page content
- It ends after the footer
- It allows you to center the rest of the page, to set the page width to 100%, etc.
Header
- holds logo, title, horizontal global navigation
Wrapper
- this element holds the columns in place
- Sometimes it only holds the content div and sometimes it holds all 3 columns
content div
- holds main content for page
- easiest for disabled visitors if the content area is first on the page so they do not have to plough through all the navigation on every page.
- This column can be fixed width, percentage of page width, or defined in em unit so will adjust to text size changes
- if navigation is to the left, the left margin of the content div may be set to the size of the navigation div, either in percentages, or ems
Navigation div
- for local navigation, either on left or right of content area.
- This column can be fixed width (which may not adjust to changes in text size), percentage of page width, or defined in em unit so will adjust to text size changes
other div
- can be used to hold ads, links to other sites, graphics, etc.
- in 2-column layout is displayed below navigation div
- in 3-column layout is displayed as the third column
Footer
- at the bottom of the page
- if columns above the footer are floated, you need to clear the float before the footer so that it will be located below the longest column
top
Practice Creating your own page layout
Download starting page, into your test website and the graphic below into the images folder on that website.
- Create a stylesheet for this page using one of the templates below and save it in the styles folder for the site.
- These stylesheets are based on ones that can be downloaded from Gala CSS Layout Templates . There are many more examples that you can download and modify
- Link to the stylesheet by clicking on the link icon in the CSS palette and selecting the stylesheet you just created.
- Insert the <div> tags for each element in the page layout. Save the page and check whether the style for that div tag works.
- Modify the <div> styles in the stylesheet so that you can see their effects work.
- Save and view in the browser. Validate XHTML and CSS as you go.
- After you finish the layout,
- view in both Firefox and IE7 and adjust the margins that may be different in IE7.
- work on the font styles in a separate font.css
- work on the navigation styles in a separate nav.css.
- You can then alternate page layouts and use the same font and navigation styles.
- be sure to remove the notes on the web page that tell you where the divs begin and end, since they affect the layout.
top
Fixed width 3-column layout
- This stylesheet has the content area in the middle column with fixed width navigation column on the left and other column on the right.
- download 3colfixed.css and apply it to your page
- after you are happy with the layout, remove the background colors for each div.
- You also need to provide padding for the columns to separate the content from the edge of the column.
- beginning of text.css stylesheet
- end result of page using this stylesheet
top
Liquid 2-column layout
- This stylesheet floats the content column on the right and the navigation and other columns on the left
- The wrapper element only holds the content element.
- the wrapper element's width is 100% of the container element and its right margin is -33%, which means it goes off the right hand of the page
- The content element thus has a right margin of 33% to make sure it remains on the page.
- The navigation and other elements form a column on the left, and are both floated left. Their width is 32.9% to take up the space left by the wrapper on the left.
- The footer clears the float so it sits below the longest column.
- layout stylesheet for this style
- final page with stylesheet attached
top
left column fixed, 2 columns fluid
- The wrapper div in this layout holds all 3 columns.
- the navigation div in the left column is floated on the left, has fixed width of 15em, and a left margin of -100%, since it comes after the content element in the HTML page order.
- content column has a right margin of 35% (slightly larger than the width of the other element) and a left margin of 17 em (slightly larger than navigation element).
- The other element is floated on the left because it comes after the content element in the HTML sequence. Its width is 32% and its left margin is -34%
- layout stylesheet for this style
- final page with stylesheet attached
top
Resources
top
