DIV at the Bottom of a Page?

MikeBrazeau

11-01-2007, 05:21 PM

Hey guys, me and my friend are recoding our school's website and we need some help with div's. I'll show the coding below and ask why I cant get a div at the bottom of the page like I'd like! Thanks!
---------------------------
HTML
---------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Woodlands Secondary School</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>
<div id="Top"><img src="Images/Banner/benebenbe copy.png"></div>
<div id="Navbar"><center><img src="Images/Buttons/navbar2.gif"><a href="index.html"><img src="Images/Buttons/home.gif" border="0"></a><a href="Academics.html"><img src="Images/Buttons/academics.gif" border="0"></a><a href="Electives.html"><img src="Images/Buttons/electives.gif" border="0"></a><a href="Athletics.html"><img src="Images/Buttons/athletics.gif" border="0"></a><a href="Carrer.html"><img src="Images/Buttons/carrer.gif" border="0"></a><a href="International.html"><img src="Images/Buttons/international.gif" border="0"></a><a href="Aboriginal.html"><img src="Images/Buttons/aboriginal.gif" width="170" height="30" border="0"></a><a href="Teacherlinks.html"><img src="Images/Buttons/Stafflinks.gif" border="0"></a><a href="Studentlinks.html"><img src="Images/Buttons/studentlinks.gif" border="0"></a><a href="Map.html"><img src="Images/Buttons/map.gif" border="0"></a><a href="Aboutus.html"><img src="Images/Buttons/About Us.gif" border="0"></a>
</center></div>
<div id="Body" >
<table id="Body-Table" background="Images/Buttons/bodytemp.gif">
<tr>
<td height="40" valign="middle"><center class="style3">
</center></td>
</tr>
<tr>
<td height="310 valign="top" valign="middle" ><div align= "left"">
<p><br>
</p>
</div></td>
</tr>
</table>
</div>
<div id="Bottom"><p>This is text</p></div>
</font>
</body>
</html>
---------------------------
CSS
---------------------------
body
{
background-color: #003366;
}

p
{
text-align: center;
text-decoration: bold;
}

.style3
{
color: #003366;
font-weight: bold;
}

#Top
{
Align: Center;
Position: absolute;
Left: 11px;
Top: 10px;
Width: 790px;
Height: 150px;
Background-color: #000000;
}

#Navbar
{
Position: absolute;
Left: 10px;
Top: 170px;
Width: 184px;
Height: 360px;
Background-color: #003366;
}

#Body
{
Position: absolute;
Left: 204px;
Top: 170px;
Width: 599px;
Height: 312px;
Background-color: #003366;
}

#Body-Table
{
Left: 204px;
Top: 170px;
Width: 599px;
Height: 312px;
Background-color: #003366;
}

#Bottom
{
Left: 10px;
Top: 560px;
Width: 800px;
Height: 30px;
background-color: #000000;
}
---------------------------
Screenshot
---------------------------
http://i133.photobucket.com/albums/q80/mikebrazeau/Website.jpg

**IGNORE THE BIG BLUE SCREEN ON THE RIGHT, IT'S MY SECOND MONITOR MESSING WITH THE SCREENSHOT**

Aceramic

11-01-2007, 05:33 PM

I just took a quick look at it, but try this:
#bottom {
position:absolute;
left: 10px;
top: 100%;
width: 800px;
height: 30px;
background-color: #000000;
}

(Please enclose your code in [ code]/[ /code] next time, thanks)

If you prefer, you could specify a pixel value for it, but that seems to work for me. (Actually, I'm using 110% on my page...)

MikeBrazeau

11-01-2007, 05:42 PM

Hey, I tried the thing with the CSS by doing...

#bottom
{
position: absolute;
left: 10px;
top: 100%;
width: 800px;
height: 30px;
background-color: #000000;
}

But now the DIV wont even show up on the page any more. It's simply not there.

VIPStephan

11-01-2007, 05:46 PM

Without having looked at it I suppose it’s just outside of your screen because top: 100% will position the top of the element 100% down the positioned parent, i.e. effectively outside that parent because the top border will be at the bottom. If you wanna position something at the bottom why don't you use the appropriate CSS property?

Aceramic

11-01-2007, 05:48 PM

Hey, I can't be perfect all the time. :)

MikeBrazeau

11-01-2007, 05:50 PM

So what would the correct CSS property be?

VIPStephan

11-01-2007, 07:18 PM

I thought the answer is obvious but… ah well, I’m gonna save the sarcastic comment.
Ever thought about using bottom: 0;? :rolleyes:

Aceramic

11-02-2007, 06:02 AM

See, now I learned something too... Dreamweaver apperently does not recognize the "bottom:" attribute, so I was unsure of exactly how to use it, since I had never actually seen it used...

Now I'm off to fix my code. :)

jlhaslip

11-02-2007, 06:45 AM

Dreamweaver apperently does not recognize the "bottom:" attributeI'll put that on the list.

Aceramic

11-02-2007, 08:18 AM

Or it could just be me being retarded... Or because I only have old versions... (8 and MX)

VIPStephan

11-02-2007, 11:14 AM

[…] Dreamweaver apperently does not recognize the "bottom:" attribute […]

You’ll learn even more here: I’ve said it numerous times and I will say it again: Don’t trust Dreamweaver’s design view! This is not a browser! I mean, OK, Dreamweaver 8 and especially CS3 do a relatively good job at displaying the sites pretty close to what they would appear but you should always preview it in real browsers (and the most standards compliant ones at first) because this is where your website will be seen eventually.

These are my steps: Write code, save, preview in browser, edit code, save, refresh browser preview, etc… After each step I’m saving and previewing in Firefox. Then you get reliable results.

kosstr12

11-02-2007, 12:17 PM

I'm sure you've already been told this, but please put your code in code tags next time.

effpeetee

11-02-2007, 02:19 PM

This seems to work on your original code.

#Bottom
{
position:absolute;
Left: 10px;
Top: 560px;
Width: 800px;
Height: 30px;
color:#ffffff;
background-color: #000000;
}

Frank

http://www.exitfegs.co.uk//AWoodlands%20Secondary%20School.html

Aceramic

11-03-2007, 06:16 AM

-snip-Don’t trust Dreamweaver’s design view! This is not a browser!-snip-

I can't remember the last time I've even looked at the design view in DW... lol