DEMO!

So as you’ve seen what we are going to end up with. Let’s start working for it.

Add Mark Up:

Inside the content division start by adding a H2 heading and type any heading between the tags. Add a few paragraphs and at-least two images, give one of them a class of rightimg and the other one leftimg. You can add more images but make sure you give them any one of the two class I just mentioned.

<div id="content">
	<h2>This is a heading:</h2>
	<img src="./images/leftimg.png" alt="Title of the image" class="leftimg" />
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	<img src="./images/rightimg.png" alt="Title of the image" class="rightimg" />
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div><!-- end content -->

As we are adding content to the division I would like to share an amazing service I always use. It’s a Chris Coyier project called HTML-Ipsum. This is special: as clicking on any heading will copy the respective mark-up onto your clipboard. For example, if you want to add a couple of paras to the page, instead of finding the lorem ipsum routine online, go to HTML-Ipsum and click on Medium Paragraph come back to your source code and start pasting it. Trust me in the long run it will really make your life easier.

After we’ve added content to the content division, after the closing tags of content division and content-container division, right before closing tag of the container division(the main website container) add this code:

<div id="footer">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Feedback</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<span id="copy">© Copyrights 2009</span>
</div><!-- end footer -->

If we view the page in the browser, we can see the non styled part of the page.

Let’s Style It:

The CSS code below should be added to the master CSS file. Due to some rendering issues on the page there were few minor tweaks(mostly width and border) I had to do in the master CSS file. Although I have notified most of the issues in the CSS file as comments, I would tell you a method to check the differences between your code and the downloadable source code available below. Google a software called WinMerge or goto: winmerge.org (for MAC users the software is: MELD). These softwares let you find differences between two text files. Just compare your master.css with my downloaded master.css and it will highlight all the differences for you. Me being a Windows User have experience with WinMerge and it’s awesome. As of MELD is supposed to be the MAC alternative for WinMerge and hopefully it will be good. Although I would like to know about it through the comments.

As of my CSS code, it is filled with explanatory comments and is pretty easy to understand.

/* Inside Content */

/*
I have changed the width of the content division we made in the last tutorial by 2 pixels as I have added 1 pixel left and right borders to it.
*/
#content{
overflow:hidden;/* as we will be floating elements inside this (mostly images)*/
/*you can and you should insert this property with the content division properties above I have placed it here to let you know that I have added this now*/
}
#content img{
background: #fff;
padding:5px;/*so the white background is visible*/
border:1px solid #000;
}
#content p{
margin-bottom:10px;
line-height:130%;/*to increase the vertical spacing between lines*/
}
#content h2{
font-size:25px;
font-weight:bold;
color:#263f5d;
font-family:Times, Times New Roman, Georgia, serif;
padding-bottom:5px;/*to make space between the border and text*/
border-bottom:2px dotted #263f5d;
margin-bottom:10px;
}
img.leftimg{/*a class for floating images left*/
float:left;
margin-right:5px;
}
img.rightimg{/*a class for floating images right*/
float:right;
margin-left:5px;
}
#footer{
width:958px;/*as there are left and right borders of 1px each which makes it 960*/
border:1px solid #444;
border-bottom:none;/*to remove the border-bottom*/
background:gray url('../images/footer-bg.png') repeat-x;/*just made a 1px wide and 80px long gradient image and repeated the background on the x-axis*/
height:80px;
line-height:80px;/*to vertically center the inline elements inside it*/
clear:left;/*for clearing the float of sidebar and content. had to insert it as the page wasn't rendering properly*/
/*for some reason our overflow hidden isn't clearing this float. Therefore the clear: left;*/
overflow:hidden;/*for clearing floats inside it*/
}
#footer ul{
width:50%;
float:left;
margin-left:10px;
}
#footer ul li{
display:inline;
margin-right:30px;
}
#footer ul li a{
color:#fff;
text-decoration:none;/*to remove the underline*/
}
#copy{
color:#fff;
float:right;
width:auto;
margin-right:10px;
}

If there are any queries please notify me in the comments and I will try my level best to help you with the code. You can also suggest tutorials you want in the comments. Also, please subscribe to my RSS feed, it will help me reach you much faster.

Thanks for reading!
Download the Source Code

OK! Before starting let me warn you that this technique is totally based on HTML & CSS, so make sure you take care of all this on the server end as-well, which basically means that if the page in the background has a form, then it shouldn’t be active & things like that. So moving on: I have taken an old template I was working on to show the Lightbox overlay effect on it. It is shown below; you can take anything you like instead.

We obviously wouldn’t be making this template here.

What We Need:

• Make a 1px * 1px image in Photoshop and fill a new layer with black and reduce it’s opacity by 50% then hide the background layer and save the transparent image as a 24bit PNG in the images directory name it overlay.png
• Make another image around 400px wide and make something you want to display on a page under maintenance and save it in the images directory name it maintain.png

Moving on: Once you have the page to be in the background open it in a text editor of your choice; As the body tag opens, place this code(even before the container).

<img src="./images/maintain.png" id="maintain" alt=”Under Maintenance” />
<div id="overlay">&nbsp;</div>

It is the hierarchy we need to understand here. We want to display a dark transparent overlay on the whole page therefore we place the division with an id of overlay on the top and then we want to display a maintenance image on top of it and so we place the img tag with that image even on top of the overlay division.

Now make a new stylesheet in your CSS directory, call it technique.css, include it on the page and then place this code in it. (You can place this code in your master stylesheet as well).

#overlay{
width:100%;
height:1100px; /*about the height of the background page*/
background:url('../images/overlay.png') repeat; /*to include & repeat the image on the whole page*/
position:absolute; /*to place it anywhere on the page*/
top:0;/*start from  the top*/
left:0;/*and start from  the left*/
z-index:90; /*tells the browser that it should be displayed above the items with a “z-index” value less than 90*/
}
#maintain{
position:absolute;
left:50%; /*so the image starts after half of the page from the left */
top:50%; /*so the image starts after half of the page from the top */
margin: -140px 0 0 -200px; /*we bring up the image by half it’s height and bring it left by half it’s width*/
/*now the image should be in the center of the page.*/
z-index:100; /*tells the browser that it should be displayed above the items with a “z-index” value less than 100*/
}

IE6:

To make the transparent background image render transparent in IE6, download the DD_belatedPNG JavaScript. Place the .js file in the js directory of the page and if the IE browser version is less than 7 then include it in our page right before ending the body tag, then open another script tag and run the fix method, pass in the ID of the overlay division in it. To know more about the DD_belatedPNG read it’s documentation.

<!--[if IE 6]>
<script src="./js/DD_belatedPNG_0.0.7a-min.js"></script>
<script>
  DD_belatedPNG.fix('#overlay');
</script>
<![endif]-->

I’ll be continuing with the Build-Up Series in the next post.

Thanks for reading!

Download the Source Code!

So as per the preview picture above we will be creating the sidebar of the website and make the main content container ready to work with, for the next part of this tutorial series.

Preparing:

• First we will go to the jQueryUI website and click on build custom download.
• Now we deselect all the options and then reselect only the ones we need.

What we need:

• We need the UI Core.
• We need only one widget: Accordion.
• We need only Effects Core.
• Make sure to make the download 1.5.3 (Legacy release, for jQuery 1.2.6).

Now, open the zip file downloaded and go into the js folder and copy the file “jquery-ui-1.5.3.custom.min.js” into a new folder in your website directory, call the folder js. We will not be needing the jQuery JavaScript because we will be using google’s CDN to jQuery as it saves us bandwidth and it is cached on a lot of computers already, therefore, makes the site faster.

Now, for our curved corners go to: blue-anvil and download the Anti-Aliased rounded corners with jQuery zip file. Open the zip file and copy “jquery.curvycorners.packed.js” into the js folder of our website directory.

We then include all the JavaScript files in our web page right before ending the body tag:

<!-- From here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script><!-- This is google's free link to the jQuery library -->
<script src="./js/jquery-ui-1.5.3.custom.min.js" type="text/javascript"></script>
<script src="./js/jquery.curvycorners.packed.js" type="text/javascript"></script>
<script type="text/javascript">
    //jQuery code here...
</script>
<!-- Till here -->
</body>

So from here we finally start coding. Open our index.html in a text editor and start right where we left off i.e. after closing the header division and we will finish our code right before the end of the main container tag which we made in the last tutorial.

</div><!-- end header -->
<!-- Start here -->
<div id="content-container">

	<div id="sidebar">

		<h3>Products:</h3>
		<div id="accordion-container">
			<ul id="accordion">
				<li>
					<a href="#recent" class="heading">Recent Entries</a>
					<ul id="recent">
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
					</ul>
				</li>
				<li>
					<a href="#popular" class="heading">Popular Entries</a>
					<ul id="popular">
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
					</ul>
				</li>
				<li>
					<a href="#categories" class="heading">Categories</a>
					<ul id="categories">
						<li><a href="#">Category Name</a></li>
						<li><a href="#">Category Name</a></li>
						<li><a href="#">Category Name</a></li>
						<li><a href="#">Category Name</a></li>
						<li><a href="#">Category Name</a></li>
					</ul>
				</li>
				<li>
					<a href="#archive" class="heading">Archive</a>
					<ul id="archive">
						<li><a href="#">January 2009</a></li>
						<li><a href="#">January 2009</a></li>
						<li><a href="#">January 2009</a></li>
						<li><a href="#">January 2009</a></li>
						<li><a href="#">January 2009</a></li>
					</ul>
				</li>
			</ul><!-- end accordion ul -->
		</div><!-- end accordion-container -->
		<h3>Latest Updates:</h3>
		<div id="curved-box" class="corner-this">
			<marquee onMouseOver=this.scrollAmount=0 onMouseOut=this.scrollAmount=2	scrollamount=2 direction="up">
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
			</marquee>
		</div><!-- end curved box -->

	</div><!-- end sidebar -->
	<div id="content">
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
	</div><!-- end content -->
</div><!-- end content-container -->
<!-- End here -->
</div><!-- end container -->

In the above code: we opened a new container division in which we floated two divisions: a sidebar division to the left and a content division to the right. I gave the content division just a basic padding and then pasted in some gibberish text which we will remove the next time we start working on it. Then, In the sidebar container there are two main elements the accordion container inside which is an unordered list in which there is another unordered list inside each list item and then there a curved-box division inside which is a marquee tag which I don’t recommend using but I still have placed it there so the page looks a little more lively. I’d recommend a great slider you can use instead made with jQuery called Easy Slider. Now back to what we are making, below is my CSS code which is quite self explanatory as it is well commented.

#content-container{
	width:100%;
	height:auto;
	overflow:hidden; /* for clearing the floats inside it */
	float:left;
}
#sidebar{
	width:300px;
	margin-right:5px;
	float:left;
}
#sidebar h3{ /* these are the two headings. Products and Latest Updates */
	font-family:Arial;
	font-size:15px;
	color:#000;
	padding:10px;
}
#content{
	float:left;
	width:634px; /* because of 1px border to this element, else it would be 635px  */
	height:800px; /* temporary */
	padding:10px;
	background:#c4c4c4;
	border-bottom: 1px solid #444; /* temporary */
	border-left: 1px solid #444;
}
/* Accordion */
#accordion-container {
	width: 290px;
	margin:0 0 10px 7px; /* top right bottom left */
}
ul#accordion, ul#accordion ul { background:#f8f7f7; }
ul#accordion { border-bottom: 1px solid #444; }
ul#accordion li {
	border: 1px solid #444;
	border-bottom: none; /* to avoid double borders at bottom */
}
ul#accordion ul li {
	border: none; /* to remove the excess borders from previous properties */
	border-bottom: 1px solid #C2C8D1; /* and then put what we like. */
	padding: 5px 10px;  /* [top | bottom] [left | right] */
}
ul#accordion ul li:last-child { border-bottom: none; } /* to remove the borders from the last list element */
ul#accordion a.heading { /* the big menu names in the accordion */
	background: #d9d4ce;
	color: #46382f;
	display: block;
	font-size: 18px;
	line-height: 18px;
	padding: 10px 5px;
	text-decoration: none;
}
ul#accordion a.heading:hover { /* mouseover the big menu names in the accordion */
	background: #46382f;
	color: #fff;
}
ul#accordion li ul a { /* the inside-menu elements */
	color: #000;
	text-decoration:none;
}
ul#accordion li ul a:hover { border-bottom: 1px dotted #46382f; } /* to give the inside-menu elements mouseover */
/* End Accordion */
#curved-box{
	background:#d9d4ce;
	width:288px;
	height:205px;
	padding:10px;
	border:1px solid #444;
	margin:10px 0 10px 7px;
}
#curved-box p{
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom: 1px dotted #444;
}

Even though you have styled all the elements the accordion is not together and the curved box doesn’t have the curved corners yet. Not to worry we only have to write a few more lines of code to accomplish that. Right before the body tag we inserted our scripts, but if you look carefully we inserted three scripts and a fourth empty script tag with only a comment in it saying jQuery code here. Remove that comment and paste the code below in it’s place.

$(function(){
	$('#accordion').accordion();
	$('.corner-this').corner();
});

Refresh your page and play around with the accordion and admire the anti-aliased curved corners.

Also, I have started my community link feed as you can see in the sidebar (Thanks to Collis Ta’eed’s Great Tutorial) So please contribute to it. It takes less than a minute to submit a link there. So if you happen to have or know a link to a great tutorial or tip or a great article about web design & development please submit it here

Thank You

Links:

• jQuery UI
• Anti-Aliased Curved Corners – Blue Anvil
• Easy Slider

Download the Source Code

I will be making this assuming that you have a basic knowledge of HTML & CSS. If not so, check out the links at the end of the post for Basic HTML & CSS Tutorials else where on the web.

Step 1 : Creating a framework

We will start with the Basic HTML. We will be creating a 960px wide page. It will contain a Container division, which will be the wrapper for the whole page, A Header division which will be our focal point for today, it will contain a logo, a tagline, a seach bar, and a tabbed navigation.

<html> 

<head>
<title>Website Name | Maybe the tagline</title>
<!-- stylesheets begin -->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/master.css" />
<!-- stylesheets end -->
</head> 

<body>
<div id="container">
    <div id="header">
        <img id="logo" src="./images/logo.png" alt="Company Name" />
        <p class="tagline">This is a tagline space...</p> 

        <form action="#" method="post" id="search-form">
                <input type="text" size="35" id="search-box" />
                <input type="image" src="./images/submit-button.png" id="search-button" />
        </form> 

        <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a></li>
                <li id="active"><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
        </ul>
    </div><!-- end header -->
</div><!-- end container --> 

</body>
</html>

In the above code I have attached two stylesheets inside the head tag, a reset CSS file and a master CSS file for the main styling. In-case of complex layouts we also attach a separate stylesheet for IE6 i.e. only if we are intending to support it.

Inside the body tag we add ID attribute to the tags to separately target our styles to them using the stylesheet and give a class to tags that could be repeated more than once on our page so we can target all of them and style only once for them:

• We start with a container tag
• Inside the container we insert a header tag with an ID of header and set 100% width (which we will set inside our master stylesheet).
• Inside the header we go according to the hierarchy in the preview above.
• So we insert an IMG (Image) tag inside the header and link it with the logo image in our images directory.
• Next we insert a P (Paragraph) tag and give it a class of “tagline”.
• Next we insert a Form tag which is required for a form to work and will also help us style better. Therefore, we will give it an ID of “search-form”.
• Inside the Form tags we insert two input tags one for the search text box and one for the search button only instead of a button we’ll use an image.
• To the first input tag we give a type attribute with a value of text which renders it into a text box.
• To the second input tag we give a type attribute with a value of image and add a src attribute just like an IMG tag and link it with the search button image in our images directory and render our submit button as an image.
• We can give both the input tags a separate ID for advanced styling of the search box, which in our case we will have to.
• Next we will insert an UL (unordered list). A separate ID is not required as it is the only list inside the header.
• We will give an ID of active to one of the list items in the unordered list to make it the active tab.

Step 2 : Reset the styles

Resetting a document is a very basic technique, some designers like it some don’t, therefore this part is really up to you. As such for me, I’m a big fan of reset files. I use Eric Meyer’s super famous CSS Reset with some properties added and some removed and made it work for me pretty fine.

/*
Reset CSS File
Author: Aayush Shastri
Author URI : http://www.webmuch.com
*/
html { overflow-y:scroll; } /*for browser that don't have default y-axis scrollbar*/
html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p,
a, img, small, strong,
ol, ul, li,
fieldset, form, label, legend,
table, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
img { vertical-align:middle; }
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix { clear:both; } /*we probably wont be needing this, but good to have a utility incase we need it.*/

You can make your very own Reset file as well, for inspiration check out Eric Meyer’s Reset , YUI Reset. I will provide all the links below at the end of the post. Reset can be as small as padding:0; margin:0;

Step3 : Styling Our Layout

body{
font-family:Arial;
font-size:13px;
background:#ccc url('../images/header-bg.png') repeat-x top left; /* to make the navigation list look & behave like tabs. for the tabs check out A List Apart tutorial. link at the bottom of the post */
}
#container{
width:960px;
margin:0 auto; /* for centering the container. Means 0 margin from top and the bottom and Automatic margins for left and right. */
overflow:hidden; /* for clearing floats inside it */

border-right:1px solid #000; /* only to know the edges. to be removed at the end */
border-left:1px solid #000; /* only to know the edges. to be removed at the end */

}
#header{
position:relative; /* to absolutely position the ul at the bottom right side of this */
float:left;
width:100%;
height:150px;
overflow:hidden; /* for clearing floats inside it */
}
img#logo{
float:left; /* for getting the tagline inline with it. instead of below it. */
margin:60px 15px 0 5px; /* margin: top right bottom left; */
}
.tagline{
float:left; /* for getting the search form inline with it. instead of below it. */
margin:70px 0;
height:20px; /* for IE6 */
}
#search-form{
display:inline; /* for IE6 */
float:right;
margin:55px 10px 0 0;
}
#search-form input{
float:left; /* for getting the search box and submit button inline with each other. */
}
#search-box{
background: url('../images/search-bg.png') repeat-x top left; /* the background gradient repeated on the X-Axis */
border:1px solid #c9c9c9;
border-right:none; /* to make the illusion of the search box and button being joint */
color:#ebebeb; /* text color */
padding:8px;
}
#header ul{
position:absolute; /* to absolutely position this at the bottom right side of the header */
bottom:0; /* 0px away from the bottom */
right:10px; /* 10px away from the right */
margin:0;
padding:0;
overflow:hidden; /* for clearing floats inside it */
}
#header ul li{
display:inline; /* for IE6 */
margin:5px 10px 0 10px;
padding:0 0 0 13px; /* padding: top right bottom left; */
background:url('../images/left.png') no-repeat left top;
float:left;
}
#header ul li a{
display:block;
text-decoration:none;
color:#fff;
background:url('../images/right.png') no-repeat right top;
padding:5px 15px 5px 0px;
}
#header ul li#active{
background:url('../images/left-hover.png') no-repeat left top;
}
#header ul li#active a{
background:url('../images/right-hover.png') no-repeat right top;
padding:5px 15px 6px 0;
color:#000;
}

The master stylesheet above is highly commented and easily understandable, to better understand the tabs I highly recommend A List Apart’s Sliding Door Tutorial

Extra Information – Basic Size and Structure

To understand the master.css better. This image should help. This image shows the height and width of elements inside the header. It also shows their margins and paddings as-well. The purple highlighted areas are the margins and the red highlighted area inside the search textbox is it’s padding.

Links:

• A List Apart’s Sliding Door Tutorial
• HTML & CSS – The VERY Basics
• HTML Beginner Course
• CSS Beginner Course
• Eric Meyer’s CSS Reset
• YUI Reset

Download the Source Code