Need help is CSS

montyvan · November 1, 2011, 8:58pm

Hi,

Thanks you all for the great CSS resources on this site.
I am playing with a small page and here is my code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"> 
 
body{ 
background-color:#D87093;
font-size:16px; 
margin:0; 
padding:0;
}
 
#header{ 
margin-right:200px;
margin-left:200px;
background-color:#008B8B;
height:150px;
border:1px solid brown
}
 
#left{ 
float:left;
width:200px;
background-color:#2E8B57; 
min-height:680px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:680px; /* for IE5.x and IE6 */
}

#right{ 
float:right;
width:200px;
background-color:#2E8B57; 
min-height:680px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:680px; /* for IE5.x and IE6 */
}
 
#center 	{ 
margin-right:200px;
margin-left:200px;
background-color:#C0C0C0; 
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
border:15px solid blue
}
 
#footer { 
clear:both;
background-color:#333;
height:100px;
}


</style>
</head>
<body>
<div id="header">This is a test text
	</div>
<div id="left">
	</div>
<div id="right">
	</div>
<div id="center">
	</div>
<div id="footer">
	</div>
</body>
</html>

I have two questions :

How do I make the rightmost and leftmost green columns to start from top left and top right corners?
If I add content to the center pane, these two(rightmost and leftmost) columns should extend as required. How do I achieve that in CSS?

Thanks and sorry about the basic questions.
-M

ralphm · November 2, 2011, 12:16am

Hi montyvan. Welcome to SitePoint.

You are better off doing something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"> 
 
body{ 
	background:#333;
	font-size:16px; 
	margin:0; 
	padding:0;
}

.wrap-outer {background: #2E8B57;}
.wrap {margin: 0 200px;}
 
.header{ 
	background:#008B8B;
	height:150px;
	border:1px solid brown
}
 
.content {
	background:#C0C0C0; 
	min-height: 650px;
	border:15px solid blue
}

 
.footer { 
height:100px;
}


</style>
</head>
<body>
	<div class="wrap-outer">
	<div class="wrap">
		<div class="header">This is a test text
		</div>

		<div class="content">
		</div>
	</div><!-- end wrap div -->
	</div><!-- end wrap-outer div -->
	<div class="footer">
	</div>
</body>
</html>

Everything will expand nicely that way.

Wrna · November 2, 2011, 10:03am

hi montyvan,
I found you have problem with the layout construction. There should always be a wrapper to wrap all your content (header, left, right,center and footer) and then it will be easy for you to play with the margin as to bring the whole wrapper in the center of the browser, you can just do like
margin:0 auto;
and define certain width to it.
and then you will work in the inner contents…:)… I hope you got few ideas on layout construction.

ralphm · November 2, 2011, 10:16am

That’s not the intention of this particular design, though, which has a fluid width with a fixed margin on each side.

montyvan · November 2, 2011, 1:47pm

Thank you Ralph and Wrna for your valuable answers.

montyvan · November 2, 2011, 4:07pm

Hi,

Just wanted to follow up on my understanding of the above code and couple of questions :

The code “.wrap {margin: 0 200px;}” indicates that apply margin of 200px on right and left and zero margin on top and bottom(I quickly went through “TRouBLe Mnemonic” to make it meaningful).

‘.wrap-outer {background: #2E8B57;}’ tells browser to fill whole background with color ‘#2E8B57’.
The HTML starts with Body tag. Hence the body’s background(#333) is applied first. Next the wrap-outer is applied, which paints whole body with ‘#2E8B57’. Is this correct understanding?

Also, how browser knows to apply the .header and .footer to start from the top and bottom respectively? What I mean to ask is we did not define anywhere to apply height of 150px “beginning from the top”. But still it is applied from the top. Is that a default behaviour? (Looks like need some explanation about the absolute positioning).

I have the same question for .footer also. How does it undertand to apply ir from the bottom?

Thanks a lot for all your help.
-M

ralphm · November 2, 2011, 5:06pm

The code “.wrap {margin: 0 200px;}” indicates that apply margin of 200px on right and left and zero margin on top and bottom(I quickly went through “TRouBLe Mnemonic” to make it meaningful).

Yes.

‘.wrap-outer {background: #2E8B57;}’ tells browser to fill whole background with color ‘#2E8B57’.
The HTML starts with Body tag. Hence the body’s background(#333) is applied first. Next the wrap-outer is applied, which paints whole body with ‘#2E8B57’. Is this correct understanding?

The last bit is not quite right. The .wrap-outer background is the green bit, which applies to everything inside that div, which is everything except the footer. I put the footer color on the body, because then you don’t need to apply a footer color as the body color deals with that and the footer color effectively goes to the bottom of the page (instead of having a white gap at the bottom on short pages).

Also, how browser knows to apply the .header and .footer to start from the top and bottom respectively? What I mean to ask is we did not define anywhere to apply height of 150px “beginning from the top”. But still it is applied from the top. Is that a default behaviour? (Looks like need some explanation about the absolute positioning).

There’s no absolute positioning here. By default, elements sit atop each other, starting from the top. The footer doesn’t ‘start at the bottom’, so to speak. It just sits under everything else, pushing up as far as it can.

If that doesn’t explain it, please ask further.

montyvan · November 2, 2011, 5:22pm

Got it. Thanks.

One last question :

It just sits under everything else, pushing up as far as it can.

The .footer is defined at the bottom most position. So that is reason it is applied to the page after everything else is applied. And that makes it to go to the bottom. Is this correct?

Also, another question :
I wanted to add background image for for only content pane. I did this :


.content {
	background-image: url(some_image.jpg); <!--Image is available in the same foder as the html file-->
	<!--background:#C0C0C0;-->
	min-height: 650px;
	border:15px solid blue
}

It does not seem to work. Do you know what is wrong?

Once again, very thankful to you and sorry about newbie questions.
-M

ralphm · November 2, 2011, 5:34pm

The .footer is defined at the bottom most position. So that is reason it is applied to the page after everything else is applied. And that makes it to go to the bottom. Is this correct?

Yes. HTML ‘block’ elements (such as <div>s, <p>) stack one on top of another in the order they appear in the HTML. You can change this with CSS (e.g. float them side by side), but that’s the basic default scenario.

I wanted to add background image for for only content pane. I did this :


.content {
	background-image: url(some_image.jpg); <!--Image is available in the same foder as the html file-->
	<!--background:#C0C0C0;-->
	min-height: 650px;
	border:15px solid blue
}

It does not seem to work. Do you know what is wrong?

That’s basically OK, except that you have HTML comments inside your CSS, which will break it. Try something like this:


.content {
	background: #C0C0C0 url(some_image.jpg);[COLOR="#0000FF"] /* Image is available in the same foder as the html file */[/COLOR]
	min-height: 650px;
	border:15px solid blue
}

Notice how I’ve combined everything in the background: shorthand statement. (Background color and background image). I’ve also kept your comment but used CSS comments (in blue).

Note that no position for the image has been set, so at the moment, the image will be positioned top left of the .content div and repeat vertically and horizontally to fill the whole content area. If that’s not what you want, you can add no-repeat:

background: #C0C0C0 url(some_image.jpg) no-repeat;

There are lots of variations, so maybe clarify what you need here.

montyvan · November 2, 2011, 5:54pm

Thanks a lot. Looks like I mixed two different comment notations.