PDA

View Full Version : "Stuck" Footer - Need help


Lillerovde
04-06-2010, 10:13 AM
Hi.
Im working on my very first website, it's nearly done. But I have a little problem that is holding me back and is very annoying!

The footer wont "float" with the main area (Not sure if that is a good explanation, but I'll post some pictures to illustrate)

When the main area expands outside of the container, the footer doesn't move down along with it. It looks correct inside Dreamweaver, but when I open it in Firefox, its all wrong.

Can someone please tell me what Im doing wrong?:confused:

In dreamweaver it looks OK..
http://i7.photobucket.com/albums/y280/FireSt0rM/Dreamweaver.jpg

..but when I save and open it, it looks like this.
http://i7.photobucket.com/albums/y280/FireSt0rM/Firefox.jpg

Corrosive
04-06-2010, 11:24 AM
Have you added clear:both to your footer styles?

Lillerovde
04-06-2010, 01:36 PM
I added the clear:both to my footer style now. But nothing happened =\
Any other ideas? Would it be possible for me to send my .dwt file so someone could check it out? Im sure it's just a little fix for someone with more experience than me:wink:

Corrosive
04-06-2010, 01:54 PM
Could you just post your code here (using code tags) and we can investigate.

Lillerovde
04-06-2010, 03:10 PM
Should I just copy/paste the entire Source Code for the template? Sorry, n00b =\

Corrosive
04-06-2010, 03:14 PM
Yep, that should cover it. Also any CSS you have as well.

Lillerovde
04-06-2010, 03:16 PM
Source 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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#container {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left;
background-color: #333;
}
#test {
height: 465px;
width: 160px;
float: right;
background-color: #333;
background-image: url(../Bilder/Bakgrunn/Aktuellt.jpg);
padding-top: 35px;
padding-left: 20px;
padding-right: 20px;
}
#header {
float: left;
width: 800px;
color: #000;
background-color: #FFF;
background-image: url(../Bilder/Bakgrunn/Header.jpg);
background-repeat: no-repeat;
height: 250px;
}
#mainarea {
float: left;
height: 480px;
width: 440px;
background-color: #333;
background-image: none;
padding-left: 10px;
margin-left: 0px;
padding-top: 20px;
padding-right: 0px;
}
#nav {
float: left;
height: 480px;
width: 150px;
background-color: #333;
background-image: none;
color: #FFF;
background-repeat: no-repeat;
padding-top: 20px;
}
#footer {
float: left;
height: 30px;
width: 800px;
background-color: #333;
color: #999;
font-size: 11px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
text-align: center;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dashed;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
clear: both;
}
-->
</style>
<link href="../CSS/body.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:150px;
height:500px;
z-index:1;
left: 712px;
top: 246px;
}
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../CSS/Hovedtekst.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
background-color: #000;
background-image: url(../Bilder/Salongen/IMG_4413.JPG);
background-repeat: repeat;
}
-->
</style></head>

<body onload="MM_preloadImages('../Buttons/OmCameloon_over.jpg','../Buttons/kontakt_over.jpg','../Buttons/Galleri_over.jpg','../Buttons/BestillTime_over.jpg','../Buttons/Ansatte_over.jpg','../Buttons/leverandorer_over.jpg')">
<div id="container">
<div id="header">
<p>&nbsp;</p>
<p><a href="../www/Index.htm"><img src="../Buttons/Home.jpg" alt="banner" width="420" height="150" vspace="46" /></a></p>
</div>
<div id="nav">
<p><a href="../www/Om Cameloon.htm"><img src="../Buttons/OmCameloon.jpg" alt="About" width="150" height="50" id="Image1" onmouseover="MM_swapImage('Image1','','../Buttons/OmCameloon_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></p>
<p><a href="../www/Kontakt Oss.htm"><img src="../Buttons/kontakt.jpg" alt="Contact" width="150" height="50" id="Image2" onmouseover="MM_swapImage('Image2','','../Buttons/kontakt_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></p>
<p><a href="../www/Ansatte.htm"><img src="../Buttons/Ansatte.jpg" alt="Ansatte" width="150" height="50" id="Image6" onmouseover="MM_swapImage('Image6','','../Buttons/Ansatte_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></p>
<p><a href="../www/Galleri/Galleri.htm"><img src="../Buttons/Galleri.jpg" alt="Galleri" width="150" height="50" id="Image3" onmouseover="MM_swapImage('Image3','','../Buttons/Galleri_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></p>
<p><a href="../www/Timebestilling.htm"><img src="../Buttons/BestillTime.jpg" alt="Order" width="150" height="50" id="Image4" onmouseover="MM_swapImage('Image4','','../Buttons/BestillTime_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></p>
<p><a href="../www/leverandor.htm"><img src="../Buttons/leverandorer.jpg" alt="Leverandorer" width="150" height="50" id="Image5" onmouseover="MM_swapImage('Image5','','../Buttons/leverandorer_over.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></p>
<p>&nbsp;</p>
</div>
<div class="hovedtekst" id="test"><!-- TemplateBeginRepeat name="Aktuellt" -->
<p class="undertekst">--------------------------</p>
<p>&nbsp;</p>
<!-- TemplateEndRepeat --></div>
<div id="mainarea"><!-- TemplateBeginEditable name="Main" -->
<p class="hovedtekst">&nbsp;</p>
<!-- TemplateEndEditable --></div>
<div class="footer" id="footer">© CAMELOON FRISØR &amp; MAKE-UP SALONG Inger Lise Lillerovde - Alle rettigheter reservert Utviklet av TL</div>
</div>
</body>
</html>


Body.css

body {
background-color: #000;
margin: 0px;
background-image: url(../Untitled-1.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
a {
text-decoration: none;
color: #0FF;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}


Hovedtekst.css

@charset "utf-8";
.hovedtekst {
color: #FFF;
font-size: 24px;
background-color: #333;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-style: normal;
}
.undertekst {
font-size: 16px;
color: #FFF;
background-color: #333;
font-style: normal;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.kursiv {
font-size: 14px;
color: #FFF;
background-color: #333;
font-style: italic;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

DWcourse
04-06-2010, 03:31 PM
You don't need the height property in all those styles. Let the content of the divs determine their height.

Corrosive
04-06-2010, 04:30 PM
Yes, agree with JC. Let content dictate height wherever possible in a web page build.

Lillerovde
04-06-2010, 05:16 PM
Ok.. I believed that that was what I did now.
When the editable region goes below the footer in dreamweaver the footer also changes, but in the browser the footer doesnt move at all.

So i should try to remove all hight and let content deside all?

Corrosive
04-06-2010, 05:17 PM
I'd certainly try taking it off of;

#mainarea {
float: left;
height: 480px;
width: 440px;
background-color: #333;
background-image: none;
padding-left: 10px;
margin-left: 0px;
padding-top: 20px;
padding-right: 0px;
}

And then work from there.

Lillerovde
04-06-2010, 05:47 PM
Ok. Thank you for the help so far, at least I know what to work with :)

Lillerovde
04-06-2010, 06:53 PM
That worked out right away :) Thanks alot for the help :D
Finaly going somewhere again with this site.

But as a n00b I have to ask another question hehe :p

Is there a way to get everything inside the #Container so that it reacts adjusts itself to the #Footer? The way it is now the background colour shows where the #Mainarea ends

Corrosive
04-07-2010, 06:05 AM
Is there a way to get everything inside the #Container so that it reacts adjusts itself to the #Footer? The way it is now the background colour shows where the #Mainarea ends

It should work as long as you still have clear: both; in your styles for footer and the container closing </div> comes after the footer.

Lillerovde
04-08-2010, 11:39 AM
I tried a little more yesterday and found out that when i added Float:left or right property, the container box worked as it should and I got a gray background.
But when it's centered it won't work:confused:

Corrosive
04-08-2010, 12:08 PM
Here you go, this may make it a little easier to understand; http://www.corrosiveonline.co.uk/tutorials_css_floats_for_layout.php

DWcourse
04-08-2010, 01:41 PM
If you have floated elements within a #container div and the #container div is also floated then it will grow in height to accommodate its tallest element and a clearing element won't be necessary.

Of course that's not what you want. In your case you want to center #container div. Without the float, #container div won't grow with its content so you'll only see its background as a thin stripe.

To make it grow with the content you need to add an element with the CSS property clear:both before the closing </div> tag as corrosive's article explains.