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?

 

 

Try

 

CSS:

#bar {

position: absolute;

bottom: 0px;

width: 100%;

height:25px;

}

HTML

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

 

 

IT should work ;-)

Link to comment
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 comment
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 comment
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 comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.