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
- How to Create a Pure CSS ToolTip
- How to Make an Image Bigger when Hovered with CSS
- How to Create Non-Tiling Background Image with CSS
- How to Apply CSS to Forms
- How to Keep Margins Out of Link Lists in CSS
- How to Import Other CSS Files in a CSS File
- How to Make Div bahave as a Link With CSS
- How to Create Double Boders Using CSS
- How to Create a Page Curl Effect in CSS
- How to Insert Line Breaks Via CSS without br Tag

No Response
Post your response