footer help please

**MoeAlza** · 06-16-2007, 12:42 AM

Hi, I need help with this page http://www.doughboy-entertainment.com/video/index.php .

Basically I want that yellow bar which is the footer bar on the bottom of the page and also want it to extend when more content is added.

The page code is...

Quote:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
<meta name="author" content="Ben Swanson"/>
<meta name="theme" content="luka cvrk"/>
<title>{$config_name|default:"PHP Director"}</title>
<link rel="stylesheet" href="templates/Photine/style.css" type="text/css" />
<script type="text/javascript" src="js/behavior.js"></script>
<script type="text/javascript" src="js/rating.js"></script>
<script type="text/javascript" src="js/reflection.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript" src="js/show_hide.js"></script>
</head>

<body bgcolor="#FFFFCC">
<div class="bannerbox"><img src="images/Banner.png" /></div>
<div class="header">
<a href="/index.php"><img src="/images/home.png" border="0"/></a><a href="http://www.doughboy-entertainment.com/arcade/index.php"><img src="/images/games.png" border="0"/></a><a href="/videos.php"><img src="/images/videos.png" border="0"/></a><a href="/forums/"><img src="/images/forums.png" border="0"/><a href="/about.php"><img src="/images/about.png" border="0"/></a><a href="/forums/"></a><a href="/forums/"></a><a href="/about.php"></a><a href="/forums/"></a></div>
<div class="content">
<br />

<div id='tabs'>
<ul>
<li><a {if $pagetype eq "feature"}class="current"{/if} href='index.php?pt=feature' accesskey='f'><span class='key'>{$LAN_2|default:"Featured"}</span></a></li>
<li><a {if $pagetype eq "all"}class="current"{/if} href='index.php?pt=all' accesskey='a'><span class='key'>{$LAN_3|default:"All"}</span></a></li>
<li><a {if $pagetype eq "categories"}class="current"{/if} href='categories.php?pt=categories' accesskey='c'><span class='key'>{$LAN_40|default:"Categories"}</span></a></li>
<li><a {if $pagetype eq "images"}class="current"{/if} href='images.php?pt=images' accesskey='i'><span class='key'>{$LAN_4|default:"Images"}</span></a></li>
<li><a {if $pagetype eq "videos"}class="current"{/if} href='videos.php?pt=videos' accesskey='r'><span class='key'>{$LAN_39|default:"Videos"}</span></a></li>
<li><a {if $pagetype eq "submit"}class="current"{/if} href='submit.php?pt=submit&part=1' accesskey='s'><span class='key'>{$LAN_5|default:"Submit"}</span></a></li>
</ul>

<BR><BR><BR>
<center>
<div id="search">
<form method="post" action="index.php" name="search1">
<p><input type="text" name="searching" class="search"/><input type="submit" value="Search" class="button"/></p>
</form>
</div>
</div>
{if $news eq ""}
{if $firefox eq "1"}<br />
<br />
{/if}
{else}
<div class="gboxtop"></div>
<div class="gbox">
<p>{$news}</p>
</div>
{/if}

The CSS page is...

Quote:

/*
project: internet sharing template
author: luka cvrk (www.solucija.com)
*/

body { padding: 0; margin: 0; font: 0.7em Tahoma, Arial, sans-serif; line-height: 1.6em; }

/* links */
a { color: #003B6E; background: inherit; }
a:hover { color: #9EC068; background: inherit; }

.redsmall {
color: #FF0000;
font-size: 12px;
}

/* headings */
h1 { font: bold 2.5em "Arial", Sans-Serif; margin: 0; letter-spacing: -1px; }
h2 { font: bold 2em Arial, Sans-Serif; margin: 0; padding: 0; }
h1 a, h2 a { color: #2b2b2b; background: #fff; text-decoration: none; }
h1 a:hover, h2 a:hover { color: #2b2b2b; background: #FFF; }
.title { color: #808080; background: #fff; }

.style1 {color: #0000FF;
text-decoration:underline;}

/* lists and form elements */
ul { margin: 0; padding : 0; list-style : none; }
form { margin: 0; }
input.search { width: 279px; border: none; background: #fff url('images/input.gif') no-repeat; padding: 6px 10px; color: #1E67A8; font-weight: bold; }
input.button { padding: 3px; }

/* content holder */
#content { margin: 10px auto; width: 960px; }

/* horizontal tabbed menu */
#tabs li { display: inline; height: 45px; }
#tabs li a { float: left; background: #fff url('images/barbg.png') no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; margin-left: auto; margin-right: auto; }
#tabs li a:hover { background: #fff url('images/barcurrent.png') no-repeat; color: #000; }
#tabs li a.current { background: #fff url('images/barcurrent.png') no-repeat; color: #2C71AE; }
#tabs ul{width: 70%;
margin: 0 auto;
}
#tabs{text-align: center;}
.key { text-decoration: underline; }

/* search form */
}
#search p { padding: 0; margin: 0; }

/* grey subheader */
.gboxtop { clear: both; height: 8px; background: #dedede url('images/gboxtop.gif') no-repeat; color: #000; }
.gbox { background: #dedede url('images/gbox.gif') no-repeat bottom left; color: #444; padding: 1px 13px 7px 13px; margin: 0 0 20px 0; }
.gbox p { padding: 7px 0; margin: 0;}

/* left side */
.left { float: left; width: 650px; margin: 0 0 10px 0; }
.left_articles {
margin: 0 20px 15px 10px;
padding: 10px 0 0 0;
text-align: justify;
border-bottom: 1px dotted #ccc;
color: #000;
background: #fff;
}

.calendar { height: 50px; float: left; background: #fff url('images/calendar.gif') no-repeat; width: 50px; padding: 5px 0 0 9px; color: #808080;}
.calendar p { padding: 0; margin: 0; }
.description { padding: 0 0 2px 0; margin: 0 10px 5px 0; border-bottom: 1px dotted #ccc; }
.thumbnail { float: left; margin: 0 15px 8px 0; border: 1px solid #dedede; }

/* bottom thirds */
.thirds { float: left; width: 203px; background: #eee; margin: 0 12px 0 0; color: #5d5d5d; }
.smallboxtop { height: 14px; background: #fff url('images/smallboxtop.gif') no-repeat; color: #000; }
.smallbox { background: #fff url('images/smallbox.gif') no-repeat bottom left; color: #444; padding: 1px 10px 10px 10px; }
.smallbox p { padding: 0; margin: 0; }

/* right side */
#right {
float: right;
width: 295px;
margin: 0 0 10px 0;
}
.boxtop { height: 19px; background: #fff url('images/boxtop.gif') no-repeat; color: #000; }
.box { background: #fff url('images/box.gif') no-repeat bottom left; color: #5b5b5b; padding: 0 10px 15px 10px; margin: 0 0 10px 0; }
.box p { padding: 0; margin: 0;}
.image { float: left; margin: 0 9px 3px 0; }

/* misc */
.buttons { text-align: right; padding: 4px 3px 0 0;}
.left_articles .buttons { float: right; height: 20px; }
.bluebtn { background: #488EB2 url('images/bluebtn.gif') no-repeat; padding: 1px 17px 5px 16px; color: #fff; text-decoration: none; }
.greenbtn { background: #488EB2 url('images/greenbtn.gif') no-repeat; padding: 1px 17px 5px 10px; color: #fff; text-decoration: none; }
.bluebtn:hover, .greenbtn:hover { background: #488EB2 url('images/hoverbtn.gif') no-repeat; color: #fff; }

/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
height:100%;
width:100%;
}
* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}
#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}
#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}
#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}
#TB_title{
background-color:#e8e8e8;
height:27px;
}
#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow

;
text-align:left;
line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
padding:15px;
}
#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}
#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}
/* styles for the unit rater */
.ratingblock {
width: 50%;
display:block;
padding-bottom:8px;
margin-bottom:8px;
}

.loading {
height: 30px;
background: url('images/working.gif') 50% 50% no-repeat;
}

.unit-rating { /* the UL */
list-style:none;
margin: 0px;
padding:0px;
height: 30px;
position: relative;
background: url('images/starrating.gif') top left repeat-x;
}

.unit-rating li{
text-indent: -90000px;
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}

.unit-rating li a {
outline: none;
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}

.unit-rating li a:hover{
background: url('images/starrating.gif') left center;
z-index: 2;
left: 0px;
}

.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:30px;}
.unit-rating a.r2-unit{left:30px;}
.unit-rating a.r2-unit:hover{width: 60px;}
.unit-rating a.r3-unit{left: 60px;}
.unit-rating a.r3-unit:hover{width: 90px;}
.unit-rating a.r4-unit{left: 90px;}
.unit-rating a.r4-unit:hover{width: 120px;}
.unit-rating a.r5-unit{left: 120px;}
.unit-rating a.r5-unit:hover{width: 150px;}
.unit-rating a.r6-unit{left: 150px;}
.unit-rating a.r6-unit:hover{width: 180px;}
.unit-rating a.r7-unit{left: 180px;}
.unit-rating a.r7-unit:hover{width: 210px;}
.unit-rating a.r8-unit{left: 210px;}
.unit-rating a.r8-unit:hover{width: 240px;}
.unit-rating a.r9-unit{left: 240px;}
.unit-rating a.r9-unit:hover{width: 270px;}
.unit-rating a.r10-unit{left: 270px;}
.unit-rating a.r10-unit:hover{width: 300px;}

.unit-rating li.current-rating {
background: url('images/starrating.gif') left bottom;
position: center;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}

.voted {color:#999;}
.thanks {color:#36AA3D;}
.Warning {
color: #FF0000;
font-size: 12px;
font-style: italic;

}
.bannerbox{
margin: 0px auto;
background-color:#999999;
text-align: left;
width:800px;
height: 88px;
overflow: hidden;
border: black medium solid;
}
.content{
text-align:left;
width: 800px;
border: black medium solid;
background-color:#383838;
margin: 0px auto;
border-top: none;
border-bottom: black thin solid;
}
.footer{
width:800px;
height:20px;
background-color:#383838;
border-top: none;
overflow: hidden;
}
.header{
width:800px;
height:20px;
border: black medium solid;
margin: auto;
border-top: none;
border-bottom: black thin solid;
}
.authordate{
font-size:xx-small;
padding-left:50px;
}
.title{
font-size:large;
font-weight:bold;
padding-left:50px;
}
.contenttext{
padding-left:100px;
}
.contentpost{
width: 500px;
}

**Space Xscape** · 06-16-2007, 01:03 AM

I'm still new to css but, my guess would be:

Code:

.footer{
width:100%;
height:20%;
background-color:#383838;
border-top: none;
overflow: hidden;
}

Again its just a guess. Sorry if i gave you the wrong info.

**MoeAlza** · 06-16-2007, 01:22 AM

thanks for trying but it remains the same

**Space Xscape** · 06-16-2007, 01:40 AM

Quote:

Originally Posted by MoeAlza

thanks for trying but it remains the same

You welcome, sorry i couldn't help you.

**dpd1998** · 06-16-2007, 02:12 AM

I looked at the source code and saw 2 </body> on it. try removing the 1st one.

**MoeAlza** · 06-16-2007, 02:39 AM

sorry its still their

**MoeAlza** · 06-16-2007, 05:16 AM

Bump .

**LadynRed** · 06-16-2007, 10:26 AM

For one thing, you need to clear your floats, that will get the footer down where it belongs.

I've made some modifications to your index page and the css, see the attached zip file.

**MoeAlza** · 06:10 PM

THANKS FOR THE REPLY. YOUR ALWAYS A BIG HELP.

but my site has header, footer, and index files. the one I listed is the header.

here are the the 3 files.

i know your a very busy with your work on this site but if its possible can you make it work with those 3 files?

www.gamerscommunity.net/files.rar

**LadynRed** · 06-16-2007, 08:05 PM

Make the changes in the CSS as I gave you.
Add the clearing element to your HTML as I added into your index file. I can't do much with the 3 files because I don't have PHP to re-assemble them.

**MoeAlza** · 06-17-2007, 01:41 AM

i still cant get this to work. can someone help me.

**LadynRed** · 06-17-2007, 10:58 AM

what exactly is the problem still. You HAVE to clear your float in the main part of the html, before the footer opening <div> tag.

**MoeAlza** · 06-17-2007, 07:00 PM

I used your CSS which was

.footer{
width:800px;
height:20px;
background: #383838 url(footer.png);
border-top: none;
margin: 0 auto;

and now the footer bar is on the bottom. But the grey background doesn't extend their.

**LadynRed** · 06-18-2007, 02:49 PM

I also added this to the CSS:

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

AND, in the HTML, after the closing <div> tag for your main section I added this to your HTML:
<br class="brclear" />

You must have BOTH of those to clear the floats and make the #content "wrap" around everything inside it.