alexville Posted February 5, 2009 Share Posted February 5, 2009 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 comment https://forums.phpfreaks.com/topic/143979-floating-bar-on-bottom-of-page/ Share on other sites More sharing options...
crashmaster Posted February 6, 2009 Share Posted February 6, 2009 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 https://forums.phpfreaks.com/topic/143979-floating-bar-on-bottom-of-page/#findComment-755577 Share on other sites More sharing options...
alexville Posted February 10, 2009 Author Share Posted February 10, 2009 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 https://forums.phpfreaks.com/topic/143979-floating-bar-on-bottom-of-page/#findComment-758880 Share on other sites More sharing options...
haku Posted February 11, 2009 Share Posted February 11, 2009 You can use the code crashmaster posted, just change 'absolute' to 'fixed'. Link to comment https://forums.phpfreaks.com/topic/143979-floating-bar-on-bottom-of-page/#findComment-759509 Share on other sites More sharing options...
The Little Guy Posted February 13, 2009 Share Posted February 13, 2009 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 https://forums.phpfreaks.com/topic/143979-floating-bar-on-bottom-of-page/#findComment-761613 Share on other sites More sharing options...
alphanumetrix Posted February 13, 2009 Share Posted February 13, 2009 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 https://forums.phpfreaks.com/topic/143979-floating-bar-on-bottom-of-page/#findComment-761710 Share on other sites More sharing options...
haku Posted February 13, 2009 Share Posted February 13, 2009 Amazing how those two posts just repeated the previous two responses to the OP. Link to comment https://forums.phpfreaks.com/topic/143979-floating-bar-on-bottom-of-page/#findComment-761744 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.