How to Create a Header With CSS

Header section of a website is one of the most important parts because whenever visitor open website it comes right in front of him. In this post we provide an example of how to make a header with CSS.

Basically a website layout contains  4/5 major parts, that are; header, sidebar/s, main contents section, and footer section. Today we are discussing about the header section. Below we provided code for developing a header section with three div elements. For logo, navigation bar, and site description.

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="logo"></div>
<div id="navbar-container">
<div id="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<!-- Other links here...-->
</div>
</div>

<div id="int-site-container">
<div id="int-site">
</div>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
body{border:0; margin:0; padding:0;}
#navbar-container{background:#000000;}
#int-site-container{
background:url(img/int-bg.png) left top repeat-x;
height:166px;
}
#logo, #navbar, #int-site{
width:800px;
margin:0 auto;
}
/*------------------*/
/* LOGO */
#logo{height:54px;}

/*------------------*/
/* Nav Bar */
#navbar{
height:26px;
line-height:26px;
}
#navbar a:link, #navbar a:visited, #navbar a:hover{
color:#FFFFFF;
font-weight:bold;
margin-right:20px;
text-decoration:none;
}


Related posts

No Response

Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.