Learn Adsense, SEO, Digital Marketing, Game Hacks & Online Money Making tips.


Thursday, 29 August 2013

How to add a fixed header like Facebook and Mashable on your website - Part 1

22:12 Posted by kashyap bhansali , , , , No comments
To learn to build a cool website from scratch you can follow this series of blog posts by Subscribing to our blog feed .

You will learn to build a Fixed header like on our website , means even though you scroll the top bar / header remains fixed in the top position . 

Prerequisites - HTML & CSS .

Basic knowledge in both HTML and CSS is required .

For Best Results use Google Chrome .. as experience might differ with different web browsers.

website having fixed header


Following is the code you can use :

HTML Code :

<html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="fixedheader">
<p class="top">Hello</p>
<div class="nav">
<a href=''>Home</a>&nbsp;&nbsp;
<a href=''>Register</a>
</div>
</div>
<div class="container">
</div>
<center>
<div class="main">
</div>
<center>
</body>
</html>

CSS Code:

.fixedheader{
background: black;
position: fixed;
width: 100%;
z-index: 999;
top: 0;
height: 50px;
opacity: 1;
}

.top{
font-family: comic sans ms;
color: red;
font-size: 24px ;
float: left;
margin-top: 5px;
padding-left: 20px;
}
.container{
width: 100%;
height:300px;
//background-color: blue;
//background: url(images.jpg) repeat bottom;
}

-->
.nav{
margin-top: 7px;
width: 400px;
float: right;
text-align: left;
font-size: 24px;
}

a{

color: #ccc;
font-family: "lato",Helvetica,Arial,sans-serif;
text-decoration: none;
font-size: 1em;
font-weight: bold;

}
body {
margin: 0;
padding: 0;
width: 100%;
background-color: transparent;
font-family: "lato",Helvetica,Arial,sans-serif;
font-size: 1em;
color: #575757;
//background: url(images.jpg) repeat bottom;
}

.main{
background-color: black;
border-radius: 30px;
width: 90%;
height: 700px;
padding: 20px;


}

Do subscribe to our RSS feed . To Register enter your email address in the right sidebar to Stay Updated on How to Build a Cool E-commerce Website from Scrath. 

Advertise on TechBum™ ?

0 comments:

Post a Comment

What do you think? We would love to know your views...