footer position
Moderator: General Moderators
footer position
I am trying to get my footer DIV to align to the the bottom of the page.
This is the current setup i have:
<div id="container"></div>
<div id="something></div>
<div id-="something else></div>
</div>
ect.....
<div id="footer">
The footer will align to the bottom of the window(not document) with
position: absolute;
bottom: 0px;
I have also tried to put the footer into "container" but that did not help.
Thankls
This is the current setup i have:
<div id="container"></div>
<div id="something></div>
<div id-="something else></div>
</div>
ect.....
<div id="footer">
The footer will align to the bottom of the window(not document) with
position: absolute;
bottom: 0px;
I have also tried to put the footer into "container" but that did not help.
Thankls
i have double checked my DIV open and closed tags. When i put the footer DIV in the body and not in the container div, the footer div positions its slef 100px from the top and i am unable to move it. I do have a div that is 100px from the top, but this should not effect where the footer.
I am really confused.
Should i just put the DIV into a table?
I am trying to avoide tables at all cost.
after looking on the internet i have seen that a lot of ppl have been having simular problems. All the solutions that i found did not work.
ill post my CSS and html code. It is not condenced so it is a little long.
Thanks
I am really confused.
Should i just put the DIV into a table?
I am trying to avoide tables at all cost.
after looking on the internet i have seen that a lot of ppl have been having simular problems. All the solutions that i found did not work.
ill post my CSS and html code. It is not condenced so it is a little long.
Thanks
CSS
Code: Select all
----- NEED PHP INTIGRATION-----*/
body/*ASSIGNS BODY PROPERTIES TO THE BODY TAG*/
{
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
background-color: #346432;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
#page_container
{
top: 0px;
left: 0px;
}
.spesheadMENU_BLUE
{
background-color: #336699;
}
/*-----------default link properties-----------*/
a:link
{
text-decoration: none;
color: #000000;
}
a:visited
{
text-decoration: none;
color: #000000;
}
a:hover
{
border-bottom: 1px solid;
color: #336699;
}
a:active
{
text-decoration: none;
color: #000000;
}
/*----------CONTENT BAR----------*/
.content_divider
{
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
background-color: #336699;
border: #ffffff;
border-style: solid;
display: block;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
text-align: left;
position: absolute;
top: 300px;
height: 25px;
width: 800px;
}
/*-----------HEADBOX "TOP OF BOXES"-----------*/
.headbox
{
font-weight: bold;
text-decoration: none;
font-size: 24;
font-family: Arial, Helvetica, sans-serif;
background-color: #336699;
color: #000000;
border: #000000;
display: block;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 5px;
padding-right: 2px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-style: solid;
margin-top: 25px;
margin-left: 20px;
margin-right: 24px;
width: 150px;
text-align: left;
}
/*-----------BOX LINKS----------*/
#content_menu
{
position: absolute;
left: 25px;
top: 0px;
width: 200px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #ffffff;
background-image: URL("assets/std/graystripes.gif");
}
a.content_menu_links:link
{
font-weight : normal;
text-decoration: none;
background-color: #ffffff;
color: #000000;
border: #000000;
display: block;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 5px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-style: solid;
margin-left: 20px;
margin-right: 24px;
width: 150px;
text-align: left;
}
a.content_menu_links:visited
{
font-weight: normal;
text-decoration: none;
background-color: #ffffff;
color: #000000;
border: #000000;
display: block;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 5px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-style: solid;
margin-left: 20px;
margin-right: 24px;
width: 150px;
text-align: left;
}
a.content_menu_links:hover
{
font-weight: normal;
text-decoration: none;
background-color #ffffff;
color: #336699;
border: #000000;
display: block;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 5px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-style: solid;
margin-left: 20px;
margin-right: 24px;
width: 150px;
text-align: left;
}
a.content_menu_links:active
{
font-weight: normal;
text-decoration: none;
background-color: #ffffff;
color: #000000;
border: #000000;
display: block;
padding-top : 2px;
padding-right : 2px;
padding-bottom : 2px;
padding-left: 5px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-style: solid;
margin-left: 20px;
margin-right: 24px;
width: 150px;
text-align: left;
}
/*-----------NOTE: NOT SURE IF I SHOUDL USE CSS OR PHP/JAVA SCRIPT TO DO THIS....
#top_nav_bg
{
height: 100px;
width: 800px;
position: absolute;
left: 0px;
top: 0px;
background-color: #336699;
z-index: 1;
}
#top_nav
{
position: abdolute;
left: 0px;
top: 25px;
height: 25px;
width: 800px;
background-color: #ffffff;
z-index: 10;
}
*/
#promo_content /*PROMO CONTENT*/
{
position: absolute;
left: 0px;
top: 100px;
height: 225px;
width: 800px;
background-color: #000000;
}
#promo_content_text/*SECTION TITLE*/
{
position: absolute;
top: 0px;
left: 25px;
height: 225px;
width: 475px;
color: #33ff22;
background-color: #ff5522;
}
#promo_content_img/*SECTION IMAGE*/
{
position: absolute;
top: 0px;
left: 500px;
height: 225px;
width: 275px;
color: #33ff22;
background-color: #447733;
}
/*----------CONTENT----------I*/
#content
{
position: absolute;
left: 0px;
top: 325px;
width: 800px;
}
/*----------CONTENT TEXT----------*/
#content_text
{
position: absolute;
left: 226px;
top: 0px;
width: 349px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #ffffff;
background-image: URL("assets/std/graystripes.gif");
}
#content_text p
{
margin-top: 25px;
margin-left: 25px;
margin-right: 25px;
}
/*----------CONTENT IMG----------*/
#content_img
{
position: absolute;
left: 575px;
top: 0px;
width: 200px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-image: URL("assets/std/graystripes.gif");
background-color: #44ff99;
}
/*FORMATTING OF IMAGES*/
#content_img p
{
margin-top: 25px;
margin-left: 24px;
margin-right: 24px;
border-color: #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
display: block;
border-style: solid;
}
#top_nav_bg
{
left: 0%;
height: 100px;
width: 800px;
background-color: #66ff11;
}
#footer
{
width: 800px;
background-color: #224455;
}HTML
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<title>
XHTML TEST
</title>
<link rel="stylesheet" href="xmlcss.css" type="text/css" />
</head>
<body>
<div id="page_container">
<div id="top_nav">
<div id="top_nav_bg">
</div>
</div>
<div id="promo_content">
<div id="promo_content_text">
PROMO CONTENT TEXT
</div>
<div id="promo_content_img">
PROMO CONTENT IMG
</div>
</div>
<div id="content_divider" class="content_divider">
<table width="800px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class = "spesheadMENU_BLUE" width="24px" height="25px"><!--LEFT SPACER-->
</td>
<td width="1px" height="25px" bgcolor="#FFFFFF">
</td>
<td class = "spesheadMENU_BLUE" width="200" height="25px"><!--MENU COL-->
</td>
<td width="1" height="25px" bgcolor="#FFFFFF">
</td>
<td class = "spesheadMENU_BLUE" width="549" height="25px"><!--CONTENT COL-->
</td>
<td width="1" height="25px" bgcolor="#FFFFFF">
</td>
<td class = "spesheadMENU_BLUE" width="24px" height="25px"><!--RIGHT SPACER-->
</td>
</tr>
</table>
</div>
<div id="content">
<div id="content_menu">
<div id="content_menu_headbox" class="headbox">
<a href="section_name">SECTION NAME</a>
</div>
<a class="content_menu_links" href="ll" title="ll"> Content_Menu</a>
<a class="content_menu_links" href="ll" title="ll"> Content_Menu</a>
<a class="content_menu_links" href="ll" title="ll"> Content_Menu</a>
<a class="content_menu_links" href="ll" title="ll"> Content_Menu</a>
<a class="content_menu_links" href="ll" title="ll"> Content_Menu</a>
<a class="content_menu_links" href="ll" title="ll"> Content_Menu</a>
<a class="content_menu_links" href="ll" title="ll"> Content_Menu</a>
</div>
<div id="content_text">
<p class="p1">CONTENT</p>
<p class="p2">CONTENT</p>
<p class="p3">CONTENT</p>
</div>
<div id="content_img">
<p class="p1"><img src="/assets/std/whitespacer.gif" height="120px" width="150px"></p>
<p class="p2"><img src="/assets/std/whitespacer.gif" height="120px" width="150px"></p>
<p class="p3"><img src="/assets/std/whitespacer.gif" height="120px" width="150px"></p>
</div>
</div>
</div>
<div id="footer">
THIS IS WHERE THE FOOTER GOES
</div>
</body>
</html>THANKS GUYS I HAVE NO IDEA WHY THIS IS NOT WORKING!!!
-
microthick
- Forum Regular
- Posts: 543
- Joined: Wed Sep 24, 2003 2:15 pm
- Location: Vancouver, BC
-
microthick
- Forum Regular
- Posts: 543
- Joined: Wed Sep 24, 2003 2:15 pm
- Location: Vancouver, BC
To make columns adjacent to each other, learn to float the divs.
http://glish.com/css/2.asp
http://www.thenoodleincident.com/tutori ... boxes.html
Lots of examples to learn from.
http://glish.com/css/2.asp
http://www.thenoodleincident.com/tutori ... boxes.html
Lots of examples to learn from.