SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,630
    Mentioned
    6 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 )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,630
    Mentioned
    6 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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    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. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,630
    Mentioned
    6 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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •