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
    New Coder
    Join Date
    Jan 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem with wrapper background in CSS

    Hi, I am really a beginner in making web pages. I have read tons of tutorials and I have made quite a progress I think. But I get stuck in one simple problem. I want to make a simple webpage with this layout: http://i49.tinypic.com/1r54l4.jpg

    I have a body with background. I want this background to be visible above and under the png logo. Then I have canvas with menu on the left side with the same color background but different color than body. And then the footer with a little margin again. The code looks like this:

    Code:
    body {
    margin: 0;
    padding-top: 10px;
    background-image: url('pics/background.png');
    background-repeat: repeat; 
    }
    
    #wrapper {
    width:1200px;
    height:100%;
    margin-left:12%;
    }
    
    #content {
    background: rgba(255, 251, 208, 0.9);
    height:100%;
    margin-top:10px;
    }
    
    #menu {
    width:16%;
    float:left;
    }
    
    #canvas {
    width:84%;
    float:right;
    }
    This is how the html code looks like. I skiped the footer for now.

    Code:
      <body>
        <div id="wrapper">
          <img src="pics/header.png" width=1200px>      
          <div id="content">
            <div id="menu">
              random text
            </div>
            <div id="canvas">
              random text
            </div>
          </div>
        </div>   
      </body>
    With this I get just the webpage without the background color. And for example Firebug shows that the height of wrapper or content ends just above the canvas. I have tried tens of different settings but something was wrong every time.
    Thanks for any help.
    Last edited by wentill; 01-29-2013 at 11:20 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,209
    Thanks
    7
    Thanked 268 Times in 267 Posts
    Your floated divs are "out of the document flow" from the perspective of their containing divs of wrapper and content. That's why the wrapper and content are not including them. There are several ways to resolve this, I tend to use overflow:auto in the surrounding div.

    Also your width attribute on the logo is wrong, it should just be width="1200". Or better yet use a width in css.

    Dave

  • Users who have thanked tracknut for this post:

    wentill (01-28-2013)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    78
    Thanks
    5
    Thanked 12 Times in 12 Posts
    First I think you are tackling your logo wrong, by that I mean your logic. Why don't you do something like the following:
    Example of CSS Code
    Code:
    body {
    	font-size: 76%;
    	background-color: #f9f9f9;
    	padding: 0px;
    	margin: 0px;
    }
    
    #wrapper {
    	overflow: hidden;	
    	width:1200px;	
    	padding: 0px;
    	margin: 0px auto 0px auto;
    }
    
    #header {
    	float: left;
    	width: 1200px;
    	height: 100px;
    	background-image: url(../images/img-example.png);
    		background-repeat: no-repeat;
    	padding: 0px;
    	margin:  0px;	
    }
    #company-logo {
          float: left;
          width: 100px;
          height: 50px;
               position: relative;
                     top: 20px; 
                     left: 500px;
          ....style in the way you want it to look on page
    }
    Then the HTML code might look like something like the following:
    Code:
    <body>
    <div id="wrapper">
      <div id="header">
    
        <h1 class="company-title">The Best Darn Website Example</h1>
      
        <div id="company-logo"> 
        		<a href="index.html" target="_self"><img src="images/img-michigan-map.png" alt="Map of Michigan" /></a>   
        </div><!--/#company-logo-->
    
      </div><!--/#header-->
    
      .......continue with code
      </div><!--/#wrapper-->
    </body>
    I was taught to put everything in logical order when writing my html/css code, here is a small css example

    Code:
    header {
         float: left;
         width: 800px;
         height: 600px;
         background-image: url(../images/img-header.jpg);
              background-repeat: no-repeat;
         padding: 0px;
         margin: 0px;
    }
    Try to put padding and margins set to zero for all you major blocks of css code, such as header, section, article, footer, etc.. that way when you set your width and height you can adjust your padding and margin accordingly. I hope this helps a little.
    Last edited by Strider64; 01-28-2013 at 05:03 PM.

  • #4
    New Coder
    Join Date
    Jan 2013
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks a lot guys for help. Everything is now how I have wanted. Obviously if I had written earlier and I would have saved few days of endless evenings


  •  

    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
    •