|
CSS - Having Trouble Aligning Footer To End Of Page! >_<
Hi everyone,
I'm having some trouble positioning this footer to the bottom of the page. I'd like for the footer box to display directly under the content/navigation bar, with a gap of four pixels between the respective boxes. In action: http://www.stabhead.com/css/index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Layout</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
color: blue;
text-align: center;
margin: 5px 0px 0px 0px;
}
#container {
position: relative;
width: 981px;
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
#topbar {
position: absolute;
width: 981px;
height: 95px;
top: 0px;
background-color: #DDDDDD;
}
#loginbox {
position: absolute;
width: 249px;
height: 92px;
top: 97px;
background-color: #FFBD72;
}
#adbar {
position: absolute;
top: 97px;
left: 251px;
width: 730px;
height: 92px;
background-color: #949494;
}
#navbar {
position: absolute;
top: 193px;
left: 0px;
width: 117px;
background-color: #DDDDDD;
}
#content {
position: absolute;
top: 193px;
left: 121px;
width: 860px;
background-color: #DDDDDD;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 64px;
background-color: #DDDDDD;
}
-->
</style>
</head>
<body marginheight="0" marginwidth="0">
<div align="center">
<div id="container">
<div id="topbar">topbar</div>
<div id="loginbox">loginbox</div>
<div id="adbar">adbar</div>
<div id="navbar">navbar</div>
<div id="content">content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
The content may consist of something that is 500 pixels in height, or 10,000 pixels - it totally depends on how many words or images are in there, so the footer needs to grip on to the bottom of the content and stretch across the whole of the bottom of the page. If anyone could help me out here, it would be greatly appreciated. Similar TutorialsHere's the html and css for http://www.pxgo.com/lifepak-prime.php - What I really need help with is aligning the footer (I know absolute positioning is bad for me, but relative doesn't work either) and floating my image (which for some reason vanished once I added the floatleft class). Thanks in advance for any help! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>Lifepak Prime</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css"></HEAD>
<BODY>
<?php
include ("include/head.txt");
?>
<?php
include ("include/menu.txt");
?>
<div id="content"><h2>Lifepak Prime</h2><img class="floatleft" src="graphics/lifepak-prime.bmp" width="192" height="192" alt="Lifepak Prime" />
Lifepak Prime contains all the nutrition in Lifepak anti-aging formula <i>and more</i>. Add quality years to your life by providing the vitamins, minerals, and trace elements your body needs to protect and regenerate cells.
<br><br>Lifepak Prime all-natural dietary supplements addresses the specific needs of men over 40 and post-menopausal women with BioGinkgo 27/7 extract (ginkgo biloba), milk thistle, glutathione, alpha-lipoic acid, coenzyme Q10, and grape seed extract.
<br><br>Lifepak Prime provides 150 IU, or 500 % daily value, of vitamin E, increased levels of B6, B12, and zinc for optimal nutrition intake. Lifepak Prime also provides unique dietary components for bone health, as well as those that support memory and circulation.
<br><br>My family uses Lifepak so I'll be happy to answer questions about Lifepak on the <a href="http://www.pxgo.com/discuss/viewforum.php?f=9">Lifepak message board</a>. We'd also love to hear from other people who are using Lifepak.
<br><h2>Lifepak information</h2>Lifepak Prime is optimized for men over 40 and post-menopausal women. There is also a Lifepak for pregnant and lactating women (Lifepak PreNatal), Lifepak for woomen from 18-menopause (<a href="lifepak-women.php">Lifepak Women</a>), and adults from 18 to 40 (<a href="lifepak.php">Lifepak anti-aging formula</a>).
<br><br>Lifepak is a vitmain, mineral, phytonutrient supplement. Lifepak is much more than a multiple although it does address common deficincies:
<ul><li>Vitamins A, E, and B6
<li>Zinc, iron, calcium, and magnesium for healthy bones
<li>Alpha-lipoic acid, vitamins B9 (folic acid), B12, C, E, flavinoids, and carotenoids for the anti-aging processes of cellular protection and cellular regeneration.
</ul></div>
<br><br>
<?php
include ("include/ads.txt");
?><br><br>
<?php
include ("include/footer.txt");
?>
</BODY></HTML>
Code: BODY { margin-left: 0%; margin-right: 0%; margin-top: 0%; font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR:#000000; BACKGROUND-COLOR:#ffffff; }
A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
FONT {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; FONT-FAMILY: verdana, arial, sans-serif}
.titular {COLOR: #000000; background-color:#238c13;}
.negro {background-color:#000000; color: #FFFFFF; FONT-SIZE: 12px; FONT-FAMILY: verdana, arial, sans-serif; font-weight:bold;}
.floatleft {float: left; border=1; padding=1; margin: 4px;}
a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#head {
font-family:verdana, arial, sans-serif;
color:#000000;
font-size:16px;
font-weight:800;
background:#238c13;
padding:0px;
}
#head h1 {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-size:18px;
font-weight:800;
z-index:1;
}
#head a,
#head a:link,
#head a:visited,
#head a:active,
#head a:hover {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-family:verdana, arial, sans-serif;
font-size:18px;
font-weight:800;
text-decoration: none;
}
/* All the content boxes belong to the content class. */
#content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:200px;
margin:30px 170px 20px 220px;
border:0px;
background-color: #ffffff;
padding:10px;
color: #000000;
font:bold 15px verdana, arial, sans-serif;
z-index:5;
}
#content h2 {font:bold 16px verdana, arial, sans-serif; padding:15px;}
#content a:link { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:visited { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:active { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:hover { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#navi {
position:absolute;
width:200px;
top:120px;
left:20px;
border-right:#238c13 2px dotted;
background-color:#ffffff;
padding:0px;
color:#238c13;
font:bold 13px verdana, arial, sans-serif;
z-index:2;
}
#navi A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#ads {
position:absolute;
width:130px;
top:100px;
right:10px;
border-left:#238c13 2px dotted;
background-color:#ffffff;
padding:10px;
z-index:3;
}
#footer {
position:absolute;
width:100%;
top:730px;
margin:10px 0px 0px 0px;
padding:10px 0px 0px 0px;
border-top:#238c13 2px dotted;
background-color:#ffffff;
z-index:4;
}
#footer A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
HI there I am wondering if anyone can help with a css issue I am strugging to resolve. The url is simplyroomsandsuites co uk (forward slash) blog You can see where the footer image is floating left.. I have tried to float it centrally but it disappears. Thanks for any help. .footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;} In my footer I'm having a problem with my links aligning left. I'm not sure how I would go about coding it so that Promotional Kit aligns left underneath Headshot v2. I tried text-align: left in ul, li, and in the footer link section but nothing. I may need to change the layout all together which is fine, but I could use your help. Thanks in advance http://www.lonniebruhn.com/sitelab/ and here is the css code: Code: body, html {
font-size: 100%;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
background-color: #000;}
#container {
margin: 0px auto 90px auto;
width: 940px;
text-align: left;
background-image: url(images/container-bg.jpg);
background-repeat: no-repeat;
background-color: #1d1d1d;;
overflow: hidden}
object {
display:block;
z-index:1}
#header {
width: 920px;
position: relative;
top: 5px;
margin: 0 auto;
background-color: #333;
border: 2px #000 solid;}
#header h1 {color: #ffffff;
font-size: 2em;
font-family: Impact, "Arial Black", Trebuchet, sans-serif, "Times New Roman";
line-height: 90%;
text-align: center;
margin: 0;
padding: 10px;}
.quote {
position: relative;
text-align: right;
Left:10px;
font-family: "Arial Black", Verdana, Helvetica, Arial, sans-serif;
color: #ffcc33;
font-size: .5em;
font-style: italic;
}
#logo {
position: relative;
margin:0 auto;
background-image: url(images/header-logo.jpg);
background-repeat: no-repeat;
width:920px;
height:120px;
border: 2px #000 solid;
}
#left {
margin: 15px 10px 0px 10px;
width:180px;
position: relative;
width: 180px;
float: left;
border: 2px #000 solid;
background-color: #333;}
#left h1{
height:20px;
margin: 10px auto;
color: #ffcc33;
font-family: Impact, "Arial Black", Verdana, Helvetica, Arial, sans-serif;
font-size: 1.50em;
text-align: center;
text-decoration: underline;
}
#dates {
position: relative;
margin: 0 auto;
text-align: left;
}
#dates ul {
margin:0;
color: #ffffff;
font-family: Verdana, Arial, sans-serif;
font-size: .625em;
font-weight: bold;
position: inherit;}
#dates li {
padding: 10px 0 5px 5px;
list-style-image: url(images/1.gif);
display: list-item;
margin: 0px 18px 15px -15px;
list-style-type: none;
text-align:left;
border-bottom: 2px #ffcc33 dashed;}
#mainbody {
position: relative;
background-color:#333;
width: 480px;
min-height:320px;
margin: 15px auto;
right: 20px;
border: 2px #000 solid;
}
#right {
position: relative;
width: 220px;
background-color: #333;
min-height: 320px;
float: right;
border: 2px #000 solid;
margin-top: 15px;
margin-right: 10px;}
#right h1 {
text-align: center;
color: #ffcc33;
font-family: Verdana, Arial, sans-serif;
font-size: 1.25em;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 10px;}
#footer-wrap {
background-image: url(images/footer-bg.gif);
width: 100%;
height: 78px;
z-index: 2;
left: 0;
bottom: 0;
position: fixed;
text-align:left}
#footer-left {
position:fixed;
width: 244px;
min-height:68px;
margin-top: 5px;
border-right: 2px #000 solid;
left:-25px;
padding-right: 25px;
float:left;}
#footer-left ul{
display: block;
margin:0;
width:244px;
list-style-type: none;
}
#footer-left li {
display: inline;
margin-right:10px;
}
#footer-wrap a:link, #footer-wrap a:visited, #footer-wrap a:active {
color: #000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .75em;
text-decoration: none;
}
#footer-wrap a:hover {
text-decoration: underline;}
#footer-center {
position: fixed;
}
#footer-right {
position: fixed;
}
p {
margin:0 25px 25px 25px;
font-size: .875em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
color: #fff;
text-align: justify;}
#links{
text-align: right;
padding: 2px;
}
#links a:link, #links a:visited, #links a:active {
right:8px;
font-weight: bold;
font-size: 0.625em;
font-family: Verdana, Arial, sans-serif;
color: #cccccc;
font-family: Verdana, Arial, sans-serif;
text-decoration: none;
position: relative;}
#links a:hover {
text-decoration: underline;}
#links ul {margin: 0; list-style-type:none}
#links li {
display: inline;
}
#menu
{ height: 15px;
width: 920px;
height:22px;
position: relative;
margin: 0 auto;
background-color: #333;
border-left: 2px #000 solid;
border-bottom: 2px #000 solid;
border-right: 2px #000 solid;}
#menu ul{margin: 0 auto;}
#menu li
{ float: left;
margin: 0;
padding: 0;
list-style: none;
}
#menu li a
{ display: block;
height: 20px;
text-decoration: none;
padding: 0 19px 0 19px;
border: 2px #000000 solid;
text-transform: uppercase;
font-size: 0.75em;
font-family: Verdana, Helvetica, Arial,sans-serif;
color: #ccc;
background-color: #666;}
#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
{ border: 2px #000000 solid; background-color: #3f3f3f;
}
.postdate {
display:block;
margin: 10px 20px 20px 20px;
padding-left: 10px;
color: #ffcc33;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.75em;
background-color: #000;}
.post p {
margin: 0px 5px 0px 5px;
font-size: .75em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
padding: 10px;
padding-top: 20px;
line-height: 120%;
}
.post h1 {
margin: 0px 5px 0 5px;
color: #ffcc33;
font-size: 1.2em;
font-family: Verdana, Georgia, sans-serif, "Times New Roman";
padding: 10px;
text-decoration: underline;}
.post h2 {
margin: 0px 20px 0 20px;
color: #ffcc33;
font-size: .6em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
padding: 15px 10px 5px 10px;
text-transform: uppercase;
border-bottom: 8px #666 double;}
.blue {
color: #3399ff;;
margin: 5px 0 10px 0;
display: block;}
.video {
width: 190px;
margin: 10px auto 0px auto;
z-index: 1}
I'm working on a new page at http://www.plumeriawebdesign.com/webdevgirl/ and am having problems aligning the middle div column. In IE it shows approximately 25px below the dark blue date bar while it shows correctly in FF. I'm also having problems with it extending further than the 100% wrapper div. Here is my HTML Code:
<body>
<div id="wrapper">
<div id="top" align="center"><img src="images/webdev_02.gif" alt="Exceptional web design made affordable"/></div>
<div id="nav">
<?php
$today = date("D M d Y");
echo "$today\n";
?>
</div>
<div id="left">left column</div>
<div id="right">right column</div>
<div id="middle">middle column</div>
</div>
</body>
CSS is he Code:
/* CSS Document */
html {
height: 100%;
}
body {
margin: 0px 0px 0px 0px;
background-color:#333;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
position: relative;
min-width: 600px;
width: 100%;
height: 100%;
color: #333;
}
#wrapper {
width: 100%;
height: 100%;
}
html>body #wrapper {
height: 100%;
}
#left {
float: left;
left:0px;
top:113px;
width:12%;
background-color: #a2cde3;
border-right: 2px solid #333;
padding: 5px 5px;
}
#middle {
top: 0px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 12%;
margin-right:12%;
padding: 5px 5px;
height: 100%;
min-width: 360px;
width: 76%;
background-color: #626262;
color: #000;
}
html>body #middle {
margin-left: 12%;
margin-right:12%;
}
#right {
float: right;
top: 0;
width:12%;
background-color: #a2cde3;
border-left: 2px solid #333;
padding: 5px 5px;
}
#top {
min-width: 600px;
width: 100%;
height: 100px;
background-color: #FFF;
color: #FFF;
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #top {
height:100px;
}
#nav {
top: 100px;
left: 0;
min-width: 600px;
width: 100%;
height: 12px;
background-color: #005698;
color: #e4e4e4;
vertical-align: bottom;
text-align:left;
text-indent: 5px;
clear: both;
}
www.devwebsites.com is the url. You wil see the login box below teh ads and I am trying to get the login stuff to be next to the ads. heres my code Code: <table cellspacing="0" cellpadding="0" border="0" style="padding-left:12px;margin-top:-9px; padding-top:3px;"> <tr> <td class="header"> <script type="text/javascript"><!-- google_ad_client = "pub-0405738179168907"; /* 468x60, created 9/20/08 */ google_ad_slot = "6289309218"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <form method="post" id="commentform" action="" name="smelogin"> Username : <div><input type="text" id="username" size="11" name="username" style="background-image:url(/images/u.gif); background-position:left; background-repeat:no-repeat ; height: 18px; width:15%; display:block; border-bottom:#000000 solid 1px; padding-left:18px;" maxlength="21" /></div> <div> Password : <input type="password" style="background-image:url(/images/p.gif); background-position:left; background-repeat:no-repeat ; height: 18px;width:15%; display:block; border-bottom:#000000 solid 1px; padding-left:18px;" id="password" size="11" name="password" maxlength="25" /></div> </td> </tr> </table> <div align="center"><input type="submit" name="login" value=" Login "> </div> <p><a style="font-size: 8pt;background:transparent;padding:0px;" href="/register.html"><div>[ Signup ]</div></a> Help? Just practicing but can anyone tell me why my footer doesn't stick to the bottom of the page? Also why does my page scroll sideways when I include my table? http://csstest.dmsbdesign.com/templates/templates%201/ css here Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
background-color:#F7F7F7;
height:100%;
}
.quicklink{
padding-bottom:10px;
padding-top:10px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
list-style-type:none;
width:220px;
text-align:left;
padding-left:5px;
}
#container{
background-color:#E1E1E1;
width:1000px;
margin-left:auto;
margin-right:auto;
padding-bottom:100px;
}
#header{
background-color:#666666;
width:1000px;
height:100px;
margin-left:auto;
margin-right:auto;
}
#logo ul{
margin:0px;
position:relative;
left:-15px;
bottom:60px;
}
#logo li{
text-align:right;
list-style-image: none;
list-style-type: none;
}
#logo{
position:relative;
left:5px;
top:10px;
}
#logo img{
height:75px;
width:75px;
}
#logo h1{
position:absolute;
margin:0px;
left:75px;
top:15px;
}
#logo h2{
position:absolute;
margin:0px;
left:75px;
top:45px;
}
#nav{
background-color:#999999;
width:1000px;
height:25px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#nav ul{
margin-top:0px;
}
#nav li{
display:inline;
list-style-type:none;
padding-right:80px;
}
#pictureDiv{
margin-top:10px;
width:940px;
height:240px;
margin-left:auto;
margin-right:auto;
background-color:#CCCCCC;
padding: 5px;
border:1px #000000 solid;
}
#contentDiv tr {
}
#pictureDiv h1{
position:relative;
margin:0px;
width:200px;
font-size:24px;
left:735px;
top:-150px;
color:#ff0000;
}
#pictureDiv img{
position:relative;
left:10px;
}
#contentDiv{
margin-top:10px;
width:900px;
height:325px;
margin-left:auto;
margin-right:auto;
}
#contentDiv table{
position:relative;
top:-510px;
left:550px;
width:375px;
}
#contentDiv tr{
}
#contentDiv td {
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
padding-bottom:10px;
padding-top:10px;
}
#contentDiv p{
width:75%;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
}
#contentDiv h1{
margin:5px;
}
#footer{
position:relative;
z-index:-1;
margin-top:-50px;
background-color:#666666;
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
}
html here Code: <!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=utf-8" />
<title>My Page</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="../../images/Placeholder.png" />
<h1> My Webpage </h1>
<h2> My Slogan </h2>
<ul>
<li> Phone Number: 555-555-5555 </li>
<li> Address: 123 Main St </li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
<li>Nav 5</li>
<li>Nav 6</li>
<li>Nav 7</li>
</ul>
</div>
<div id="pictureDiv">
<img src="../../images/png/Placeholderstreched.png" />
<h1>Maecenas sollicitudin ultricies neque ut condimentum. Cras id dui dui?</h1>
</div>
<div id="contentDiv">
<h1>Nam vitae lorem!</h1>
<p style="width:500px;">Praesent molestie orci semper lectus aliquet ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ut diam faucibus magna tempus viverra quis id lorem. Quisque ac pulvinar erat. Nullam pretium, ipsum non cursus facilisis; arcu massa viverra quam, sit amet venenatis arcu elit sit amet arcu. <br /> <br />Proin tempus blandit ante non ultrices. Fusce posuere adipiscing metus, a dapibus risus tristique a! Integer faucibus urna commodo metus suscipit sollicitudin. Duis gravida gravida rhoncus. Sed eget felis in risus euismod imperdiet. Proin quis libero quis purus tincidunt facilisis at non massa. Integer auctor aliquam lorem eget sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<ul style="position:relative; right:20px;">
<li>Suspendisse sagittis leo leo. Lorem.</li>
<li>Suspendisse elit velit, scelerisque ut.</li>
<li>Nullam nec magna risus, adipiscing.</li>
<li>Etiam luctus ullamcorper libero ac.</li>
<li>Aenean pretium orci mollis orci.</li>
</ul>
<ul style="position:relative; top:-116px; left:250px;">
<li>In quis arcu justo, sed.</li>
<li>Nullam elementum varius.</li>
<li>Nulla egestas vehicula erat.</li>
<li>Nam congue rhoncus gravida.</li>
<li>Pellentesque habitant morbi tristique.</li>
</ul>
<table width="290" border="0" cellspacing="0">
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="middle"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />
Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
</table>
</div>
</div>
<div id="footer">content for id "footer" goes here</div>
</body>
</html>
I am trying to get a footer to position properly on all pages of a site. Because of some absolute positioning I have done using CSS, I resorted to pushing the footer to be formatted that way also. Even though the absolute position is at 670 it is off the bottom of a 1024 x 768 standard webpage for some reason. What I would like to do is get the footer just to display after the last element on the page but I understand that isnt possible since I am using CSS to absolutely position things. The code is something like this: Code:
<title>Program Title Stuff</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body background="#ffffff">
<img src="images/top-banner.jpg">
<div id="menubar">
<script src="bubblemenu.js"></script>
</div>
<p id="separator">
<img src="images/pagesep.jpg">
</p>
<p id="title">Section Title Goes Here</p>
<div id="contentblock">
{ some content goes here such as tables or text }
</div>
<?php
include("footer.inc");
?>
</body>
</html>
The footer.inc has just your typical links with a separator. The CSS to go with all this is basically font, color, and size. Most elements are absolutely positioned...here is the representative CSS: Code:
body {
margin: 0;
padding: 0;
border: none;
}
a:link {color:#6C9999; text-decoration:none};
a:visited {color:#990099; text-decoration:none}
a:hover {color:#CC3333; text-decoration:none}
#menubar {
position: absolute;
left: 25px;
top: 95px;
border: none;
text-decoration: none;
}
#separator {
position: absolute;
left: 250px;
top: 65px;
}
#title {
font-family: PenultimateLight, Tahoma, "Times New Roman", "MS Sans Serif";
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #3A657B;
position: absolute;
left: 275px;
top: 75px;
}
#contentblock {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
position: absolute;
left: 275px;
top: 110px;
height: 500px;
width: 650px;
}
#footer3 {
position: absolute;
top: 550px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
left: 285px;
}
#footer4 {
position: absolute;
top: 565px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
left: 370px;
font-style: normal;
}
I'd like to get away from absolutely placing the footer, as the content on each page varies in length. But I cant just center the footer, because other elements are blocked absolute and the footer ends up at the top of the page! Any suggestions? Thanks, Kkathman The problem that I am having stems from attempted compatability for 1. IE/other browsers, and 2. Not scrolling or having an absurd amount of dead space on different resolutions. Given that I'm currently using a 16:9 laptop, anything that I make for my resolution is very likely to scroll vertically on anything else. I would like to preface this by saying that, while I am a young person and am .. relatively web savvy, I'm also pretty miserable at CSS. I'll pick it up whenever I need to use it, but these times generally end up being a year plus apart, and so I generally .. forget everything that I picked up the last time, and have to re-learn. I am very good at nesting tables, and using an absurd number of them to get things to look how I want, but .. I really want to get away from that. CSS is cleaner and less .. well, less flat out dumb than using seven tables in one page to align things the way you want them? The Actual Problem I Have: (Do ignore the hideously coloured background, the green/blue combo is temporary until I get the code working properly. Anyway, so apparently I can't post URLs so: clocktock.com is the website in question, code on it is Code: <html> <head> <link rel="stylesheet" type="text/css" href="poing.css"> <link rel="icon" type="image/png" href="img/RL16.png"/> <title>[ eroding.net ]</title></head> <body> <table cellspacing="0" cellpadding="0" class="main" height="100%" width="100%" valign="bottom"><tr><td width=100% align=center valign="bottom"> <table border="0" cellspacing="0" cellpadding="0" height="90%"> <tr><td background="img/top_left.png" width=14 height=39></td> <td background="img/top.png" width=622 height=39><img src="img/top_left2.png" border=0></td> <td background="img/top_right.png" width=14 height=39></tr></td> <tr><td background="img/left.png" width=14 height=1></td> <td bgcolor="black" width="700" height="800" border=0 cellspacing=0 cellpadding=0 background="img/table_bg_grunge.png" valign="top"> <br><br> <center> aaa <br><br> </center> </td><td background="img/right.png" width=14></tr></td></table> </tr></td></table> </body></html> CSS Code: body { font-style: normal; font-variant: normal; font-weight: normal;
font-size: 12px;
font-family: Tahoma, Arial; background-color: #0F0F0F;
color:
#424242; background: url(img/damask.png);
background-attachment:
fixed; background-repeat: repeat; margin-bottom: 0px; vertical-align:
bottom;}
table { color: #424242; font: 11px Tahoma, Arial; margin: 0px;
}
sm {font-size: 0.9em; }
a:link { color: #424242; }
a:visited { color: #595959; }
a:hover { color: #424242; text-decoration:none; }
a:active { color: #424242; }
What I would, ideally, like to have is for the box to take a percentage of space. Say, vertically 80 or 90%, and then a blank remainder on the top. Horizontally, say, 10 or 15% on either side and then 70 or 80% for the "box." But, google as I might, I just can't find the right CSS commands to do it. It just gets funny looking and shrinks all my border images (Though I erased the code that caused that). Is there a way to align something from the bottom of the page? I've made a site for someone and it was center aligning and it worked in all 3 main browsers (IE, FF and Opera) so when I was tinkering with ideas for redoing the look of my site, I used the CSS sheet I used for his site as a base for mine. Unfortunately it's only center align in IE7 with my site. My site is admittedly a bit more complex, at the moment, with more divs, it should still work. Mind you I'm probably just too tired to spot the obvious. Can anyone see what's stopping it from center aligning in FF and Opera? The template: http://www.toadwarrior.com/temp/index.php The CSS: http://www.toadwarrior.com/temp/mark_h_walker_journalist.css Thank you in advance. In a basic CSS single column layout with Header, Content, Footer div structure, where the page background image is defined in the Body CSS, is there a way to specify that below the Footer div, the page background does not show? http://wdcb.org/newsite/ Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something. Page code: Code:
<html>
<body>
<div id="header">
<?php include('includes/menu_new.inc'); ?>
</div>
<div id="leftcol">
<div class="element">
<img alt="" src="../images/buttons/PledgeNow.jpg">
<p>This is what text underneath would look like. I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
</div>
<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
<div id="rightcol">
<div class="element">
<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
</div>
<div class="element">
<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
<p>
Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
<br><br>
<a href="programming/progfolkroot.php">Click here</a> to learn more.
</p>
</div>
</div>
<div id="footer">
<?php include('includes/footer.inc'); ?>
</div>
</body>
</html>
CSS code: Code:
#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}
#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}
#leftcol .element {
margin-bottom:15px;
}
#leftcol p {
margin-left:5px;
}
#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}
#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}
#rightcol .element {
margin-bottom:15px;
}
#rightcol p {
margin-left:5px;
}
#footer {
position:fixed;
bottom:0px;
width:1000px;
height:100px;
background:#005288;
}
Thank you in advance for your help. Hey all, I am creating a site which sells Three 3G Mobile Phones and at the bottom of the pages i have a footer which is included into each page, see here. If you view the site in Firefox then the footer is in the correct place and rests just where the main content finishes. However in IE the footer is miles down the page creating a box effect arround the content which to be honest looks crap. If anyone would be so kind as to give me an idea why this is happening then i would be very grateful. Also, there are many sites around which give tutorials etc about text decoration and such with CSS, but i am yet to find a really good begginers tutorial on how to layout a page with CSS and Divs, does anyone know of one? Thanx for reading. CSS Code (siteInfo is the footer in question: Code:
#masthead{
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: left;
width: 15%;
margin: 0px;
padding-right: 2px;
height: 100%;
}
#headlines{
float:right;
width: 45%;
padding-right: 2px;
}
#content{
float: left;
width: 70%;
padding: 0px 0px 0px 0px;
background-color: #FFFFFF;
position: inherit;
}
#siteInfo{
clear: both;
font-size: 75%;
color: #FFFFFF;
padding: 10px 10px 10px 10px;
text-align: center;
background-color: #CCCCCC;
border-top: 1px solid #107FA4;
position: relative;
font-weight: bold;
}
Edited to add CSS. Hello everyone I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6 Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE. The style sheet is no from me. I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input Eva Here it is: /***********************************************/ /* 3col_leftNav.css */ /* Use with template 3col_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png); background-repeat: no-repeat; background-position: left top; font: 13px Verdana, Arial, Helvetica, sans-serif; /* size: 100%; */ color: #333333; line-height: 1.3; margin: 0px; padding: 0px; } img{ border: 0; } a{ color: #006699; text-decoration: none; } a:link{ color: #006699; text-decoration: none; } a:visited{ color: #006699; text-decoration: none; } a:hover{ color: #006699; text-decoration: underline; font-weight: bold; } h1{ font-family: Verdana,Arial,sans-serif; font-size: 114%; color: black; margin: 0px; padding: 0px; } h2{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h3{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h4{ font-family: Verdana,Arial,sans-serif; font-size: 100%; font-weight: normal; color: #333333; margin: 0px; padding: 0px; } h5{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: #334d55; margin: 0px; padding: 0px; } ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } label{ font-family: Arial,sans-serif; font-size: 100%; font-weight: bold; color: #334d55; } table{ padding: 5 px; } /***********************************************/ /* Layout Divs */ /***********************************************/ #masterhead{ padding: 30px 0px 0px 0px; /* border-bottom: 1px solid #cccccc; */ width: 950px; } #navBar{ float: left; width: 195px; margin: 0px; /* 19.08.2008 padding-top: -5px;*/ padding-top: -5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; /* background-color: #e4f2f9; */ /* 19.08.2008 border-right: 1px solid #cccccc; */ } #headlines{ position: absolute; left: 690px; top: 135px; font-size: 85%!important; /* font-size: 90%; */ /* float:right; */ width: 230px; margin-top: -30px; /* border-left: 1px solid #cccccc; */ /* border-bottom: 1px solid #cccccc;*/ /* padding-right: 10px; */ } #headlines h3{ margin-top: 3px; margin-bottom: 3px; margin-left: 10px; padding-top: 1px; padding-bottom: 1px; font-weight: 900; } #content{ float: left; padding-left: 24px; width: 460px; font-size: 107%; line-height: 1.4; /* position: absolute; top: 184px; left: 210px; */ } #content h1,h2 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 130%; font-color: black; } #content h3 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 120%; font-height: 90%; font-weight: 900; } /***********************************************/ /* Components */ /***********************************************/ #siteName{ margin: 0; padding-top: 0px; padding-right: 0; padding-bottom: 0; padding-left: 200px; /* font-size: x-large; */ color: #FF9900; } /************* #globalNav styles **************/ #globalNav{ /* border-bottom: 1px solid #CCC; */ color: #006699; text-align: center; /* font-weight: bold; */ margin-top: 40px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; /* 19.08.2008 border-top: 1px solid #cccccc; */ } #globalNav img{ display: block; } #globalNav a { /* font-size: 120%; */ padding: 0 4px 0 0; } /*************** #pageName styles **************/ /* #pageName{ margin: 0px; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } */ /************* #breadCrumb styles *************/ #breadCrumb{ font-size: 80%; padding: 2px 0px 0 10px; } /************** .feature styles ***************/ .feature{ padding: 2px 2px 10px 10px; font-size: 80%; } .feature h3{ padding: 30px 0px 5px 0px; text-align: center; color: #006699; } .feature img{ float: left; padding: 10px 10px 0px 0px; } /************** .story styles *****************/ .story{ clear: both; font-size: 80%; padding-top: -40px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .story p{ padding: 0px 0px 10px 0px; } /************* #siteInfo styles ***************/ #siteInfo{ font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; text-align: right; border-top: 0px none #cccccc; /* border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; */ } #siteInfo img{ padding: 4px 4px 4px 10px; vertical-align: middle; } /************* #search styles ***************/ #search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%; } #search form{ margin: 0px; padding: 0px; } #search label{ display: block; margin: 0px; padding: 0px; } /*********** #navBar link styles ***********/ #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; /* border-bottom: 1px solid #006699; */ font-size: 90%; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; /* border-top: 1px solid #006699; */ padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ /* background-color: #dddddd;*/ } .navigate { overflow: hidden; width: 204px; padding-bottom: 1px; } /**Navigation Menu **/ .navigate ul, .navigate li { list-style: none; margin: 0px 0px!important; padding: 0px 0px!important; line-height: 1.5em; } /**erste Navigationseben**/ .navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { display: block; border: 0; border-bottom: 1px solid #86c2e3; border-top: 1px solid #fff; border-right: 1px solid #86c2e3; width: 100%; text-decoration: none; margin: 0; padding: 5px 5px 5px 15px; font-size: 1.0em; font-weight: bold; } .navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active { width: auto; } .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px; padding: 5px 5px 5px 15px; color: #000; font-weight: bold; } .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px; } .navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } .navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } /*********** .relatedLinks styles ***********/ .relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a:link, .relatedLinks a:visited { display: block; } /************** #advert styles **************/ #advert{ padding: 30px 0px 10px; } #advert img{ display: block; } /************** #headlines styles **************/ #headlines{ margin: 0px; padding: 10px 0px 20px 10px; } #headlines p{ padding: 5px 0px 5px 0px; } /**Footer**/ #footer { clear: both; position: relative; border-top: 4px solid #CCECF4; font-size: 11px; padding: 4px 4px 8px 10px; margin-top: 4px; bottom:0; zoom: 1; } #footer .left { float: left; width: 700px; bottom:0; } #footer .right { float: right; width: 150px; text-align: right; margin-top: -2.3em; zoom: 1; position: relative; z-index: 0; bottom:0; } #footer p { color: #000 !important; padding: 0; margin: 0; bottom:0; } #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active { color: #306479; text-decoration: none; font-weight: bold; } #footer a:hover, #footer a:focus { text-decoration: underline; } #navispalte { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; width: 202px; float: left; } Hello, I have been working on this for over 2 days and learning plenty in the process. Yet, I have come to a roadblock. I need the footer, which is outside the main container, to extend to the height of the page. The problem is that the page height changes with each page, and will change in the future, as the info for the pages will be pulled from a database. Please have a look at the footer on my site and tell me what might be a good solution. Here's the site: http://www.caillouette.com/FriendsCSS2/index.php thanks -Sean Hi everyone, It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on... http://www.karenwilliamson.com/joom2/ I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean. Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF. It seems to my novice eyes that it should be controlled by Code: table.contentpaneopen Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers? Thanks for any input Rob Hello, I've had an issue for a while where when the text on the page gets to a certain point it just overlaps the Copyright Information which I want to stay at the bottom of the page. --- (I did look at older forum posts, but with no resolve) --- In the CSS code, I have the copyright (a.k.a. .footerlinks) set with an "Absolute" Position which I know is probably "part of" or "the" problem, but if I change the Positioning the footer ends up on the top of the page or somewhere I don't want it. (** Unfortunately due to New Members not being able to post hyperlinks I am unable to give a link to the webpage or CSS page for viewing. **) But, I have included the code snippet I use for the Footer itself and the "container" and "body" code whether its needed..... body{ margin:0; text-align:center; background-color: #FFFFFF; } .container{ position: relative; width:965px; margin:0 auto 0; height: 100%; } .footerlinks{ position: absolute; top: 1140px; left: 237px; width: 551px; font-size: 75%; font-family: verdana; text-align: center; } CSS is quite new to me so be as specific as possible as to what I should be looking at changing in my code.... Your assistance is much appreciated! Thanks! Dan - Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page. my site stylesheet (see div#footer) Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work. |
|||||||