PDA

View Full Version : [CODE] Content goes above footer



shivam3d
Mar 15th, 2010, 05:44 PM
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.


____________

http://i43.tinypic.com/25qyc60.jpg
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:

http://i40.tinypic.com/kap2a.jpg

Please help!!

Excavator
Mar 15th, 2010, 05:52 PM
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.

shivam3d
Mar 15th, 2010, 06:23 PM
Here is HTML:

<!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)


/* 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 :)

skywalker2208
Mar 15th, 2010, 06:38 PM
The problem seems to be the body has a set height of 640px.



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

shivam3d
Mar 15th, 2010, 07:11 PM
The problem seems to be the body has a set height of 640px.



#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 :)
http://i42.tinypic.com/24mrn02.jpg
Can't we make it so that it auto increase height as I type and also move the footer down?

Excavator
Mar 15th, 2010, 07:27 PM
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 (http://www.w3schools.com/css/pr_class_float.asp) in it you will need to clear (http://www.quirksmode.org/css/clearing.html) them and the box model (http://www.w3.org/TR/CSS2/box.html) says you cannot put anything inside #bodyPanel that is wider than the #762px it's set at.

shivam3d
Mar 15th, 2010, 08:03 PM
Thankyou soooo much! It worked! YOu Guys are AWESOME!!!