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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    120
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Macintosh Column Header Background

    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

  2. #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,872
    Thanks
    12
    Thanked 401 Times in 398 Posts
    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

  3. Users who have thanked tracknut for this post:

    riwakawd (02-13-2013)

  4. #3
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,424
    Thanks
    30
    Thanked 878 Times in 876 Posts
    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>

  5. Users who have thanked sunfighter for this post:

    riwakawd (02-13-2013)

  6. #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,872
    Thanks
    12
    Thanked 401 Times in 398 Posts
    No worries, Sunfighter. I've been there myself

    Dave

  7. Users who have thanked tracknut for this post:

    riwakawd (02-13-2013)

  8. #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    120
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Thank you all will post my demo of my work soon


 

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
  •