Back To Website Design Forum

web design bottom headers

  • Timmy
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Sep 24, 2004
  • Posts: 104
  • Status: Offline

Post September 28th, 2004, 1:15 am

Hello all

How to you create a bar in HTML that is always exactly on the bottom of the screen no matter the screen size or resolution

Cheers
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 28th, 2004, 1:15 am

  • quantumcloud
  • Proficient
  • Proficient
  • User avatar
  • Joined: May 11, 2004
  • Posts: 456
  • Loc: Dhaka, Bangladesh
  • Status: Offline

Post September 28th, 2004, 1:37 am

That should not take anything exotic. Just make a table with 100%width and a bar image as its background. Place the table after everything else in your html document. If you don't want anything fancy, you can even use an HR. The trick is to place it just before the </html>. That's all.
Web development company : quantumcloud

Web design company : web.com.bd
  • monoheinz
  • Student
  • Student
  • User avatar
  • Joined: Sep 27, 2004
  • Posts: 79
  • Loc: Norway
  • Status: Offline

Post September 28th, 2004, 4:08 am

To place a bar at the bottom of the screen, no matter how much content there is -
CSS:
Code: [ Select ]
#bottom-bar{
position:fixed;
bottom:0px;
width:100%;
height:20px;
background-color:#ff0000;
}
  1. #bottom-bar{
  2. position:fixed;
  3. bottom:0px;
  4. width:100%;
  5. height:20px;
  6. background-color:#ff0000;
  7. }

html
Code: [ Select ]
...
...
<div id="bottom-bar"></div>
...
...
  1. ...
  2. ...
  3. <div id="bottom-bar"></div>
  4. ...
  5. ...

This will display a red bar with height 20px and width 100% at the bottom of the screen, even while you scroll.
This doesn't work as planned in IE, as it will only result in a bar at the very bottom of the page.
  • Timmy
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Sep 24, 2004
  • Posts: 104
  • Status: Offline

Post September 28th, 2004, 2:14 pm

Thanks for the replies,

I have tried both methods that were suggested to me and neither of them have worked :cry:

Any more ideas?
  • monoheinz
  • Student
  • Student
  • User avatar
  • Joined: Sep 27, 2004
  • Posts: 79
  • Loc: Norway
  • Status: Offline

Post September 28th, 2004, 2:36 pm

My method works in latest IE, Opera and Firefox. Post your code, it'll make it easier to see what you're doing wrong.
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jun 10, 2004
  • Posts: 421
  • Loc: Rochester or Albany, NY
  • Status: Offline

Post September 28th, 2004, 6:14 pm

if you mean always on the bottom of the screen...as in even if u scroll down the page...then your going to have to make a frame page....
  • Timmy
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Sep 24, 2004
  • Posts: 104
  • Status: Offline

Post September 29th, 2004, 1:08 am

Managed to find a way of doing it that looks proper smart:

<html>
<head>

<style type="text/css">
body {margin:0px;}
</style>

</head>

<body>


<div style="position:absolute; bottom:0px; left:0px; width:100%; background-color:#0000ff;">
Insert text or pictures here
</div>

</body>

This inserts a bar along the bottom, you can change its colour or insert tables, text and pictures.

:D sweet
  • monoheinz
  • Student
  • Student
  • User avatar
  • Joined: Sep 27, 2004
  • Posts: 79
  • Loc: Norway
  • Status: Offline

Post September 29th, 2004, 1:35 am

OK, now see what happens when the height of the content above the bottom bar exceeds the height of the browser window.
Code: [ Select ]
<html>
<head>
<style type="text/css">
body{margin:0px;}
</style>
</head>
<body>
<div style="height:1500px;">Crash!</div>
<div style="position:absolute; bottom:0px; left:0px; width:100%; background-color:#0000ff;">
Insert text or pictures here
</div>
</body>
</html>
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body{margin:0px;}
  5. </style>
  6. </head>
  7. <body>
  8. <div style="height:1500px;">Crash!</div>
  9. <div style="position:absolute; bottom:0px; left:0px; width:100%; background-color:#0000ff;">
  10. Insert text or pictures here
  11. </div>
  12. </body>
  13. </html>

Interesting, the bottom bars jumps up the screen as you scroll. Change the position:absolute with position:fixed. In Opera and Firefox the bar is now placed at the bottom of the screen. In IE it's placed at the bottom of the page. If you want to have it at the bottom of the page in Opera and Firefox too then use this code
Code: [ Select ]
<html>
<head>
<style type="text/css">
body{margin:0px;}
#bottom{
position:fixed;
bottom:0px;
left:0px;
width:100%;
background-color:#0000ff;
}
body>div#bottom{
position:relative;
}
</style>
</head>
<body>
<div style="height:1500px;">Crash!</div>
<div id="bottom">
Insert text or pictures here
</div>
</body>
</html>
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body{margin:0px;}
  5. #bottom{
  6. position:fixed;
  7. bottom:0px;
  8. left:0px;
  9. width:100%;
  10. background-color:#0000ff;
  11. }
  12. body>div#bottom{
  13. position:relative;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div style="height:1500px;">Crash!</div>
  19. <div id="bottom">
  20. Insert text or pictures here
  21. </div>
  22. </body>
  23. </html>

Page 1 of 1

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 143 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.