...

View Full Version : Resolved Problem with wrapper background in CSS



wentill
01-28-2013, 10:40 AM
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:


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.


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

tracknut
01-28-2013, 04:36 PM
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

Strider64
01-28-2013, 05:52 PM
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

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:

<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


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.

wentill
01-28-2013, 07:05 PM
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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum