Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation [CODE] Content goes above footer

    I don't know how to define it. I don't know a bit about CSS. I just know some HTML (not too much).

    Today, I purchased a CSS template (cuz i don't know how to make my own)
    but when I try to write more than the area provided, it goes above the footer.


    ____________


    When I write in the default area provided it works good and neat.

    But if I want to write more and more... the page don't stretch (height don't increase) it just gets Ugly Like THIS:



    Please help!!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello shivam3d,
    It's hard to tell without looking at your code, screencaps display the problem but not the cause. If I had to guess, you just need to add clear:both; to the #footer.

    Upload the current version of your project and give us a link to the test site.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is HTML:
    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=iso-8859-1" />
    <title>SHIVAM.ME - Official Website of Shivam Gupta</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .keywordstags {
    	color: #FFF;
    }
    .keywordstag {
    	color: #FFF;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="topPanel">
    <ul>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="projects.html"> Projects</a></li>
    <li><a href="about.html">About me</a></li>
    <li class="active">Home</li>
    </ul>
    <a href="index.html"><img src="images/logo.png" title="Trial Services" alt="Trial Services" width="230" height="80" border="0" /></a>
    <div id="headerPanelfast">
    	<h2>design</h2>
    	<p>I create games, make animations and visual effects.</p>
    	<a href="#">
    &nbsp;	</a></div>
    <div id="headerPanelsecond">
    	<h2>success</h2>
    	<p>My current game is going to be published all over the world. To know more about the game click the arrow.</p>
    	<a href="#">
    &nbsp;	</a></div>
    <div id="headerPanelthird">
    	<h2>PROJECTS</h2>
    	<p> To know more about my current and past projects click the arrow.</p>
    	<a href="#">
    &nbsp;	</a></div>
    </div>
    <div id="bodyPanel">
    	<h2>Sai Baba Projects</h2>
      <p>I am a devotee of <strong>Shri Sai baba</strong>. I have made many animations and small games on him. I have donated all the animations below to <strong>Shri Sai Baba Sansthan Shirdi</strong>. Also, if you like illusions then check out <strong>Sai baba's iMagic </strong>project, it is really a trick that <strong>will</strong> make your jaw drop.</p>
      <p class="dotline"><img src="images/blank.gif" alt="" width="1" height="1" /></p>
      <p class="dotline">&nbsp;</p>
      <h1 class="more">Sai iMagic</h1>
      <div class="nbod"><img src="images/blank.gif" alt="blank" width="226" height="20" border="0" /><img src="images/imagic.png" alt="Sai Eye Optical Illusion" width="200" height="200" border="0" /><img src="images/blank.gif" alt="blank" width="318" height="20" border="0" />This is a free illusion created by me. Saibaba iMagic   is a free product that tricks your eye by the magic of sai. Now you can   see baba's face anywhere! ... at your wall... table or even fridge!!!   The secret is behind this product. I bet you will drop your jaw after launching this app. <img src="images/blank.gif" width="762" height="21" alt="blank" /><span class="keywordstag">keywords: Sai baba game, sai baba iMagic, magic, optical illusions, optical, illusion, Sai illusion, Sai baba illusion, Sai eye illusion, Sai magic, sai optical illutions</span>
    <div class="nbod">
          <h1><a href="sai_game.html">&gt; Sai Baba Game</a></h1>
    </div>
      </div>
    </div>
    </div>
    <div id="footerPanel">
      <div id="footerbodyPanel">
      <ul>
      <li><a href="#">Home </a>| </li>
      <li><a href="about.html">About me</a> | </li>
      <li><a href="projects.html">Projects </a>| </li>
      <li><a href="blog.html">Blog</a> | </li>
      <li><a href="contact.html">Contact </a> </li>
      </ul>
      <p class="copyright">2010  © Copyright Shivam.me. all rights reaserved. Read <a href="privacypolicy.html">legal policy </a>and <a href="privacypolicy.html">privacy policy</a></p>
      <div id="footerhtmlPanel"><a href="http://validator.w3.org/check?uri=referer" target="_blank">html</a></div>
       <div id="footercssPanel"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></div>
      </div>
    </div>
    </body>
    </html>
    CSS (style.css)

    Code:
    /* CSS Document */
    
    body{background:#fff; color:#0F0F0F; font:15px/20px Arial, Helvetica, sans-serif; margin:32px 0 0; padding:0;}
    div, ul, h1, h2, h3, li, p, img{margin:0; padding:0;}
    ul{list-style-type:none;}
    
    /* TOP PANEL*/
    #topPanel{width:762px; height:373px; position:relative; margin:0 auto; padding:0;}
    #topPanel img{width:230px; height:80px; z-index:1; padding:0; position:absolute; margin:0 0 0 21px;}
    /* MENU PANEL*/
    #topPanel ul{display:block; width:732px; height:36px; position:absolute; top:0; right:0; margin:11px 0 0; padding:0 29px 0 0; border-bottom:1px solid #AEAEAE;}
    #topPanel ul li{float:right; font:12px/36px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold;}
    #topPanel ul li a{width:74px; height:36px; display:block; padding:0; color:#555; background:#fff; text-decoration:none; text-align:center; margin:0 1px 0 0; top:0px; left:0px;}
    #topPanel ul li a:hover{width:74px; height:36px; text-decoration:none; background:url(images/button.gif) no-repeat 0 0 #AEAEAE; color:#fff;}
    #topPanel ul li.active{width:74px; display:block; height:36px; background:url(images/button.gif) no-repeat 0 0 #AEAEAE; color:#fff; text-align:center; margin:0 1px 0 0;}
    /* HEADER PANEL*/
    #topPanel #headerPanelfast{width:246px; height:263px; position:absolute; top:0; left:0; margin:110px 0 0; padding:0px; background:url(images/orange-normal.jpg) no-repeat 0 0 #FC5F00; color:#fff;}
    #topPanel #headerPanelfast a{width:246px; height:263px; display:block; text-decoration:none; }
    #topPanel #headerPanelfast a:hover{width:246px; height:263px; background:url(images/orange-hover.jpg) no-repeat 0 0 #FC5F00; color:#fff; text-decoration:none;}
    #topPanel #headerPanelfast h2{
    	display:block;
    	width:90px;
    	height:47px;
    	margin:54px 0 0 120px;
    	font:28px/28px "Trebuchet MS",Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	text-transform:uppercase;
    	position:absolute;
    	top:0px;
    	left:-9px;
    	z-index:1;
    }
    #topPanel #headerPanelfast p{width:163px; display:block; font:12px/18px Arial, Helvetica, sans-serif; font-weight:bold;  position:absolute; top:0px; left:0px; z-index:1; padding:0; margin:105px 50px 0 38px;}
    
    #topPanel #headerPanelsecond{width:246px; height:263px; position:absolute; top:0; left:258px; margin:110px 0 0; padding:0px; background:url(images/green-normal.jpg) no-repeat 0 0 #FC5F00; color:#fff;}
    #topPanel #headerPanelsecond a{width:246px; height:263px; display:block; text-decoration:none; }
    #topPanel #headerPanelsecond a:hover{width:246px; height:263px; background:url(images/green-hover.jpg) no-repeat 0 0 #FC5F00; color:#fff; text-decoration:none;}
    #topPanel #headerPanelsecond h2{display:block; width:90px; height:47px; background:none; margin:54px 0 0 103px; font:28px/28px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; padding:0; position:absolute; z-index:1;}
    #topPanel #headerPanelsecond p{width:163px; display:block; font:12px/18px Arial, Helvetica, sans-serif; font-weight:bold;  position:absolute; top:0px; left:0px; z-index:1; padding:0; margin:105px 50px 0 38px;}
    
    #topPanel #headerPanelthird{width:246px; height:263px; position:absolute; top:0; right:0; margin:110px 0 0; padding:0px; background:url(images/blue-normal.jpg) no-repeat 0 0 #FC5F00; color:#fff;}
    #topPanel #headerPanelthird a{width:246px; height:263px; display:block; text-decoration:none; }
    #topPanel #headerPanelthird a:hover{width:246px; height:263px; background:url(images/blue-hover.jpg) no-repeat 0 0 #FC5F00; color:#fff; text-decoration:none;}
    #topPanel #headerPanelthird h2{display:block; width:90px; height:47px; background:none; margin:54px 0 0 93px; font:28px/28px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; padding:0; position:absolute; z-index:1;}
    #topPanel #headerPanelthird p{width:163px; display:block; font:12px/18px Arial, Helvetica, sans-serif; font-weight:bold;  position:absolute; top:0px; left:0px; z-index:1; padding:0; margin:105px 50px 0 38px;}
    /* /TOP PANEL*/
    
    /* BODY PANEL*/
    #bodyPanel{width:762px; height:640px; position:relative; margin:0 auto; padding:0;}
    #bodyPanel h2{ background:#fff; display:block; width:250px; height:50px; margin:0; font:30px/30px Georgia, "Times New Roman", Times, serif; font-weight:normal; padding:4px 0 0 202px; color:#FF7113;}
    #bodyPanel p{background:url(images/symbol.jpg) 0 0 no-repeat #fff; margin:0 0 0 54px; padding:0 42px 35px 150px; color:#0F0F0F;}
    #bodyPanel p span{font-weight:bold;}
    #bodyPanel p.dotline{background:url(images/dot-line.gif) 0 0 repeat-x #fff; padding:0; margin:0 40px 0 25px; color:#000;}
    #bodyPanel p.capstext{background: url(images/name.gif) bottom right no-repeat #fff; font:18px/24px Georgia, "Times New Roman", Times, serif; font-style:italic; color:#555555; padding:2px 10px 0 25px ; margin:0 35px 10px 0; }
    #bodyPanel p.more{height:26px; padding:0; background:none; margin:0;}
    #bodyPanel p.more a{width:76px; height:26px; display:block; margin:314px 20px 19px 618px; background:url(images/more.gif) 0 0 no-repeat #fff; color:#555; text-decoration:none; font:15px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; padding:0 0 0 10px; text-transform:uppercase; position:absolute; top:0px; right:0px;}
    #bodyPanel p.more a:hover{background:url(images/more.gif) 0 0 no-repeat #fff; color:#216EBD; text-decoration:none;}
    #bodyPanel h3{background:#fff; display:block; width:250px; height:34px; margin:34px 0 12px 0; font:30px/30px Georgia, "Times New Roman", Times, serif; font-weight:normal; padding:0 0 0 20px; color:#FF7113;}
    #bodyPanel #testimonial{width:283px; height:162px; display:block; background:url(images/testimonial-bg.gif) 0 0 no-repeat #FFF6DB; padding:32px 33px 0 148px; margin:0 0 0 20px; color:#786321;}
    #bodyPanel #testimonial p{background:none; margin:0; padding:0 0 5px 0;}
    #bodyPanel #testimonial p span{color:#786321 !Important; background:#FFFAED !Important;}
    #bodyPanel p.moretwo{height:26px; padding:0; background:none; margin:0;}
    #bodyPanel p.moretwo a{width:76px; height:26px; display:block; margin:0px 0px 0px 196px; background:url(images/more2.gif) 0 0 no-repeat #FFF5D6; color:#555; text-decoration:none; font:15px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; text-transform:uppercase; padding:0 0 0 10px; top:0px; right:0px;}
    #bodyPanel p.moretwo a:hover{background:url(images/more2.gif) 0 0 no-repeat #FFF5D6; color:#216EBD; text-decoration:none;}
    #bodyPanel h4{
    	background:#fff;
    	width:250px;
    	height:30px;
    	position:absolute;
    	top:244px;
    	right:16px;
    	margin:0;
    	font:30px/30px Georgia, "Times New Roman", Times, serif;
    	font-weight:normal;
    	padding:0px;
    	color:#FF7113;
    }
    #bodyPanel ul{
    	width:225px;
    	display:block;
    	position:absolute;
    	right:37px;
    	top:272px;
    	height: 300px;
    }
    #bodyPanel ul li{font:12px/25px Arial, Helvetica, sans-serif; font-weight:normal; background:url(images/symbol2.gif) 0 8px no-repeat; padding:0 0 0 30px;}
    #bodyPanel ul span{ background:url(images/dot-line.gif) repeat-x 0 100%; height:25px; display:block;}
    /* FOOTER PANEL*/
    #footerPanel{width:100%;  background:#DCDCDC; color:#4C4C4C; font-size:12px;}
    #footerbodyPanel{width:762px;height:133px; position:relative; margin:0 auto; padding:0;}
    #footerPanel ul{width:320px; display:block; position:absolute; right:10px; top:33px; }
    #footerPanel li{float:left; font:12px/15px Arial, Helvetica, sans-serif; font-weight:normal;}
    #footerPanel ul li a{padding:0 6px; color:#4C4C4C; background:#DCDCDC; text-decoration:none;}
    #footerPanel ul li a:hover{text-decoration:underline;}
    #footerPanel ul li a.padl{padding:0 0 0 6px;}
    #footerPanel p.copyright{
    	background:#DCDCDC;
    	display:block;
    	position:absolute;
    	top:58px;
    	right:11px;
    	color:#A64200;
    }
    #footerPanel ul.templateworld{width:158px; background:#DCDCDC; color:#4C4C4C; display:block; position:absolute; top:74px; right:40px;}
    #footerPanel ul.templateworld li a{background:#DCDCDC; display:block; color:#4C4C4C; text-decoration:none;}
    #footerPanel ul.templateworld li a:hover{text-decoration:underline;}
    
    #footerhtmlPanel{ width:86px; height:31px; display:block; position:absolute; top:34px; left:29px; margin:0; padding:0;} 
    #footerhtmlPanel a{ width:86px; height:31px; display:block; background:url(images/html-img.gif) no-repeat 0 0 #DCDCDC; text-decoration:none; font:14px/31px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#2F2F2F; text-transform:uppercase; padding:0 0 0 10px; position:absolute; top:0px; right:0px;}
    #footerhtmlPanel a:hover{background:url(images/html-img.gif) no-repeat 0 0 #DCDCDC; color:#216EBD; text-decoration:none; }
    #footercssPanel{ width:86px; height:31px; display:block; position:absolute; top:34px; left:115px; margin:0; padding:0;} 
    #footercssPanel a{ width:86px; height:31px; display:block; background:url(images/css-img.gif) no-repeat 0 0 #DCDCDC; text-decoration:none; font:14px/31px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#2F2F2F; text-transform:uppercase; padding:0 0 0 10px; position:absolute; top:0px; right:0px;}
    #footercssPanel a:hover{background:url(images/css-img.gif) no-repeat 0 0 #DCDCDC; color:#216EBD; text-decoration:none; }
    And I am not sure where should I put clear:both;. Can you please point that out for me?

    EDIT: and I can't upload the site now, it have some confidential information. But I will upload it tomorrow. But it would be really great if the problem gets resolved today.

    Sorry for my bad eng
    not an american here
    Last edited by shivam3d; 03-15-2010 at 06:27 PM.

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    The problem seems to be the body has a set height of 640px.

    Code:
    #bodyPanel{width:762px; height:640px; position:relative; margin:0 auto; padding:0;}

  • #5
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by skywalker2208 View Post
    The problem seems to be the body has a set height of 640px.

    Code:
    #bodyPanel{width:762px; height:640px; position:relative; margin:0 auto; padding:0;}
    Yes, I see that. But when I increase 640px to something like 840px, the footer's color gets..... i can't say it in words. Here is a screenshot

    Can't we make it so that it auto increase height as I type and also move the footer down?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Just remove the line height: 640px; and let the div behave naturally, it will expand to contain what you put in it.

    Of course, if you put floats in it you will need to clear them and the box model says you cannot put anything inside #bodyPanel that is wider than the #762px it's set at.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou soooo much! It worked! YOu Guys are AWESOME!!!


  •  

    Tags for this Thread

    Posting Permissions

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