Jump to content

Floating Bar on Bottom of Page?


alexville

Recommended Posts

Im not sure if this would be HTML or CSS, but im trying to get a bar on the bottom of my visitor's web browser when they visit my site, and so that it stays there when they scroll the page, much like on Facebook's chat.

 

Anyone know how to do this?

Link to post
Share on other sites

Im not sure if this would be HTML or CSS, but im trying to get a bar on the bottom of my visitor's web browser when they visit my site, and so that it stays there when they scroll the page, much like on Facebook's chat.

 

Anyone know how to do this?

 

 

Try

 

CSS:

#bar {

position: absolute;

bottom: 0px;

width: 100%;

height:25px;

}

HTML

<div id="bar">Content</div>

 

 

IT should work ;-)

Link to post
Share on other sites

IT should work ;-)

 

Thanks for the reply, but it doesn't work.

 

What I want is to have a bar that stays on the bottom of the visitors browser window, even if they scroll down the page. So That it is always in view. I dont want to use frames for this, but is it possible?

Link to post
Share on other sites

You do a absolute position...

 

<html>
<head>
<style>
body{padding:0;margin:0;}
.myFloatBar{
   bottom:0;
   left:0;
   width:100%;
   position:fixed;
   background-color:#F00;
}
</style>
</head>
<body>
<div class="myFloatBar">This is a bar at the bottom</div>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
<p>Some Text</p>
</body>
</html>

Link to post
Share on other sites

Im not sure if this would be HTML or CSS, but im trying to get a bar on the bottom of my visitor's web browser when they visit my site, and so that it stays there when they scroll the page, much like on Facebook's chat.

 

Anyone know how to do this?

 

 

Try

 

CSS:

#bar {

position: absolute;

bottom: 0px;

width: 100%;

height:25px;

}

HTML

<div id="bar">Content</div>

 

 

IT should work ;-)

 

No. You're wrong about the absolute position. That will keep it in one place when you scroll. It has to be defined as fixed.

 

Actuall, this will work:

 

CSS:

#bar {
position: fixed;
width: 100%;
float:bottom;
height:25px;
}

 

 

HTML

<div id="bar">Content</div>

 

Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.