PDA

View Full Version : Please help with CSS/HTML footer



macaddict23
Jun 19, 2008, 02:26 PM
Okay, to better explain this, I've posted an illustration of the web page layout I'm trying to build.

http://home.comcast.net/~macaddict23/layout.png

TOP GRAPHIC:
I have my purple footer containing a single line of text. I don't want the purple background of the footer to stop short.

BOTTOM GRAPHIC:
No matter how much content is in this footer, or how big the viewer stretches his/her window, I want the purple back to infinitely expand.

How do I make this happen? I've tried giving my footer DIV a height of 100% but with no luck. Thanks in advance, and I hope this wasn't confusing.


japaternoster
Jun 19, 2008, 02:48 PM
Could you post some code for us to have a look at?
macaddict23
Jun 19, 2008, 03:24 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Welcome To Sample Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="mainwrap">
<div id="contentarea" class="clearfix">

<div id="leftcontent">
<div id="leftcontent-inner">
<p>This is the left content</p>
</div><!--end leftcontent-inner-->
</div><!--end leftcontent-->

<div id="rightcontent">
<div id="rightcontent-inner">
<p>This is the right content</p>
</div><!--end rightcontent-inner-->
</div><!--end rightcontent-->

</div><!--end contentarea-->
</div><!--end mainwrap-->

<div id="footer"><p>© 2008 Sample Company. All Rights Reserved.</p>
</div><!--end footer-->
</body>
</html>
macaddict23
Jun 19, 2008, 03:29 PM
Here's the CSS. I know I have to clean it up by using shorthand methods.

body {
background-color: black;
font-size: 12px;
line-height: 19px;
font-family: verdana, helvetica, arial, sans-serif;
color: white;
min-width: 900px;
margin: 0px;
padding: 0px;}

#mainwrap {
width: 900px;
margin-left: auto;
margin-right: auto;}

#contentarea {
width: 900px;}

#leftcontent {
width: 680px;
float: left;}

#righttcontent {
width: 220px;
float: left;}

#rightcontent-inner, #leftcontent-inner {
background-color: white;
padding: 20px;}

#footer {
background-color: #723694;
text-align: center;

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}

.clearfix {
display: inline-table;}
/* backslash hides from IE mac \*/

* html .clearfix {
height: 1%;}

.clearfix {
display: block;}
/* end backslash hack */
japaternoster
Jun 19, 2008, 04:37 PM
at a quick glance you are missing the } at the end of the #footer css. Will have a look at making it reach the bottom.
japaternoster
Jun 19, 2008, 04:42 PM
Sorted it for u mate, I am not a pro, but this is a solution that does work. Basically what I did was make the background of the whole body purple then add a div around the main container which has a black background.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Welcome To Sample Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="bulk">
<div id="mainwrap">
<div id="contentarea" class="clearfix">

<div id="leftcontent">
<div id="leftcontent-inner">
<p>This is the left content</p>
</div><!--end leftcontent-inner-->
</div><!--end leftcontent-->

<div id="rightcontent">
<div id="rightcontent-inner">
<p>This is the right content</p>
</div><!--end rightcontent-inner-->
</div><!--end rightcontent-->

</div><!--end contentarea-->
</div><!--end mainwrap-->
</div>

<div id="footer">
<p>© 2008 Sample Company. All Rights Reserved.</p>
</div><!--end footer-->

</body>
</html>

CSS
body {
background-color: #723694;
font-size: 12px;
line-height: 19px;
font-family: verdana, helvetica, arial, sans-serif;
color: black;
min-width: 900px;
margin: 0px;
padding: 0px;
}


#mainwrap {
width: 900px;
margin-left: auto;
margin-right: auto;
}

#bulk{
width: 100%;
background-color: black;
}

#contentarea {
width: 900px;}

#leftcontent {
width: 680px;
float: left;}

#righttcontent {
width: 220px;
float: left;}

#rightcontent-inner, #leftcontent-inner {
background-color: white;
padding: 20px;}

#footer {
text-align: center;}



.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}

.clearfix {
display: inline-table;}
/* backslash hides from IE mac \*/

* html .clearfix {
height: 1%;}

.clearfix {
display: block;}
/* end backslash hack */
macaddict23
Jun 19, 2008, 05:03 PM
That looks like it might actually work. Thank you so much!
japaternoster
Jun 19, 2008, 05:21 PM
no problems, let us know if you have any more questions and when the site is complete.