Today I am starting an all new Website Build-Up Series. We’ll be creating a complete website containing a Home Page, a Products Display Page and a Contact Page with a contact form. Today we’ll be completing the header of the website which will be included in all the pages to come.
Date: April 8, 2009
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.
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.
RSS<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:
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;
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
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.
Comments currently closed.
When hundreds of web sites are designed up every other day, your website need to have something special to attract your potential customers.
Design magazines have always been a great source of inspiration for designers. It brings latest trends and new ideas into the mind of designers.
JavaScript has blossomed so rightly. Since then, there are jquery, Mootools , Scriptallicious, Prototype etc..which really produces cool effects. In todays time, java script is a must have component.
Invoicera has recently unveiled the release of their new fully blown web application with tons of powerful features to further simplify the management of bills and invoices. The new version is a complete makeover and you may probably even fail to recognize it.
After literally years of speculation, Apple’s tablet is here and it’s called the iPad. iPad runs almost 140,000 apps from the App Store. It’s also a useful tool for designers, illustrators and digital artists looking to get creative on the move.
Again it’s time for photoshop tutorials. The tutorials are good as an inspiration for creative ideas. You have to learn how to combine photos and add special effects to turn a normal photograph into a stunning artwork.
Choosing a CMS for your project depends upon the requirement and complexity of the project.
The iPhone is more than just a phone. It combines three devices in one: a revolutionary phone, a wide screen iPod and a groundbreaking Internet device.
CSS definitely provides you the ease of changing the appearance of your entire website by just modifying a single file. What makes the entire process of changing the CSS files more easy is the use of CSS Editors.BestDesignTuts.com has brought to you 14 such CSS Editors which will cut half of the work load of every designer.
404! Error Pages once used to be seen as the most unwanted page that any visitor would like to see, and therefore the designers did not give the required piece of attention to it.
Comments:
halocursed
April 8, 2009
Nice tutorial was really helpful..
Looking forward to your tutorials in the future!
Leo
April 9, 2009
Nice Tutorial..
jonathan
April 10, 2009
For a beginner like me, who is new to css this serves the purpose pretty well.
Thanks
Atul
April 10, 2009
Great tutorial and easy to understand!!I will be using your tutorial to create a website for my summer project..
Any how their is one error in your description of the reset file, if I’m not wrong it should be “URL” instead of “URI”..
Thanks a lot…
aayush
April 10, 2009
@Atul: thanks for the appreciation and for informing me about a mistake, although that is supposed to be URI and not URL. It is a wordpress technique where it picks up the Author URI of the theme from the CSS file itself. I’ll put up a tutorial about this sometime.
fernando
April 12, 2009
I was looking for tutorial like this.. i will follow this series.
Sorry for my English, it is not my first language.