kane
194.***.***.***Simple CSS Layout | Web Design
Step OneFirst of all you want to set up your layout structure in html (Between the body tags).
A simple structure would look like the following:
Code:
<div id="wrapper">
<div id="header"></div> <div id="navigation"></div> <div id="content"></div> <div id="footer"></div>
</div>
Each of these "sections" as they will be referred to, are where our relative pieces of the web site will go.
Step Two
Ok, now that we have our structures set up, we want to set up the css code that applies to each <div> tag.
To begin with, let's set up the <body> and "wrapper" attributes.
Since <div> tags use all available space in the browser, there is no need for us to set a width attribute in the code unless we want a smaller width for our overall layout.
To begin your CSS code block, paste this code in between your page's <head> tags:
Code:
<style type="text/css">
</style>
For this tutorial, we are going to give the wrapper a white background colour and a black 1px solid border (Simple, yes! But I am making this tutorial as simple as possible so that you can clearly see what each thing is doing). We are also going to give the <body> a background colour of #071743.
To do this, place the following code in between the previously created <style> tags:
Code:
body
{
background-color: #071743;
}
#wrapper
{
font-family: arial, tahoma, sans serif;
font-size: 0.9em;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #000000;
}
All attributes are pretty self-explanatory, so I won't go into detail on them. If your unsure of what they do up to this point, save your page and open it in your browser to see the effects.
Step Three
Now that our page's wrapper is set up, lets set up the "header" attributes.
In this tutorial, we will be creating a simple header with a black background and white text.
For this, we use the following code after our "wrapper" code:
Code:
#header
{
background-color: #000000;
color: #FFFFFF;
}
Now, our header will be where our logo or web site title should be placed, henceforth we will now style the <h1> tags for the "header" section only. Header tags also produce a margin around them, so we will remove this margin in the code.
This is done by using the following code:
Code:
#header h1
{
margin: 0;
font-size: 1.2em;
font-weight: bold;
}
Step Four
Now that our "wrapper" and "header" attributes have been set up, we will move on to creating the navigation section of our website.
Many people use "white-space" or "link | link" methods for producing horizontal navigational bars.
However, this method is not effective and there is an easier solution.
This solution is the <ul> and <li> tags, commonly used for bullet-pointed lists.
A correctly styled combination of <ul> and <li> tags can create very good "inline" navigational bars.
First of all, we must set up the "navigation" sections basic attributes such as background-color etc.
Code:
#navigation
{
height: 25px;
background-color: #2D2D2D;
color: #FFFFFF;
}
Yet again, height is another self-explanatory attribute which I shall not go into.
Now we must produce the style for the <ul> and <li> tags, this is done as follows:
Code:
#navigation ul { margin: 0; padding: 0; } #navigation li { margin:0 1em; display: inline; }
The style for the <ul> tag basically removes any padding that anything within the tag has.
As for the style of the <li> tag, the margin attribute defines the distance between each item in the list (The links) and the "display: inline" indicates to the browser that the list must be displayed horizontally.
Now for styling the actual links to go inside the navigation bar, this is simply done by styling the <a> tag:
Code:
#navigation a { color: #FFFFFF; font-weight: bold; text-decoration: none; } #navigation a:hover { color: #CCCCCC; }
The only bit of code you may not have come across here is the "text-decoration". This, by default, gives your links the underlining, by specifying "text-decoration: none" we are removing this underline.
The "a:hover" specifies the attributes for the link when the mouse cursor is placed over it.
Step Five
Now we must style the "content" tag. This is very simple, and for ease could also be done by styling the page's <body> tag.
But for now, we shall leave it as it is.
There isn't really much to style within the "content" section, since this is only a simple layout. However, you could set up header tags for the content area. Such as:
Code:
#content h1 { margin: 0; color: #0A225F; font-weight: bold; font-size: 1.2em; } #content h2 { margin: 0; color: #0A225F; font-weight: bold; font-size: 1em; }
Step Six
Finally, to set up the "footer" attributes.
Since this area will generally only contain the copyright notice, it shall be simple.
Code:
#footer { background-color: #000000; color: #FFFFFF; font-size: 0.7em; margin: auto; }
Step Seven
And now your done!
Simply add your content between the <div> tags and you have a VERY basic css layout!
Code:
<body> <div id="wrapper"> <div id="header"><h1>Newbie CSS Layout</h1></div> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div id="content"><h1>Welcome to the "Newbie CSS Layout" example</h1>Your content goes here!<p /> <h2>Another header... but smaller!</h2>Yet more content!</div> <div id="footer">All content copyright © 2006 Your Name</div> </div> </body>
I hope i helped you all!