How to make a web 2.0 header and footer--tutorial.jcwcn.com

There are a few ways to make a web 2.0 header and footer one way is to use a fixed background image but this leads to problems when trying to figure out the height of your website / page. Another way is to have two layers set to 100% out side of your container so that it expands 100% accross the screen but this also causes problems with smaller screen sizes which if you have lots of images in the header or footer they will be forced down making the page fall apart in apearence. The way I will show you is to use a mix of both if you look at the top of this page you will see that we use this method having a background image to repeat-x giving the impression of filling the page top 100% while the layer realy is only 780px in width.
Web 2.0 designes are more used on blogs but its down to prefered taste with web design there is no right or wrong way to design a site.

Step one the background image.

For the header you will need to figure out what size the header and footer image should this should be the same height as the layer this will give the header and footer a better look the height will also give the header and footer there final height so that over flow will not distort the design.

Here is a few examples of headers.

Why so small in width? Well simple answer loading speeds because you can set the image to repeat along the top this takes away any real loading speeds making your site load fast keeps your visitors stick around even longer and you use less bandwidth. Of course depending on what sort of detail you want on your header its realy down to you. You can also make your header image made up of lots of parts like the one on this page.

The Css code for the background image.

body {
background-color: #FFFFFF;
background-image: url(../images/header-1.jpg);
background-repeat: repeat-x;
margin:0;
}

Some background image details for the code above:

background-repeat: repeat-x;
margin:0;

The background-repeat: repeat-x; sets the image to repeat from the top left to the top right it will not repeat down your page where as repeat-y; would. You must take this into mind when doing your header the height of the layer will also depend on the image size which will be explained later.

margin:0; takes away the padding around your container this will make you layer fit into the top of the page this is crutal when designing your site for a web 2.0 header beacuse you need to align your layer with the background image..

The Css code for the header.

#heading {
top:0px;
width:780px;
height:150px;
float: left;
overflow: hidden;
min-height:150px;
max-height:150px;
}

Details about the Css code for the header:

height:150px;
float: left;
overflow: hidden;
min-height:150px;
max-height:150px;

The height is set to 150px because the header image height is 150px you will want to keep these the same because when you add your content you will want to keep the content looking like its in the right place.

Float: left; is to do with centring your website if you dont know how to do this check out our tutorial. here...

overflow: hidden; min-height:150px; max-height:150px; these three combined will set the minimum height that will be shown in the browser, the max height and with the over flow the layer will remain at 150px in height even while adding content.

The footer.

The footer is basicly the same as the header overflow min height and max height how ever you do not put the footer layer inside a container and you set its width to 100% and apply a background image. The background image can be the same as the header just turn it upside down and you have a reversed copy of the header.

#footer {
left:0;
float:left;
width:100%;
max-height:150px;
min-height:150px;
overflow:hidden;
background-image: url(../images/footer-1.jpg);
background-repeat:repeat-x;
}

Putting it all togeather.

#header {
left:0px;
top:0px;
width:780px;
z-index:1;
overflow: hidden;
min-height: 150px;
max-height: 150px;
float: left;
background-repeat: repeat-x;
background-image: url(../images/header-1.jpg);
}
#footer {
left:0px;
width:100%;
z-index:2;
overflow: hidden;
min-height: 150px;
max-height: 150px;
float: left;
background-repeat: repeat-x;
background-image: url(../images/footer-1.jpg);
}
#container {
margin:0 auto;
width:780px;
}
body {
background-color: #FFFFFF;
background-image: url(../images/header-1.jpg);
background-repeat: repeat-x;
margin:0;
}

The Html.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]