...

View Full Version : 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">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(false);
//-->
</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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum