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
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,428
    Thanks
    11
    Thanked 302 Times in 301 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

  • Users who have thanked tracknut for this post:

    riwakawd (02-13-2013)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 654 Times in 653 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>

  • Users who have thanked sunfighter for this post:

    riwakawd (02-13-2013)

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,428
    Thanks
    11
    Thanked 302 Times in 301 Posts
    No worries, Sunfighter. I've been there myself

    Dave

  • Users who have thanked tracknut for this post:

    riwakawd (02-13-2013)

  • #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
    •