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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post

    top padding pushing over wrapper

    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:
    Code:
    @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:

    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=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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    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
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    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.

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    I figured it out. Sorrry! The problem was the body tag needed to be the wrapper not before it.


  •  

    Posting Permissions

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