web design bottom headers

  • Timmy
  • Graduate
  • Graduate
  • Timmy
  • Posts: 104

Post 3+ Months Ago

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
  • quantumcloud
  • Proficient
  • Proficient
  • User avatar
  • Posts: 456
  • Loc: Dhaka, Bangladesh

Post 3+ Months Ago

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.
  • monoheinz
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Norway

Post 3+ Months Ago

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
  • Timmy
  • Posts: 104

Post 3+ Months Ago

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
  • Posts: 79
  • Loc: Norway

Post 3+ Months Ago

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
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

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
  • Timmy
  • Posts: 104

Post 3+ Months Ago

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
  • Posts: 79
  • Loc: Norway

Post 3+ Months Ago

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>

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 36 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.