Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
New to the CF scene
Join Date: Mar 2010
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
[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!!
PM User | 2
Master Coder
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Hello shivam3d,clear:both; to the #footer.
PM User | 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="#">
</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="#">
</a></div>
<div id="headerPanelthird">
<h2>PROJECTS</h2>
<p> To know more about my current and past projects click the arrow.</p>
<a href="#">
</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"> </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">> 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
Last edited by shivam3d; 03-15-2010 at 05:27 PM ..
PM User | 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;}
PM User | 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
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?
PM User | 6
Master Coder
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 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.
PM User | 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!!!
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 01:54 PM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
[CODE] Content goes above footer
