CSS Web Header Beginner Tutorial
Jan 8, 2009 CSS
In this Tutorial we will learn how to use CSS to create a basic Web Layout, great for beginners!
This tutorial has been viewed: 11764 times
One of many css tutorials for beginners
Welcome to the CSS Header Tutorial! Today we are going to be building a scalable cross platform header which will validate strict XHTML on W3C. Our finished design will look like this:
This CSS Web Header Tutorial is an excellent supplement to all of our photoshop tutorials.
Note: This Tutorial assumes you have a basic knowledge of HTML/CSS editing
Click image to preview CSS Header
Step 1: Your going to need to download all of the images that I use here:
Download CSS Header Files
(size 14.1KB files: index.html, headtop.png, logo.png)
Make sure you save all the files in the same directory!
Step 2: Your going to need to open a text editor (like Notepad Start – Run – Type Notepad) to edit your HTML and CSS create a file named index.html Tip: I personally use VIM as an editor.
Step 3: First of all we need to create the HTML of our website and assign all the various areas different ID’s
index.html
————————————
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
<head>
<title>CSS Header</title>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<div id=”logo”>
<img src=”logo.png” />
</div>
<div
id=”mainMenu”>
<a href=”link”>Home</a> |
<a href=”link”>Download</a> | <a
href=”link”>More Links</a>
</div>
</div>
</div>
</body>
</html>
Lets break that down:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
That bit of code declares your website as an XHTML website, which helps be more cross browser compatible (e.g. Internet Exploer/Firefox)
The rest of the code assigns the areas of your page to different ID’s so you can style them in CSS e.g.
Right now your website wont look like much so you will need to use CSS to design it
Open a new document and save it as style.css in the same directory as index.html
Let’s look at the coding for style.css
———————————-
body{
margin: 0;
padding: 0;
font-family: Verdana;
}
a{
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
#wrapper{
width: 100%;
background-image: url(‘headTop.png’);
background-repeat: repeat-x;
}
#header{
width: 80%;
height: 194px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#logo{
float: left;
margin: 80px 0 0 0;
}
#mainMenu{
float:right;
margin: 160px 0 0 0;
color: #FFFFFF;
font-size: 11px;
}
Alright so we will look at it from the top, we first change the body attribute to have no margins or padding this allows the website to be Flush with the window, we also change the Font to Verdana
Next we change the appearance of the links (the a attribute) set it text-decoration to none (no underline) color to #FFFFFF (white) and it’s weight to bold
Now the wrapper is quite interesting. we set the width to 100% of the entire page, set the background image to ‘headTop.png’ and the background-repeat to repeat-x. what that does is makes the background only repeat on the x (horizontal) axis so that it doesn’t spread across the entire page, it only spreads on top. Thats a pretty nifty attribute
Hopefully you are noticing how the #idName controls the id that’s in the HTML e.g. #wrapper controls the div that was given the id of wrapper
The next id we change is the header Which is where the logo and the links are. The width is set to 80% of the page height to 194 pixels (the height of the background image) notice the margin-left and margin-right are set to auto, this is what causes them to center.
Now for the Logo it is set to float: left, this allows it to align to the left of the div without ‘pushing’ things down. I used CSS Shorthand on the margins like this margin: 80px 0 0 0, what does that mean? Well it’s like this margin: top margin#, right margin#, bottom margin#, left margin#. So essentially I only set the Top Margin to 80 pixels which pushes the logo down 80 pixels.
For the Main Menu you do essentially the same thing as the Logo except float it to the right and push it down a bit more pixels.
Don’t forget to link the HTML file to the CSS file like so
Goes into
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
<head>
<link rel=”stylesheet” href=”style.css”
type=”text/css” />
<title>CSS Header</title>
</head>
<body>
My advice is to use this tutorial and then mess around with the settings until you figure out what they all do in CSS
Please Contact Us with any questions or comments
Thanks for reading
I hope you enjoyed the Tutorial!
Reply
Awesome tut! Very easy to follow and quite useful.
Thanks
Reply
You shouldn't be using those spans… they should be DIVS…
Reply
To put it even less subtly: spans are for INLINE content (i.e. content that appears on the same line), divs are for block elements.
Your page layout should be done using DIVS… So please remove this tutorial, as you're misleading a lot of people.
Reply
Yeah you're right it should be DIVs, I changed it from Spans to divs.
Reply