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.
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>
<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™ ?
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.
.png) |
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>
<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...