PDA

Click to See Complete Forum and Search --> : Vertical Alignment?

Drew06
02-18-2006, 01:43 PM
Have a page on my site, the footer than need to be at the bottom page, isnt working. It just stays by the other divs. Heres code

.footer
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
text-align: center;
vertical-align: bottom;
float: left;
width: 100%;
margin: 0px;
}

The vertical Alignment tag is not working to set it to the bottom of the page.
Here is site url.
http://www.geocities.com/eldergaming/index.htm
Kravvitz
02-18-2006, 01:53 PM
Except in tables, vertical-align only affects inline elements and is relative to the line-height, not the parent element. (http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align)

Align Elements To the Bottom of a Container (http://www.dynamicsitesolutions.com/css/align_elements_to_bottom_of_container/)
Drew06
02-18-2006, 02:04 PM
the css method of:

bottom: 0;

is not working.
Neczy
02-18-2006, 02:09 PM
You have many, many CSS statements, and I don't really feel like going through them to see what the problem is, but my guess is you need to add clear: both; to your footer CSS. For most situations the CSS for a fixed width 2 column layout is something like this:

<style type="text/css">
body {
font: 1em "Trebuchet MS", arial, verdana, sans-serif;
}

#container {
width: 760px;
margin: 0 auto;
text-align: center;
padding: 0;
}

#header {
width: 760px;
height: 30px;
}

#left-col {
float: left;
width: 450px;
padding: 0;
margin: 0;
}

#right-col {
float: right;
width: 310px;
padding: 0;
margin: 0;

#footer {
clear:both;
}
</style>


The HTML would look something like this:

<div id="container">
<div id="header"></div>
<div id="left-col"></div>
<div id="right-col"></div>
<div id="footer"></div>
</div>

Does that help any?
Drew06
02-18-2006, 02:21 PM
still isn't working.. Clear is doing nothing. I just tryied putting it in a table, and using the vertical-align just to see if that would work. It doesn't.
Kravvitz
02-18-2006, 03:30 PM
Perhaps you didn't add position:absolute?
Drew06
02-18-2006, 03:57 PM
still, nothing is working... absolute just moves it far to the left.
maybe its because im using the dreamweaver program to edit it?
Drew06
02-18-2006, 04:10 PM
current html and css code included in this post. If you add the position: absolute tag, all it does is move it right of the actual page. Also, since i'm posting all code. I also need a way to center the div class="all". It is my actual page, but i cant get it to be centered in the body.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Homepage</title>
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
body {
background-color: #333333;
margin: 0px;
padding: 0px;
}
.alpha {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: underline;
clear: none;
float: left;
width: 10%;
border-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #333333;
border-right-color: #333333;
border-bottom-color: #333333;
border-left-color: #333333;
height: auto;
margin: 0px;
}
.beta {
text-align: center;
clear: none;
float: left;
height: auto;
width: 80%;
margin: 0px;
line-height: normal;
}
.footer {
float: none;
clear: both;
text-align: center;
vertical-align: bottom;
bottom: 0 auto;
}
.all {
font-family: Arial, Helvetica, sans-serif;
width: 800px;
height: 825px;
background-color: #000000;
}
.style1 {
font-size: x-small;
font-weight: bold;
}
-->
</style>
</head>

<body>
<div class="all" align="center">
<table width="752" border="0" align="center">
<tr>
<td width="131" align="center"><img src="file:///C|/Documents and Settings/Drew/Desktop/My Pictures/death.gif" width="131" height="80" /></td>
<td width="476" align="center"><img src="file:///C|/Documents and Settings/Drew/Desktop/My Pictures/elderlogo.gif" alt="Elder Clan" width="476" height="63" /></td>
<td width="159" align="center"><img src="file:///C|/Documents and Settings/Drew/Desktop/My Pictures/death.gif" width="131" height="80" /></td>
</tr>
</table>
<hr width="100%" />
<div class="alpha">
<p align="center">Homepage</p>
<p align="center">Forums</p>
<p align="center">About Us</p>
<p align="center">Contact Us</p>
<p align="center">Links </p>
</div>
<div class="beta">
<h2 align="center">Welcome<br />
</h2>
<h4 align="center">News:</h4>
<p align="center" class="style1">2/17/06: New Site Design Started</p>
</div>
<div class="footer">Copyright © 2006, Elder Gaming, All Rights Reserved.</div>
</div>
</body>
</html>
Kravvitz
02-18-2006, 04:35 PM
.footer {
float: none;
clear: both;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
.all {
font-family: Arial, Helvetica, sans-serif;
width: 800px;
height: 825px;
background-color: #000000;
position: relative;
}

How to Center Elements with CSS (in IE5+/Win and other browsers) (http://www.dynamicsitesolutions.com/css/center_element/)
Drew06
02-18-2006, 05:47 PM
ahhh got the footer right now.
Now i just need to fix that the div with class "all" to line into the center of the page. I'll publish the updated version of the webpage at
http://www.geocities.com/eldergaming/index.htm
now if someone could just figure out how to center it, that'd be great.
Thanks again, Drew
WebJoel
02-18-2006, 06:00 PM
If the main content of the page is the id="all" thing and you give this some maximun width (like say, 768px, or 90%, whatever), then adding "margin-left:auto; margin-right:auto" to that id style should do the trick. This should make the left vs. right leftover space equal, effectively 'centering' the middle part.
There are possibly issues with any border(s) that you might have, and scrollbar width probably, but we're only talking about a few pixels either way at most...
I'm going to wade through your code and try to get a better understanding of what you're doing, but I think this is what you're looking for. :)
Drew06
02-18-2006, 06:28 PM
thanks