Last updated on January 4th, 2023 at 10:38 am
Now a days lot of websites are using this technique to enhance their look and feel. I have even seen these divs in most of the famous news portal which is used to scroll the breaking news details without disturbing the main view. This is really an interesting piece. Fixed div in top of page or bottom always make the website look good.
So I thought of sharing this simple technique with my users. This is a very simple approach.
Table of Contents
- Fixed div on the top
- Fixed div on the bottom
- Div with height changed
- Complete HTML with fixed div
- Demo
Fixed div on the top
How the CSS looks, assuming that message1 is the id of the div tag. This div has the opacity option so if you want it to be transparent modify that value accordingly.
#message1
{
padding:2px 4px;
left:0px;
margin:0px;
border:solid 2px #C0F0B9;
background:#999;
color:#48A41C;
font-family:Arial, Helvetica, sans-serif; font-size:16px;
font-weight:bold;
text-align:center;
display: block;
position: fixed;
top: 0px;
width: 100%;
height:5%;
opacity:0.7;
}
Fixed div on the bottom
This CSS will fix the div in the bottom of the webpage, All you have to do is change the top tag in the CSS script above within the div id message1 to bottom: 0px;
#message1
{
padding:2px 4px;
left:0px;
margin:0px;
border:solid 2px #C0F0B9;
background:#999;
color:#48A41C;
font-family:Arial, Helvetica, sans-serif; font-size:16px;
font-weight:bold;
text-align:center;
display: block;
position: fixed;
bottom: 0px;
width: 100%;
height:5%;
opacity:0.7;
}
Div with height changed
#message1
{
padding:2px 4px;
left:0px;
margin:0px;
border:solid 2px #C0F0B9;
background:#999;
color:#48A41C;
font-family:Arial, Helvetica, sans-serif; font-size:16px;
font-weight:bold;
text-align:center;
display: block;
position: fixed;
bottom: 0px;
width: 100%;
height:15%;
opacity:0.7;
}
Complete HTML with fixed div
This complete HTML code will fix the div on the top of the web page, script name is top.html
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=9" /> <style>
#top
{
padding:2px 0px;
top: 20px;
}
#message1
{
padding:2px 4px;
left:0px;
margin:0px;
border:solid 2px #C0F0B9;
background:#999;
color:#48A41C;
font-family:Arial, Helvetica, sans-serif; font-size:16px;
font-weight:bold;
text-align:center;
display: block;
position: fixed;
top: 0px;
width: 100%;
height:5%;
opacity:0.7;
}
</style>
</head><div id="top"><p><br>
Test line 1<br><p>
Test line 2<br><p>
Test line 3<br><p>
Test line 4<br><p>
Test line 5<br><p>
Test line 6<br><p><p>
Test line 7<br><p><p>
Test line 8<br><p><p>
Test line 9<br><p><p>
Test line 10<br><p><p>
Test line 11<br><p><p>
Test line 12<br><p><p>
Test line 13<br><p><p>
Test line 14<br><p><p>
Test line 15<br><p><p>
Test line 16<br><p><p>
Test line 17<br><p><p>
Test line 18<br><p><p>
Test line 19<br><p>
Test line 20<br><p>
<p>
Test line 21<br><p>
<p>
Test line 22<br><p>
<p>
Test line 23<br><p>
Test line 25<br><p><p>
Test line 26<br><p></div>
<div id="message1">
<a href="http://www.google.co.in">Google</a>
</a>
</body>
</html>
Once the above script is saved to different files(one for top and other for bottom fixed div) load it on a web browser then try scrolling the page down / up to see it working.
admin