Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

<div> ... position problem

Status
Not open for further replies.
KryptoS

KryptoS

Programmer
Feb 7, 2001
240
BE
Hey there, I have a webpage with some div's in it ...

<div id='logo' align='center' style='position:absolute; width:98%; height:69; left: 1%; top: 5px; visibility: visible'>
first div at the top of my page (for the logo)
</div>

<div id='menu' style='position:absolute; width:98%; height:20px; left: 1%; top: 93px; visibility: visible'>
second div, under the logo, with the menu
</div>

<div id='main' style='position:absolute; width:98%; left: 1%; top: 150px; visibility: visible'>
<?
include($somepage.".php");
?>
the main section of my website ... in this div I show different pages with an include
</div>

<div id='disclaimer' style='position:relative; width:98%; left: 1%; visibility: visible'>
disclaimer (bottom of the page)
</div>


This is working well, only the disclaimer. How can I show the disclaimer at the bottom of my page? Notice, that in the main section of my website I show different pages with different sizes.

The One And Only KryptoS
 
Sort by date Sort by votes
I don't know if you have to worry about writing the disclaimer OVER other text or not, but if you change the position attribute to 'absolute', you can mimic the following code which worked for me in IE6:

Code: 
<html>
<head>
<script>
function positionDisclaimer()
{
 disclaimer.style.top = document.body.scrollHeight - disclaimer.offsetHeight;
}
</script>
</head>
<body [b]onload='positionDisclaimer()'[/b]>
<div id='disclaimer' style='position:absolute; width:98%; left: 1%; visibility: visible'>
disclaimer (bottom of the page)
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

'hope this helps.

--Dave
 
Upvote 0 Downvote

>> How can I show the disclaimer at the bottom of my page? Notice, that in the main section of my website I show different pages with different sizes.

Surely if you place the DIV at the very end of your page, it will always appear at the bottom if you have no other absolutely positioned elements?

Dan
 
Upvote 0 Downvote
Are you looking to place the disclaimer at the bottom of the page or at the bottom of the text? If it is at the bottom of the text, you can easily make it by changing all the elements from position: absolute; to position: relative;. This will make all your previous elements push the disclaimer down.
 
Upvote 0 Downvote
This span in the body pushes the text to the bottom of the page regardless of how much text you have on the page ahead of the disclaimer (I don't know what happens when you add more text than the height can hold, I haven't got that far), but it is dependant on the height property in the div.

Code: 
<html>
<head>
	<title>Untitled</title>
<style type = "text/css">

}
body span {
      position: relative; 
      margin: 0; 
      padding: 0; 
      background-position: 100% 100%;
}
#content {
	  height:600px;
}
</style>
</head>

<body>
<div id="content">
This is some text at the top
<p>content content content</p>
<p>content content content</p>
<p>content content content</p>
<p>content content content</p>
<p>content content content</p>
<p>content content content/p>
<p>content content content</p>
<p>content content content</p>
<p>content content content</p>
</div>
<span>This is some text at the bottom</span>
</body>
</html>

Paul
 
Upvote 0 Downvote
You're trying to push the dislaimer (Footer) to the bottom?

use this code:
Code: 
<div id='disclaimer' style='position:absolute; [b]margin-top:#px[/b]; width:98%; left: 1%; visibility: visible'>
disclaimer (bottom of the page)
</div>


Or another option even, is on the DIV directly above the disclaimer, use this code:

Code: 
<div id='main' style='position:absolute; [b]margin-bottom:#px[/b]; width:98%; left: 1%; top: 150px; visibility: visible'>
<?
    include($somepage.".php");
?>
the main section of my website ... in this div I show different pages with an include
</div>

Be sure to change the "#px" to a setting which suits your needs. Preferbly 400, or more/less. You can even use 'em' instead of 'px' if you'd like.
More measure options for you to read up on, and study your CSS skills can be found at:

&quot;Hey...Where are all the chicks?&quot; -- unknown
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
310
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
313
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
106
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
80
tyutghf
tyutghf
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
98
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top