Course Notes:
CSS page layout.
Two primary html page layout techniqes are tables and css. Dreamweaver support and includes templates of both. Taking a table template from DW and modifiying it to your needs in very straight forward. However, taking a CSS page layout template from DW or anywhere and customizing it to your needs can be challenging. It may be best to build one from scratch and learn the basics before attempting to customizer a template.
Building a css site from scratch:
First up draw up a design. That's right, take out a piece of paper and sketch out the basic layout and color scheme you want for your site. It should come out something like this:
The web is basically rectangles. To create these divisions we will primarily use the <div> tags. A <div> is basically a rectangular container that we can position using CSS.
We need to create these five components:
- Main Navigation
The primary navigation for this website.
Width: 760px (generally between 600 - 800 pixels)
Height: 50px
- Header
The website header includes a background image , and the site name.
Width: 760px
Height: 150px
- Content
The bulk of the website's content will go here.
Width: 480px
Height: - This will vary from page to page in our site based on content amount. This is a problem that we will have to address.
- Sidebar
This will have second-tier content that isn't as important as the main content. Generally secondary links.
Width: 280px
Height: May change if the conent changes
- Footer
Copyright information, credits, and an alternative text navigation.
Width: 760px
Height: 66px
Once we have a style picked out lets put it to work in a basic xhtml template. Also, lets link the extenal stylesheet at this point as well so choose a name for the stylesheet you are going to create.
Next, since our total layout width is 760 px, lets create a box or "container" to hold our style layout.
In the body tag of your html include the following code:
<body> <div id="page-container"> CSS Layout </div> </body>
Notice in the div tag that we have an id rather than a class. This is just an alternative method of including css styles.
At this point we had better create a "rule" is css that will define our page-container. This is similar to defining a class. At this point our rule should define the width and set a background color. Browser margins defaults really vary so lets deal with this problem as well.
In the style sheet include the code:
#page-container { width: 760px; margin: auto; background: red; }
*Notice we use the #id name notation in rather the .class name
and
html, body { margin: 0; padding: 0; }
Now lets see what we have so far.
OK so lets start putting in the pieces. We need to go into the html file and insert the "containers" that will hold the pieces that we defined above.
Include the following code within the "page-container" of out html file.
<div id="page-container"> *we can get rid of the "CSS Layout" text we put in ealier.
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
Now we need to go into the stylesheet and create these id pieces. At this point lets define their colors heights. At this point I will take the background color out of the page-container since it is no longer needed.
Insert this code into the stylesheet.
#main-nav { background: red; height: 50px; }
#header { background: blue; height: 150px; }
#sidebar-a { background: darkgreen; }
#content { background: green; }
#footer { background: orange; height: 66px; }
Now lets see where we are.
Here is the stylesheet code at this point.
OK Now for the tricky part!!
"Floating" all these parts together.
The FLOAT.
A float is an element that is aligned against the left or right side of its container.
In the case of our website we are going to float our sidebar-a div to the right, with a width of 280px. Add the following to your CSS:
#sidebar-a { float: right; width: 280px; background: darkgreen; }
To make sure our "content" area doesn't intrude in the "sidebar-a" area we are going to add the following to our "content" rule.
#content { margin-right: 280px; background: green; }
*This keeps the content 280 pixels away from the right margin. Just the perfect amount needed for our 280px sidebar.
Lets check it out now.
And the stylesheet
Almost there. Now how about addiing some cotent and see what's up with the overflow problem.
By default, any floated element will not push down elements that are below it. This is because floated elements are not considered part of the document 'flow'. Its like they are on another layer 'floating' above the other elements, and because of this, it can't effect their positions.
What can we do to fix this problem? Introducing the "clear" css property.
Add this to your stylesheet:
#footer { clear: both; background: orange; height: 66px; }
* Note - you can specify to clear left floats, right floats and just to be safe we choose both
See how the footer now "clears" way for the overflowing text.
alternative fix
Some finishing touches.
The Navigation bar.
#main-nav { background: red; height: 50px; text-align:center; margin-top:20px}
* I set the margin top to 20 px because thats the way I like it.
My navigation area is for links so I made the following additional rules to my #main-nav
#main-nav a{text-decoration:none; font-family: Georgia, Times, serif; color:#000099;}
#main-nav a:hover{text-decoration: underline; font-family: Georgia, Times, serif; color: #00FFCC;}
For the header I added a background image and some h1 modification for the text:
#header { background: blue; height: 150px; background-image:url(header.gif);}
#header h1 {
margin: 0;
padding: 0;
float: left;
margin-top: 40px;
padding-left: 300px;
color:#FF0000;
font-size: 58px;
}
Finally the footer:
I am going to create another container for the footer-nav and place it in the footer id in my html file.
<div id="footer"> /* this is my original footer div */
<div id="footer-nav">
<a href="#">home</a> <a href="#">about</a> <a href="#">contact</a>
<a href="#">products</a> <a href="#">history</a>
</div>
</div>
Now I better create the #footer-nav in my css file.
#footer-nav {float: right; margin-right: 80px; margin-top: 30px}
#footer-nav a{text-decoration: underline; font-family: Georgia, Times, serif; color: #996600;}
Add it all up and this is what I am left with!
The final stylesheet
|