SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Need help footor won't go down with the content!

  1. Sep 16, 2010 06:26 #1
    reKnaW
    reKnaW is offline
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help footor won't go down with the content!

    hi,

    i'm new to this forum and kinda new to making websites so i'm kind of a nuwb and i need help with my footer.

    it won't stay down, if i add more content( so the page will get largers ) it overlaps my footer it doesn't move doen.

    please help me here is my HTML and CSS it probebly be a bit confusing because im not good in it yet.


    Code HTML4Strict:
    <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="contentText" > </div>
 <div  class="RightColumnText" >
  </div>  
</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

    Code CSS:
    /* CSS Document */
 
body 
{ 
 
  margin: 0; 
  padding: 0; 
  text-align: center; 
  background-image: url(images/bg.gif);
} 
#maincontainer
{
	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
}
 
#mainaccomodation
{
	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 
{
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;
}
    TY in advance!
  2. Sep 16, 2010 06:30 #2
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    A common mistake . You have absolutely positioned almost everything on that page, and as a result noone knows where anything is .

    The footer doesn't even recognize the absolutely positioned elements are there. YOu need to rework your CSS to use floats instead of absolute positioning, and then the footer won't be overlapped (if it does, that's entirely a new issue and we will resolve that upon getting it )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work
  3. Sep 18, 2010 05:59 #3
    reKnaW
    reKnaW is offline
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It still doesn't work i've tried float, fixed , i even changed every single height to 100% and tried Opera but i can't get it to stay down i dont know what to do next.
  4. Sep 18, 2010 07:01 #4
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    No, you're not understanding me mate . Instead of absolute positioning, use floats to get them to where you want (if you even need to float)

    Never stick 100&#37; height on every element because then they will be restricted to that height (assuming that a parent even has a fixed height because the html and body don't have height:100%)

    Your CSS seems to need a complete recode by the looks of it. I don't have time but perhaps Jason or Paul do.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work
  5. Sep 18, 2010 07:41 #5
    reKnaW
    reKnaW is offline
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oke, could u ask them or what should i do so i can ask them?

    thank u for all you're help.
  6. Sep 18, 2010 07:45 #6
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by reKnaW View Post
    Oke, could u ask them or what should i do so i can ask them?

    thank u for all you're help.
    This forum is run by people who contribute in their free time. You could PM them if you wish, however them actually helping is only if they want to . There's just too much to fix in your code for me to fix without doing a complete recode. Jason seems to like doing recodes though .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules