...

View Full Version : top padding pushing over wrapper



sackstein
12-02-2009, 07:10 PM
I am trying to add a padding of 40px to the top my content frame which is centered in the wrapper frame that has a background. When I add the padding however it pushes the content down as I want it but also overlaps the wrapper div.

this makes the webpage have a scroll bar and the background wrapper frame to end before the end of the content frame. I tried using margin instead of padding to the top but that did not even push it down.

Here is my code:

CSS:

@charset "utf-8";
/* CSS Document */
html, body{
height: 100%;
text-align: center;
color: #000;
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
h4 {font-family:Tahoma, Geneva, sans-serif; font-size:24px; color:#000; text-align:left;}

#wrapper {
width:100%;
margin:0 auto;
background: url(images/bg_sidebar.png) repeat-x #feea83;
height:100%;
}

#underbelt {
background:url(images/whatsunder.png) no-repeat;
float:left;
position: relative;
top:-40px;
left:-100px;
width:307px;
height:130px;
padding:0;
margin:0;
}

#content {
width:950px;
margin: 0 auto;
background:#FFFFFF;
height:100%;
}

#menubar {
background:url(images/menubar_bg.png) repeat-x;
height:55px;
width:100%;
}

.textcontent {
text-align:left;
color:#000;
padding-left:25px;
padding-right:25px;
}



/* menu links */

.menu {
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0;
height: 52px;
margin-right: 1em;
list-style: none;
background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -1000px;
height: 52px;
background-repeat: no-repeat;
}

.home {background-image: url(images/home2.png); width: 84px;}
.home a {background-image: url(images/home1.png);}
.submit {background-image: url(images/submit2.png); width: 99px;}
.submit a {background-image: url(images/submit1.png);}
.rules {background-image: url(images/rules2.png); width: 85px;}
.rules a {background-image: url(images/rules1.png);}
.prizes {background-image: url(images/prizes2.png); width: 85px;}
.prizes a {background-image: url(images/prizes1.png);}
.entries {background-image: url(images/entries2.png); width: 102px;}
.entries a {background-image: url(images/entries1.png);}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}


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=utf-8" />
<title>PSA CONTEST</title>

</head>
<link rel="stylesheet" type="text/css" href="stylesheetfinal.css">
<body>
<div id="wrapper">
<div id="content">
<div align="right" style="padding-right:5px; padding-bottom:1px;"><a href="/fr/index.html">Franšais</a></div>
<div id="menubar"><img src="images/whatsunder.png" alt="description" name="underbelt" width="307" height="130" id="underbelt" />
<ul class="menu" >
<li class="home"><a href="/"></a></li>
<li class="submit"><a href="/submit.htm"></a></li>
<li class="rules"><a href="./"></a></li>
<li class="prizes"><a href="./"></a></li>
<li class="entries"><a href="./"></a></li>
</ul>
</div>
<img src="images/banner_psa.png" alt="description" name="PSA Banner" style="margin-top:-30px" />
<div class="textcontent">
<h4>Introduction</h4>
<p> Welcome to the Publice Service Announcement (PSA) video and Image contest! The is happy to give up a <strong>$2000</strong> prize to the 1st place winner of this contest! please use the above menu to see the all the rules, prizes, how to submit and more! Good luck!

</div>
</div>
</div>

Excavator
12-02-2009, 08:04 PM
Hello sackstein,
That's a problem with percentage based layouts (but only in earlier browsers?). It seems to behave differently in FF and IE8, you don't mention what browser your seeing it in.
Anyway, 100% height is the size of the screen when you open it, beyond that is more than 100... does that make any sense?

If your trying to do a full height layout that stays the full screen even if there is no content to push it down, have a look at this method - http://nopeople.com/CSS/full-height-layout/index.html

sackstein
12-02-2009, 08:12 PM
I am just trying to have the content div centered inside the wrapper dive. And the wrapper div has a background image repeated along the x axis and a color once that image ends.

The way I have it setup is clearly wrong because it is not wrapping underneatch the content div. So if the content div is too small the side borders just end.

sackstein
12-02-2009, 08:21 PM
I figured it out. Sorrry! The problem was the body tag needed to be the wrapper not before it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum