Column Header Background

vipercode · 02-12-2013, 10:36 AM

I need to craft my css more efficiently to eliminate redundancy, repeating values and overqualified elements.

Because I would like to have sections for header in the column that has own background but not repeating values and or overqualified elements. Example of the 3 column header sections I would like to create are like at this website or something simular http://www.havealook.com.au/

I have a idea but not properly understand as I am a Semi-Beginner here is a sample of what I think but not sure of what type of elements should be.

use to do each element like this column-1, column-2, column-3,

but sorta now do it like this and so on but have some difficulty understanding .col3 {styles}

header1, header2, header3, and specific backgrounds

.col3-header{styles}
.bg-blue{styles}
.bg-gren{styles}
.bg-red{styles}
instead text-area1,text-area2,text-area3

.col3 p{styles}

Not Sure correct html lay out or css lay out need a sample demo to learn off if any one can point me in the right direction.

Sorry if can understand it all

tracknut · 02-12-2013, 04:07 PM

That site uses a table for those three columns, I wouldn't use it as your example. Here's a minimal example that might get you going:

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
		<style type="text/css">			
		.box {width:300px;float:left;margin:5px;color:black;border:1px black dotted}
		.box h1 {width:100%;color:white}
		.box h1.green {background-color:green}
		.box h1.red {background-color:red}
		.box h1.blue {background-color:blue}
		</style>

	</head>
	<body>
	<div class="box">
		<h1 class="green">Column 1</h1>
		<p>hi there</p>
	</div>
	<div class="box">
		<h1 class="red">Column 2</h1>
		<p>hi there</p>
	</div>
	<div class="box">
		<h1 class="blue">Column 3</h1>
		<p>hi there</p>
	</div>
	</body>
</html>

Dave

sunfighter · 02-12-2013, 04:58 PM

apologies tracknut, I was working on the page example and when I got here you had posted. Not trying to step on your work, it's just that I spent some time on my code and want a shot at showing it. No hard feeligs I hope.

Some of the page in divs:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
#mainImage{
	height: 300px;
	width: 950px;
	background-color: blue;
	color: white;
	margin-bottom: 10px;
}
#LeftBlock{
	height: 190px;
	width: 310px;
	border: 1px solid gray;
	float:left;
	margin-right: 7px;
	margin-bottom: 10px;
}
#MidBlock{
	height: 190px;
	width: 310px;
	border: 1px solid gray;
	float:left;
	margin-right: 7px;
}
#main{
	overflow: auto;
	width: 628px;
	height: 200px;  // ONLY HERE TO SHOW SOMETHING REMOVE!!!
	float:left;
	border: 1px solid blue;
}
#mainLeft{
	width: 638px;
	float:left;
}
#mainRight{
	width: 300px;
	float:right;
}
#RightBlock, #nextBlock, #lastBlock{
	height: 360px;
	width: 309px;
	margin-bottom: 10px;
	border: 1px solid gray;
	float:right;
}
#container{
	width: 950px;
}
</style>
</head>

<body>
<div id="mainImage">This is Banner rotating images</div>
<div id="container">
	<div id="mainLeft">
		<div id="LeftBlock">LeftBlock</div>
		<div id="MidBlock">MidBlock</div>
		<div id="main">main</div>
	</div>

	<div id="mainRight">
		<div id="RightBlock"><img src="http://i815.photobucket.com/albums/zz74/sunfighter41/Enquire_zps8e2fd55c.png" /></div>
		<div id="nextBlock">MORE STUFF</div>
		<div id="lastBlock">more stuff</div>
	</div>
</div>
</body>
</html>

tracknut · 02-12-2013, 07:53 PM

No worries, Sunfighter. I've been there myself

Dave

vipercode · 02-13-2013, 10:05 AM

Thank you all will post my demo of my work soon