PDA

View Full Version : DIV on Bottom of Page



tech_support
06-02-2006, 12:25 AM
Does anyone know how to put a <div> on the very bottom of the page? (Like http://ideas.live.com/ when you sign in)

Thanks in advance!

Jack
06-02-2006, 12:41 AM
Do you mean something that brings you back at the top of the page when you click on it?

tech_support
06-02-2006, 12:48 AM
No,

Like some kind of bar on the bottom of the page. (Using div's not frames)

You should see the page i was talking about! Then you'd understand what i meant ;)

jscheuer1
06-02-2006, 03:31 AM
No javascript required. As long as you don't have other content on your page positioned absolutely in such a way as it confuses the browser as to the true height of your page, something like so will work just fine:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div style="position:absolute;bottom:0;">Hi</div>
</body>
</html>

tech_support
06-02-2006, 06:44 AM
Thanks!

How about the centre of the page?

jscheuer1
06-02-2006, 06:58 AM
That's a little more complicated, this is the best primer that I've seen on that. The styling is a bit more complex than required but, it is that way to cover all possible situations:

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Use your browser's view source to see the code and read the text on the page for hints as to how to adapt it to any particular content.

tech_support
06-02-2006, 07:35 AM
**Scratches Head**

Can't seem to get it working

Here's the code: Maybe you should try ;)



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #003;
margin: 0px
}

#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}

.bodytext
{
font-size: 14px
}

.headline
{
font-weight: bold;
font-size: 24px
}

#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}

a:link, a:visited
{
color: #06f;
text-decoration: none
}

a:hover
{
color: red;
text-decoration: none
}

--></style>
</head>

<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
This text is<br>
<span class="headline">DEAD CENTRE</span><br>
and stays there!</div>
</div>
</div>
<div id="footer">
<a href="deadcentre4.html">view construction</a></div>
</body>

</html>


And the second page:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #003;
margin: 0px
}

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
text-align: center;
margin-top: -35px;
margin-left: -125px;
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}

.bodytext
{
font-size: 14px
}

.headline
{
font-weight: bold;
font-size: 24px
}

#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}

a:link, a:visited
{
color: #06f;
text-decoration: none
}

a:hover
{
color: red;
text-decoration: none
}

.captions
{
color: white;
font-size: 10px;
line-height: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: left
}

#caption1
{
padding-left: 6px;
border-top: 1px dashed #66c;
position: absolute;
top: 50%;
left: -180px;
width: 150px;
height: 120px;
visibility: visible;
display: block
}

#caption2
{
padding-left: 6px;
border-left: 1px dashed #66c;
position: absolute;
top: 92px;
left: 125px;
width: 250px;
height: auto;
visibility: visible;
display: block
}

--></style>
</head>

<body>

<div id="content">
<div class="bodytext"><div id="caption1" class="captions">&nbsp;<br>The red 'content' box is 250px wide, 70px high and is positioned absolutely 50% from the top - but it is given a negative top margin that is exactly half of its height, -35px. .</div>
This text is<br>
<span class="headline">DEAD CENTRE</span><br>
and stays there!
<div id="caption2" class="captions">To get it to centre horizontally, it is positioned 50% from the left and has a negative left margin that is exactly half of its width, -125px.</div>
</div>
</div>

<div id="footer">
<a href="deadcentre1.html">
back</a></div>

</body>

</html>

jscheuer1
06-02-2006, 08:17 AM
Why would you need two pages? Anyways, both of your examples work.

tech_support
06-02-2006, 09:37 AM
That was what I got from the source code.

jscheuer1
06-02-2006, 09:56 AM
That was what I got from the source code.

I can see that, but you did manage to modify it somewhat and to successfully add your bottom content. Did you have a specific question?

tech_support
06-02-2006, 10:06 AM
Yes! OK...

I want to create a 'dead centre' div that doesn't really on that horizon stuff.

For example,

You have a dead-centre div in the middle of the page. Someone clicks a link. the content changes. I want it, to stay in the middle. Because, when the user clicks the link, the div is going to resize.

And also, if you happen to cross another screen resolution, it will still stay dead-centre.

If you don't understand it, then say so :)

jscheuer1
06-02-2006, 05:10 PM
How are you going to do that? I'm thinking javascript. The same function that changes the content of the 'bodytext' division could be used to pass on the correct style updates for the content division's width, top and marginLeft styles. Something like so:


document.getElementById('content').style.width=newwidthnumber+'px'
document.getElementById('content').style.marginLeft='-'+newwidthnumber/2+'px'
document.getElementById('content').style.top='-'+newheightnumber/2+'px'

How you would get the newwidthnumber and newheightnumber would depend upon if they are known, you know what you want them to be, or not and upon how exactly you are inserting the new bodytext content.

tech_support
06-05-2006, 02:26 AM
OK, Thanks