PDA

View Full Version : Help Footer Wont go down with the content!



reKnaW
Sep 16th, 2010, 12:48 PM
Hi people i have a serious problem and i cant get it solved.

My footer will not go down with my content so what i mean is i am making a template in HTML and everything looks fine but when the content expends downwords the text goes over the footer instead of bringing it down with him.

please help me out.

Thnx in advance!

SB65
Sep 16th, 2010, 02:08 PM
Impossible to help without a link to your page, preferably, or failing that your whole html and css.

reKnaW
Sep 16th, 2010, 02:33 PM
Oh sorry that i didn't post that so here it is :

<html>

<head>

<title>Home</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="FW MX CSS Layer">
<link rel="stylesheet" type="text/css" href="main.css">

<style type="text/css">
<!--
body {
background-image: url(images/bg.gif);
}
.style9 {font-size: 10}
.style10 {
font-size: 12px;
font-family: Tahoma;
}

-->
</style>

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Yanone_Kaffeesatz_Light_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1'); // Works without a selector engine
Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
Cufon.replace('i');
</script>

<script type="text/javascript" src="stmenu.js"></script></head>

<body bgcolor="#ffffff">
<a name="top"></a>
<div id="maincontainer">



<div id="language" >
<div class="languagepictures">
<div align="left" >
<a href="http://www.england.com"><img src="language/england.gif" width="48" height="14" border="0"></a>
<a href="http://www.greece.com"><img src="language/greece.gif" width="48" height="14" border="0"></a>
<a href="http://www.spane.com"><img src="language/spane.gif" width="48" height="14" border="0"></a>
<a href="http://www.deutsland.com"><img src="language/deutsland.gif" width="48" height="14" border="0"></a> </div>
</div>
</div>

<div id="header" ><img name="header_img" src="images/header.gif" width="722" height="339" border="0"></div>

<div id="logo" ><img name="logo_img" src="images/logo.gif" width="214" height="311" border="0"></div>

<div id="menu" >

<a href="http://www.dhtml-menu-builder.com" style="display:none;visibility:hidden;">Javascript DHTML Drop Down Menu Powered by dhtml-menu-builder.com</a>
<script type="text/javascript">
<!--
stm_bm(["menu6f04",900,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0,0,1,2,"default","hand","",1,25],this);
stm_bp("p0",[1,4,0,0,5,3,0,0,100,"",-2,"",-2,50,0,0,"#999999","#E6EFF9","",3,0,0,"#000000"]);
stm_ai("p0i0",[0," Home","","",-1,-1,0,"LaPerla.html","_self","","","","",0,0,0,"","",0,0,0,0,1,"#E4F2F9",0,"#35B6DB",0,"","",3,3,0,0,"#E6EFF9","#000000","#002A3F","#FFFFFF","14px Tahoma","14px Tahoma",0,0,"","","","",0,0,0]);
stm_aix("p0i1","p0i0",[0," About","","",-1,-1,0,"about.html"]);
stm_aix("p0i2","p0i0",[0," Accomodations ","","",-1,-1,0,"accomodations.html"]);
stm_aix("p0i3","p0i0",[0," Offers","","",-1,-1,0,"offers.html"]);
stm_aix("p0i4","p0i3",[0," Book online","","",-1,-1,0,"bookonline.html"]);
stm_aix("p0i5","p0i3",[0," Facilities","","",-1,-1,0,"facilities.html"]);
stm_aix("p0i6","p0i3",[0," Gallary","","",-1,-1,0,"gallary.html"]);
stm_aix("p0i7","p0i3",[0," Contact","","",-1,-1,0,"contact.html"]);
stm_ep();
stm_em();
//-->
</script>

</div>

<div id="mainhome" >

<div class="content">
<div class="contentHeader" >
<i>Welcome to LaPerla Hotel </i>

</div>

<div class="contentText" >

</div>

</div>
</div>


<div id="rightcolumn" >
<div class="RightColumnHeader" >
<i>Book Online </i>
</div>
<div class="RightColumnText" >
</div>
</div>
<div class="push">
</div>


<div id="footer" >

<div id="facebook" ><a href="http://www.facebook.com"><img name="facebook_img" src="images/facebook.gif" width="22" height="22" border="0"></a></div>

<div id="twitter" ><a href="http://www.twitter.com"><img name="twitter_img" src="images/twitter.gif" width="22" height="22" border="0"></a></div>

<div align="left" id="followus" >
<font color="#FFFFFF">
Follow Us</font></div>

<div align="left" id="sendtofriend" >
<a href="disclaimer.html"><font color="#FFFFFF">Disclaimer</font></a>
<a href="print.html"><font color="#FFFFFF">Print this page</font></a>
<a href="sendtofriend.html"><font color="#FFFFFF">Send to friend </font></a> </div>

<div id="topofpage" >
<a href="#"><font color="#FFFFFF">Back to top of page^</font></a></div>

<div id="hrline" >
<img name="hr_line" src="images/hr_line.gif" width="880" height="3" border="0"></div>

<div align="left" id="copyright">
<font color="#FFFFFF">
Copyright 2010 La Perla Hotel, Greece</font></div>

<div id="madeby" >
<font color="#FFFFFF">
Created by: Symmetria web solutions</font></div>
</div>

<script type="text/javascript"> Cufon.now(); </script>
</div>
</body>
</html>


and CSS

/* CSS Document */

body
{

margin: 0;
padding: 0;
text-align: center;
background-image: url(images/bg.gif);
}
#maincontainer /*this is the wrapper */
{
position:relative;
margin: 0 auto;
width: 937px;
z-index:30;
background-color: #99CCCC;
border-top: 9px solid;
border-color:#002A3F;
}

#language
{
position:absolute;
left:0px;
top:0px;
width:214px;
height:28px;
z-index:2;
visibility:visible;
background-color:#FFFFFF;
}

#header
{
position:absolute;
left:214px;
top:0px;
width:722px;
height:339px;
z-index:3;
visibility:visible;
}

#logo
{
position:absolute;
left:0px;
top:27px;
width:214px;
height:311px;
z-index:4;
visibility:visible;
}

#menu
{
position:absolute;
left:0px;
top:349px;
width:214px;
height:480px;
z-index:5;
visibility:visible;
background-color:#E4F2F9;
}

#mainhome
{
position:absolute;
left:218px;
top:351px;
width:425px;
height:478px;
z-index:6;
visibility:visible;
border-right:solid
#E4F2F9
}

.content
{
width:460px;

}

#rightcolumn
{
position:absolute;
left:680px;
top:351px;
width:257px;
height:478px;
z-index:7;
visibility:visible;
}

.rightcolumntop
{
left:680px;
top:351px;
width:257px;
height:281px;
z-index:7;
visibility:visible;
border-bottom:solid;
border-bottom-color:#E4F2F9;
}

.rightcolumnfooter
{
left:680px;
top:645px;
width:257px;
height:185px;
z-index:7;
visibility:visible;
}

#footer /*footer */
{
position:absolute;
left:2px;
top:838px;
width:936px;
height:213px;
z-index:9;
visibility:visible;
}

.contentHeader
{
position:relative;
left:12px;
width:448px;
height:38px;
z-index:1;
background-color:#E4F2F9;
float:left;
font-size: x-large;
text-align: left;
}

.contentText
{
position:relative;
left:12px;
width:425px;
z-index:1;
text-align: left;
}

.RightColumnHeader
{
position:relative;
left:12px;
width:235px;
height:38px;
z-index:1;
background-color:#E4F2F9;
float:left;
font-size: x-large;
text-align: left;
margin-left: 10px;
}

.RightColumnText
{
position:relative;
width:215px;
z-index:1;
text-align: left;
left:15px;
}

.subMenuAccomodation
{
position:relative;
left:12px;
width:448px;
top:8px;
height:20px;
z-index:1;
visibility:visible;
background-color:#E4F2F9;
float:left;
font-size: x-large;
}

.languagepictures
{
position:absolute;
vertical-align:middle;
left: 3px;
top: 5px;
width: 212px;
}

#facebook
{
position:absolute;
left:100px;
top:36px;
width:22px;
height:22px;
z-index:3;
visibility:visible;
}

#twitter
{
position:absolute;
left:135px;
top:36px;
width:22px;
height:22px;
z-index:5;
visibility:visible;
}

#followus
{
position:absolute;
left:43px;
top:46px;
width:51px;
height:9px;
z-index:8;
visibility:visible;
font:Tahoma;
font-size:10px;
}

#sendtofriend
{
position:absolute;
left:189px;
top:44px;
width:231px;
height:9px;
z-index:10;
visibility:visible;
font-size:10px;
font-family:Tahoma;
}

#topofpage
{
position:absolute;
left:814px;
top:45px;
width:107px;
height:9px;
z-index:12;
visibility:visible;
font-family:Tahoma;
font-size:10px;
}

#hrline
{
position:absolute;
left:41px;
top:74px;
width:880px;
height:3px;
z-index:20;
visibility:visible;
}

#copyright
{
position:absolute;
left:41px;
top:85px;
width:194px;
height:11px;
z-index:22;
visibility:visible;
font-family:Tahoma;
font-size:10px;
}

#madeby
{
position:absolute;
left:737px;
top:85px;
width:184px;
height:11px;
z-index:24;
visibility:visible;
font-family:Tahoma;
font-size:10px;
}

This might all see a little confusing but thats because im not that good in it im still learning with naming and stuff but the biggest problem i've got is that the footer wont go down if my contact gets bigger.

Jer
Sep 16th, 2010, 03:25 PM
If this is your main content container, you have a static height set of 478px.


<div id="mainhome" >

#mainhome
{
position:absolute;
left:218px;
top:351px;
width:425px;
height:478px;
z-index:6;
visibility:visible;
border-right:solid
#E4F2F9
}

If you want that to expand then you should maybe make that min-height 478px, or if you want the content to not show consider using overflow:hidden.

When you work on the layouts it's a good idea to not put so much content in your page. It makes it harder to read and visually debug. Strip all the scripts out of it down to just the divs and organize your CSS in a better order. I put the id's from top to bottom (right to left if inside another container) of the page visually and then at the end of the css i put the classes and group them up with what ID they were in.

A small trick I use for layouts is border : 1px black solid. Helps you see where stuff is, just remember that that 1px adds to your boxes size 1 pixel on each side so if your box is 600x400, with a border it'll be 602x402 unless you compensate, (which I do and it's silly of me i know but that's just me) and make it 598x398 then the div will be the proper size. Of course you have to edit it when you take the border off, but it'll all be in the same id so it's not THAT inconvenient.

reKnaW
Sep 16th, 2010, 03:34 PM
It still won't give any effect, the only thing that changes is the border-right that goed down with the content footer still stay's in the same spot.

i have tryed alot of thing but nothing seems to work.:S

Jer
Sep 16th, 2010, 03:52 PM
hum, well maybe someone who uses absolute more should check this out. I don't use it much at all mostly cause i set up my layouts a bit different that most, but I'd guess it has something to do with that.

SB65
Sep 16th, 2010, 04:16 PM
The problem is indeed the absolute positioning. All your divs - #menu,#maincolumn, #rightcolumn and #footer are positioned absolutely - and hence will stay in the same position whatever the content in any of them. Specifically, no matter how long the content is in #mainhome, #footer will stay in the same place and hence the content in #mainhome will go over the top of it. Taking off the height on #mainhome will have no effect. This is the problem with using absolute positioning for everything.

If this layout didn't use absolute positioning, then as any of #menu, #mainhome or #rightcolumn expand vertically, they will oush the footer down with it.

Have a look at this example (http://bonrouge.com/3c-hf-fixed.php) of a three column layout not dissimilar to yours to see how this can be achieved without absolute positioning.

PS: When posting code here use the code tags (# symbol) - then the code gets some scrollbars which makes it easier to read.

reKnaW
Sep 18th, 2010, 02:56 PM
Yes sorry for the code posting the wrong way.

I have looked at u're example and tried alot of thing but it's not working so im just going to start all over and try again because everything is to blurry in the code right now.

thank you for all you're help!