Creating Fixed Top or Bottom Bar with CSS
Surely you often visit multiple news websites. And often some of the web is having a banner / ad placed on top of the page, or at the bottom of the page, but if you scroll your mouse, drag the page up or down but the ads still appear.
The question is how to do this? The easiest is to use css to make the bar has a fixed nature. Fixed nature is what makes a banner / ad has a position that does not change with the page but follow the scrollbar. You can make it in your own page with simple CSS.
Okay straight out, prepare one file with a name according to what you want, for example, fixedbar.html, then fill in like this ...
<html>
<head><title>Fixed Bar</title>
<style type=”text/css”>
#content
{
width:700px;
margin:100px auto;
font-family : Arial ;
font-size: 13px;
line-height: 20px;
}
#top_bar {
display: block;
position: fixed;
top: 0;
text-align: center;
background: #DFDFDF;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
color: #999999;
clear: both;
padding:6px 0;
width: 1030px;
height: auto;
margin: 0 110px 0 110px ;
}
.content_bar
{
font-family : Tahoma ;
font-size: 10px;
}
</style>
</head>
<body>
<div id=”content”>
How to make Fixed Bar with CSS :
<p>This is the content of your website.</p>
<p>This is the content of your website.</p>
<p>This is the content of your website.</p>
<p>This is the content of your website.</p>
<p>This is the content of your website.</p>
<p>This is the content of your website.</p>
<p>This is the content of your website.</p>
<p>This is the content of your website.</p>
</div>
<div id=”top_bar”>
<div>
<h2>put your ads / banner here</h2>
</div>
</div>
</body>
</html>
Save, then open the browser. The essence of this style is the elements:
<div id="top_bar">
and the style
#top_bar {
display: block;
position: fixed;
top: 0;
top can be replaced with bottom, according to position you want, top: 0 means placed at the top of the page, while the bottom: 0 placed at the bottom of the page.
posisiton: fixed is what makes the div element does not move anywhere, even if the page is slided down or up.
This simple CSS can make your website or blog looks more professional.
0 comments:
Post a Comment