Archive | October, 2008

Cross Browser Compatibility

25 Oct

There are literally hundreds of web browsers in use around the world. All of them implement the W3C document standards a little differently. Web designers must wrestle with these differences to make a web site work. This article discusses the effect those different implementations has on design.

What is Cross Browser Compatibility?

If a web page is completely cross-browser compatible, it will look more or less the same in all of the existing web browsers. The most commonly used browsers are Internet Explorer, Netscape Navigator, Firefox and Opera.

Each one of these browser implements HTML, JavaScript and Cascading Style Sheets (CSS) a little differently. Some difference only create cosmetic difference others can break the webpage. The situation gets worse because each browser is free to implement “enhancements” to the W3C standard version of each of these formats.

Then to compound matters even more the underlying operating systems also creates difference in how the computer displays graphical elements and text differently. When you add the fact that people are also using multiple versions of each of the browsers, no wonder web designers get headaches.

So what is a web designer to do?

Obviously, 100% compatibility with all potential browsers is impossible. But it is possible to design your web page so it will work in the most popularly used browsers.

To accomplish that, a web designer must write squeaky-clean code that conforms to the W3C standards to get consistent results across all browser platforms. The whole idea behind the standards is that if each browser adheres to the same set of rules, you will get more or less consistent results in all of the existing browsers.

Conforming can be a real challenge. It will limit some of the neater effects available in specific browsers. There are online code validators available. You can validate HTML code at validator.w3.org, the validator can also validate your CSS and links. The service is free.

The validator checks your code based on the DOCTYPE you specify on the webpage. The DOCTYPE tells the browser which version of HTML or CSS the web page is using.

HTML Editors

There are some compatibility issues associated with anything other than hand coding for HTML (and for that matter, even with hand coding.)

Best Choice – The best choice for compatibility is Dreamweaver but you cannot use layers. Layers must be converted to tables to be used.

Worst Choice – The worst choice is FrontPage. FrontPage is loaded with problems because it uses Microsoft and therefore internet explored specific code. Items that will not work in other browsers include:

  • Marquees – you can use a JavaScript scroller to create a similar effect that will work in the most common browsers.
  • bgsound tag – this is IE specific.
  • Page Transitions – this is IE specific.
  • Front Page generated Style sheets – this is IE specific and can have unexpected results or crash other browsers.
  • Front Page generated DHTML – it is better to use JavaScript to create the effects you want since it is more likely to be cross browser compatible.
  • Hover Buttons – this is IE specific and has been know to crash browsers including older versions of IE. You can use JavaScript, flash or CSS to get similar effects.

Other HTML Editors – the rest of the HTML editors will fall somewhere between Dreamweaver and FrontPage in cross browser compatibility. You just have to test the code your HTML editor generates.

CSS Style Sheets

Not all of your style sheets will work correctly in all of the browsers. However, style sheets rarely crash a web browser, but sometimes the pages will be downright ugly if not completely unreadable. One of the major CSS problems is absolute positioning since most browsers do not support it and it will cause different block to overlap others and create a jumbled mess.

Flash

Flash is great for adding style to a webpage and Macromedia provides flash plug-ins for all of the major web browsers. But don’t build the entire site with flash. Browser for the blind, most handheld devices do not support flash.

A small but significant number of users don’t like it and don’t install the plug-in so they won’t be able to access a flash site. Also, search engines spyders can’t follow the links on a flash site and won’t index it.

Graphic Links

While these are attractive, they have the same problems as flash with browsers for the blind and hand-held devices. Always use the alt tag with graphics.

Bottom Line – even code that is validated may not work correctly in all the major browsers. The best way a web designer can create cross browser compatibility is to test all of their web pages in the most popular browsers to see what happens. Personally, I find that a combination of style sheets and tables works best to ensure my pages look good in all of the browsers.

How to add a Favicon to your Website/Blog

25 Oct

If you have Photoshop knowledge, you can make your own icon image. Start with a 64×64 image and after you’ve finished your creation, resize it down to 16×16 and save it as .ico file. If you do not have the icon file format in Photoshop, you can download it here.

Download Photoshop .ico file format. Right-click on the link and and click “Save Link As…” to download. Place it under your Photoshop > Plug-Ins > File Formats folder.

For those who doesn’t play with graphics, or too lazy to make one, you could generate one using any images you like from this service at Chami.com

Or, you could use some of these ready-made Christmas-themed icons I’ve collected from the Internet.

Just right click on any of them and Save Image As “.ico” file.

Upload it to a webserver

Upload your favicon file to your webserver, if you have one. Or, you could place them on image hosting services like ImageShack, or Photobucket. Or, if you’re using Blogger to blog, you can just upload your icon file in their “Create Post” editor.

Execute the Icon from the Code

Put the following code within the <head> and </head> tags zone in your HTML or webpage.

<link rel=”Shortcut Icon” href=”http://www.alexallied.com/favicon.ico”&gt;

Just replace the URL of the icon with your own and you’re done! Enjoy your website/blog with new personalized favicon!

Horizontal And Vertical Centering

25 Oct

I know many people have wondered how to center their content both horizontally and vertically but never managed to find a solution on how to do this using CSS. I have seen people use tables to accomplish this, in this tutorial I will show you how it can be done.

We start off by using an IE (Internet Explorer) hack to make the height of the page 100%.

html, body {
height: 100%;
}

The next part of the code is to give our element an ID. You may find it easier to put whatever content you want centring inside a div tag, I find this works a lot easier, in the end it’s up to you.

CSS Code

<style type=”text/css”>
html, body {
height: 100%;
}

#centeredcontent {
}
</style>

We have our ID assigned, now lets move to our HTML and add the code there in the <body> of your page.

HTML Code

<div id=”centeredcontent”><p> This is centered vertically and horizontally on the page. </p></div>

Now we have our HTML done we need to format the DIV and position it using our CSS. No need to change anything on the HTML from now on.

Firstly, lets declare the following things:

  • Width
  • Height
  • Text Alignment
  • Border
  • Background Colour
  • Font Colour

So our CSS would look like:

<style type=”text/css”>
html, body {
height: 100%;
}

#centeredcontent {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid #000;
background-color: red;
color: #fff;
}
</style>

The width and height are both set to 100 pixels to keep things easy, you will find out why in a minute. This would set our content out how we want it to be displayed. Next step is to align it horizontally and vertically. This is done by using the following attributes;

  • position
  • left
  • top
  • margin-left
  • margin-top

These all state where the DIV should be positioned. We position the div absolute on the page and using the left and top attributes we set the div to 50% on each of them. This would make the top left corner of the DIV dead center of the page … but that isn’t what we want is it? We want the entire thing centered. This is where the margin-left and margin-top attributes come in. You remember I said use 100 pixels to keep things easy … well here’s why.

<style type=”text/css”>
html, body {
height: 100%;
}

#centeredcontent {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid #000;
background-color: red;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
/* Half the width of the DIV tag which is 50 pixels */
margin-top: -50px;
/* Half the height of the DIV tag which is also 50 pixels */
}
</style>

The left and top attributes make the top left corner of the DIV dead center, by giving margin-left and margin-top negative values of half the size we have moved the DIV back … 50 pixels, bringing the dead center of the page right in the center of the div making it aligned perfectly horizontally and vertically.

To view an example of a div aligned horizontally and vertically click here.

From Photoshop to XHTML and CSS

4 Oct

Welcome everyone, to another long yet humourous tutorial from me! This one is going to take you through every nook and cranny of taking a lovely, glossy layout from Photoshop and putting it into a webpage with no tables, valid XHTML and CSS.

Here’s the one we’re going to be working with today, and later on it should turn into something a little like this.

Click to enlarge

Click to enlarge

First of all, take a look at the layout and see which parts you can split it into. Remember that CSS can’t go round corners or angles and that every image has to have four points. (I can’t wait for circular images to come out..

For the example template, I’ve drawn on some guidelines for you:

Click to enlarge

Click to enlarge

Each colour denotes a different part of the layout. We can already see that it’s going to be quite complicated with the shadows and that background being tiled. Let’s set out what we’re going to do in plain English first.

Green area – this can be inside the body{} selector since it’s right at the background. We can use a tile for this. The shadows can be added by the side of the layout, or we can use a PNG with its alpha blending capabilities to do this slightly better.

The main layout – this can be put inside a container element, like a <div> for example set to a fixed width if we don’t want it to be liquid. This can also help alignment problems as well.

Blue nav area – this can be a div with either an inline displaying list inside it for the links, or if we’re looking to have some more effects on it, we can just style our links inside the div only.

Yellow area – this can be the background for the content holding div, which can then contain the following..

Content boxes – Each inside a separate div floating to the left or right depending on which side we want the content box. We can have, for the real content areas, a repeating background image with the shadow on either side. For the header, we can have the title image as a background which also includes the shadow, which will connect to the rest of the box. At the bottom, we’ll need an extra div to close the box’s shadow.

Now we’ve got that, we can now propose a structure for the HTML of this, barring CSS:

<body> <!– Styled –>
<div id=”container”>
<div class=”header”>
<!– Header goes here –>
</div>
<div class=”navigation”>
<!– Navigation items here – list or normal links –>
</div>
<div id=”main_content”>
<!– This is a sub container for the main content –>
<div id=”leftcol”>
<!– Left column stuff here –>
</div>
<div id=”rightcol”>
<!– Right column stuff here –>
</div>
</div>
</div>
</body>

Now to get styling. We’ve already got our CSS class and ID elements above, so just paste them into a new HTML document in Dreamweaver, for example, then you’ve already got our document model set up. Note: this is an XHTML 1.0 Transitional layout.

When doing layouts, I like to start building from the bottom upwards. If you think about it, the <body> is at the bottom of all these elements, so it’s a good place to start.

1: Hide the rest of your layout apart from your background. (Skip this if you haven’t got a background pattern!)

This can be done by organizing your layers into sets and then simply hiding the layer set.

image 3

2: Select the eyedropper tool and get the main colour of your background. Zooming in isn’t a crime! Do it if you must (and you probably will..)

In this case, it’s #F7F5BF.

Great! If you’ve got a pattern, then you’ll have to select the pattern in such a way that it doesn’t repeat incorrectly. I’ll do a tutorial on this some other time, but I’m assuming you’ve got at least a little bit of brains to do this properly. If not, there’s always trial and error – or you can just ask me.

3: Set this to your body tag and then make sure all margins are set to zero.

This is pulled off by the following code:

body {
background-color: #F7F5BF;
color: #000; /* needed to keep the css validator happy */
margin: 0;
padding: 0; /* incase any crazy users specify in their browser settings they want a padded window.. */
}

And now for dealing with your container element. Well, this is pretty easy since you only need to specify the width you want and then set it to be centered in the browser.

1: Whip out your ruler!

..by pressing CTRL+R in Photoshop. You’ll need to right click one of the axes on it and make sure it’s set to pixels, and nothing else. Then, click the origin of the rulers and drag it towards where your layout starts. This includes shadows and any other effects.

Click to enlarge

Click to enlarge

All you have to do now is scroll across and then take the reading from the other side, which in this case comes to the magic number of: 710px. Congratulations, you now know the size your container div should be.

2: Set this in CSS.

Simple code really, if none of you knows about centering in CSS without using the text-align property, you can use margin instead!

Let’s not forget that inside the container we have a slightly different background colour. It’s time to get out your eyedropper tool again, reading as #F8F7E7. We’ll put it in here as well. But, have you not noticed the shadows on the sides? They’re the same colour all along, and if they go across the whole layout then why not set them as a background image tiling downwards as well? Time to take out your selection tool and select between the shadows. A quick tip for this is to only make it a few pixels high, since if it’s going to be tiled then it will automatically be repeated. By doing this we can reduce load time and file size

Click to enlarge

Click to enlarge

Once we’ve got it selected, go:

Edit->Copy Merged
File->New [Dimensions from clipboard]

In the new canvas, Edit->Paste/CTRL+V

By using the Copy Merged tool, this means we copy everything we see. If we only copied from layer, we would only copy from that layer – therefore potentially missing out some details and making some mistakes.

Once we’ve done that and pasted it in the new canvas, we’ve got the new image.

So now it’s time to save it. Go to File->Save For Web and save it as “container_background.jpg”, or something to that effect. Place it in your images folder to be organised!

Here goes:

div#container {
margin: 0 auto 0 auto; /* top and bottom: 0, sides: flexible (stretches) */
width: 710px;
background: #F8F7E7 url(images/container_background.jpg) repeat-y;
color: #000; /* again, for the w3c validator to stop hyperventilating */
}

Where are we now? We’ve got the two “bottom” elements done, it’s now time to use and abuse the marquee/selection tool a bit more…

For the header, we’ll just have to select whatever we see, use Copy Merged again, paste it into a new canvas, save and add the CSS. Does that sound complicated to you? It’s not, really. Here we go:

Click to enlarge

Click to enlarge

We also need to get the widths of this, so right after you’ve pasted it into the new document you can find out the image dimensions by going to Image->Canvas Size, where the dimensions will automagically appear before your eyes. That is, unless you’re blind.

image 7

709*127.. my favourite graphic size.. mmm.

Once again, save it for the interwebs, and save it in your images folder as the sweet and simple “header.jpg”.

Now, it’s time to add the CSS. If you think you’ve got the brains to do this then do it yourself, otherwise get a hold of this CSS:

div.header {
background: url(images/header.jpg) no-repeat;
height: 127px;
width: 709px;
}

But, perhaps you’d like some invisible text in there for search engines as well?

Yup – that would be a pretty good idea, it being your header and all. Here’s the code, and a little example usage:

div.header * { /* * – denotes any tag to be used */
display: none;
visibility: hidden;
}

And the example usage of this would be like so:

<div class=”header”>
<h1>HEY MR. GOOGLE, THIS IS MY HIDDEN HEADING TAG!</h1>
<h6>Note: Google will hate you if you load hidden text with keywords. Keep it relatively keyword rich, but be wary..</h6>
</div>

We’ve now got the header, the container and the body styled. Looking good, right? Now for the navigation.

The navigation isn’t a tricky part of a layout, but it is definitely the most customiseable. You have a lot of work to do however..

1: Whip out the selection tool (again) and select the navigation’s main background part. This can then be tiled sideways. The image helps a bit more:

Click to enlarge

Click to enlarge

Do the same old procedure with copying it, pasting it into a new document then saving it. I saved mine as “navigation_bg.jpg” in images.

2: Your CSS.

So, we’ve got the shadows on either side of us because of the container div’s style. If we just put the background on, it wouldn’t want to work properly and it would go over the shadows. To solve this we use the margin element with the style, to “cut off” the parts that would overlap.

div.navigation {
background: url(images/navigation_bg.jpg) repeat-x;
height: 26px; /* this is the height of the image! */
margin: 0 5px 0 4px;
}

Now, this isn’t the only code we’re going to use for the navigation. We’ll come back to this later, when I explain why. For now, let’s move onto the main content area.

Remember that shadow I was talking about earlier, just under the navigation? We can put this into the content area style since it comes directly under the navigation. Here’s what I selected, along with the Copy Merged, New Document, Paste (CNP) procedure. I saved mine as “content_shadow.jpg” in the images folder:

image 9

And for your CSS, we’ll have to add the margin properties again. Then, I’ve added 10 pixels padding everywhere:

#main_content {
margin: 0 5px 0 4px;
padding: 10px;
background: url(images/content_shadow.jpg) repeat-x;
color: #000;
}

Congratulations! We’ve now got the three main chunks of the layout complete. Now, we have to do the content boxes – but before that, we need to do the columns we can put the navigation boxes into. If you’re tired of selecting pixels, you’ll be happy to learn that there’s very little Photoshop involved and the rest is all CSS. Here we go!

For your columns, we’ll be using floats as stated earlier. We need to specify a width for them, add a little padding and margin here and there and we’re pretty much done. You can experiment as you wish, but it’s time to take out the ruler again..

Go back into Photoshop and take the ruler out again. We need to line the rulers up with the edge of the content box. As I’ve said before, you need to drag them to the top left corner of a content box and take the dimensions, like so:

image 10

Small note: If you don’t like this process, you can simply select the content box, do the CNP procedure (Copy Merged etc..) and then go Image->Canvas Size and take them from there. It’s the same result, so don’t worry!

You should get the dimensions 182px across on the small box, and 471px across on the larger one. Remember that height doesn’t matter – they’re going to stretch anyway!

Armed with these dimensions, we can put them into the CSS like so:

#main_content #leftcol {
width: 182px;
float: left;
}
#main_content #rightcol {
width: 471px;
float: right;
}

Floating them left and right does exactly what it says on the tin. There’s going to be more to this soon..

You can now put content into each of these columns and it’ll work – but now for the actual content boxes, which involves a lot of Photoshop love. Now we’ve got the widths of each of these boxes, we now need to select the title images at that exact width. It’s not too hard, and can be pulled off like so:

Click to enlarge

Click to enlarge

CNP the selected area and save it as “leftcol_heading.jpg” in images. Do the same with the right hand side title image too, naming it accordingly. Notice that we included the shadow just below this area – this is just to keep things simple, and since it connects onto the rest of the shadows it will be fine.

For the CSS, I’ve done some interesting techniques which mean you can use the same class name in either column, but it will use the right image for that column. Here we go:

#leftcol .heading {
background: url(images/leftcol_heading.jpg) no-repeat;
height: 36px;
width: 182px;
}
#rightcol .heading {
background: url(images/rightcol_heading.jpg) no-repeat;
height: 36px;
width: 471px;
}

We’ll be coming back to this later with the navigation when we add a typeface.

Now for the actual content boxes we’ll do the same CSS trick with using classes. Remember when we said we’d use a repeating shadow for the container? That’s exactly what we’re going to do here. Take out the selection tool and take a one pixel high part of your content area from each column then use the CNP procedure on them, then from left to right, save them for web as “leftcol_content.jpg” and “rightcol_content.jpg” respectively. Put this into the CSS like so..

#leftcol .content {
background: url(images/leftcol_content.jpg) repeat-y;
}
#rightcol .content {
background: url(images/rightcol_content.jpg) repeat-y;
}

“..and now ladies and gentlemen, for closure..” – Deranged Master of Ceremonies, 1924AD.

To close each content box, we’ll need to add an extra element at the bottom to add that bottom shadow part. Just select the bottom shadow part of each, use the CNP procedure and save them as “leftcol_cshadow.jpg” and “rightcol_cshadow.jpg”. The style is pretty straightforward as you can see:

#leftcol .cshadow {
background: url(images/leftcol_cshadow.jpg) no-repeat;
height: 5px;
}
#rightcol .cshadow {
background: url(images/rightcol_cshadow.jpg) no-repeat;
height: 5px;
}

With this done, we’ve pretty much done everything except for one little problem when we preview it in the browser:

Click to enlarge

Click to enlarge

Yup, that’s right – the background has gone missing.

Why the heck is this? Well, when floating elements, it means they are.. well.. floating. If you imagine the parent element as the ground, and the floating element as floating, there is no point for the parent on the ground to extend, since the floating element doesn’t need to the ground to float. This can be fixed, though!

clear: both; to the rescue!
To combat this evil little rule of web physics, we just add a div with a class name called “clearmeplz” after the columns, which closes the floating at the end, like so:

.clearmeplz {
clear: both;
}

And add the div just about here:

image 13

Onto the navigation and more!

For the links, we’ll just use styled a tags. We also need to make a modification to the div.navigation properties and add text-align: center;

Here’s the style for the links. Using padding on them means that there’s an invisible, yet clickable, box outside the text that the user can click on.

.navigation a {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 14pt;
padding: 0 10px 3px 10px;
color: #FFFFFF;
text-decoration: none;
}
.navigation a:hover {
color: #EDE28E;
}

..and more!

If you’ve tried putting text in the content boxes already, you’ll notice they look slightly ugly. This can be fixed by tweaking with the padding and font families as we’ve done already with the navigation. As you can see, I’ve used Georgia for the main font since this goes with the layout. But, since you probably won’t be using this layout for your site you can tweak it with what you want. You’ll be happy to know that there’s no more Photoshop involved anymore!

So, we’ll start off by fixing the padding with these title boxes. If you’ve ever done this before, you’ll have realised that padding is actually an add on to the true width and height of the element being styled. So, for example if you had a 100px wide element and added 2px padding to it, the true width of it would be 104px. If you’re wondering why it’s 104px instead of 102px, you’ve got to remember that 2px padding is applied on both left and right hand sides. Just to finish it off, here’s what I did – and the best thing about it is all you need to know is adding and subtracting! 😛

We just need to replace a few things here and there. Here are the new styles:

#leftcol .heading {
background: url(images/leftcol_heading.jpg) no-repeat;
height: 31px; /* +5 = 36 */
}
#rightcol .heading {
background: url(images/rightcol_heading.jpg) no-repeat;
height: 31px; /* +5 = 36 */
}
.heading {
font-family: Georgia;
padding-left: 4px; /* take away 4px from the width */
padding-top: 5px; /* take away 5px from the height */
font-weight: bold;
color: #FFF;
}

I added a standard .heading class, which would apply to both rightcol and leftcol columns.

Finally..

You’ll also have noticed that the content boxes looked a little unloved. This was fixed by adding another standard .content class applying to both columns giving it a font family and padding property:

.content {
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}

You can view the full result at here.

..and that’s it! I’ll have you know I’ve been working on this for three hours, bar breaks for going out and rolling around in the snow. I’ll post some pictures of that in the forums later!

How to Assign Custom List Bullets with CSS

4 Oct

1. In your html page embed link to your css file:

<html>
<head>
<title>Test Document</title>
<link href=”styles.css” rel=”stylesheet” type=”text/css”>
</head>

<body>

</body>
</html>

2. Create your bulleted list. Here is ours:

<p>Most popular apple varieties in New England today:</p>
<ul>
<li>McIntosh</li>
<li>Cortland</li>
<li>Red Delicious</li>
<li>Empire</li>
<li>Rome</li>
</ul>

image 1

3. In css file we will redefine <li> tag. Let’s change these default bullets to our custom bullets.

li {
list-style-position: outside;
list-style-image: url(your_bullet.gif);
}

image 2

4. Format text:

li {
list-style-position: outside;
list-style-image: url(your_bullet.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;

}

image 3

5. We can further format list: add more space between bullets and text. Add more space between lines.

li {
list-style-position: outside;
list-style-image: url(your_bullet_address.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-left: 10px;
line-height: 18px;
}

Final Result

CSS Background Rollover

4 Oct

Looking to add a little style to your image links? Let’s use CSS to add a background color that appears when the mouse hovers over the image. This style can be used on a variety of images but we’ll be looking at adding this style to affiliate buttons.

Step 1

First, we have the html for the actual affiliate button to show up:

<div class=”affiliate”>
<a href=”http://www.jacorre.com”><img src=”images/jacorre.gif” width=”88″ height=”31″ alt=”Jacorre Design Studio” /></a>
</div>

Basically, we wrap the linked image in a div and define a class of affiliate. Make note that the width of the image is 88 pixels and the height is 31 pixels.

Step 2

Since we’ll probably want to use this style multiple times on a page, that’s why I created it as a class. Here’s the CSS:

.affiliate img {
padding: 5px;
border: 0;
}

.affiliate {
float: left;
width: 98px;
height: 41px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
display: block;
}

.affiliate a:hover {
background-color: #CCCCCC;
display: block;
}

We add 5 pixels of padding around the image. That means the width will now be 88 plus 5 on both the left and right which equals 98 pixels. The height will be 31 plus 5 on both the top and bottom which equals 41 pixels. Making the border equal to zero removes the blue border around a linked image.

We float each div left so they line up next to each other. However, we don’t want them too close. So we add 10 pixels of margin to the right and bottom to push them away a bit.

Lastly, we add a background color to the hover.

Resizable Tabs Navigation

4 Oct

This tutorial will explain how to create a resizable tabs navigation using CSS and background images.

Compatible with all major browsers.

Download image used in this tutorial from here.

image 1

To start with we need to create a simple layout with a list. Please make sure that each link contains <span> tag.

<div id=”Wrapper”>
<div id=”Navigation”>
<ul id=”mainNav”>
<li><a href=”#”><span>home</span></a></li>
<li><a href=”#” class=”active”><span>services</span></a>
<li><a href=”#”><span>about us</span></a></li>
<li><a href=”#”><span>contact us</span></a></li> </ul>
</div>
<div id=”Container”>
</div>
</div>

In the first instance we will style the main elements of the layout.

html, body { margin: 0px;
padding: 0px; }

body { text-align: center; }

#Wrapper { font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
width: 765px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
text-align: left;
height: auto; }

#Container { color: #333;
clear: both;
width: 723px;
float: left;
display: block;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
border-top-color: #666666;
border-top-width: 1px;
padding: 20px;
margin: 0px; }

Now we need to style our “Navigation” div.

#Navigation { font-size: 12px;
color: #333333;
height: 25px;
width: auto;
padding: 0px;
margin: 0px; }

Lastly we need to format our navigation. We will add background images to <a> and <span> tags. Becuase <span> is placed inside <a> tag it will expand it defining the size of the link.

#mainNav { margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none; }

#mainNav li { float: left;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px; }

#mainNav li a { margin: 0px;
background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight: normal;
color: #666666;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px; }

#mainNav li a:hover { text-decoration: none;
color: #CCCCCC; }

#mainNav li a span { background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px; }

#mainNav li a.active { background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: right -47px; }

#mainNav li a.active span { background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px -47px; }

#mainNav li a.active:hover { color: #FFFFFF;
text-decoration: none;
cursor: pointer;
cursor: hand; }

You can also have a look at our other web site – Affordable Web Site Design – where we have used the same method except tabs are displayed at the bottom of the header image.