Sythe.org — A Virtual Goods Trading Hub

TDD *BANNED* · #1 09-29-2008, 03:32 PM

Alright kiddies, it's been a while since I wrote a guide on web design, completely forgot I even wrote them :P

Today, we are going to make a very basic hover navigation using pure HTML and CSS.

Before we start, you should know and understand something; Internet Explorer 6 will not apply a css :hover to anything but the <a> tag, sadly, so this makes it difficult to do some more fun techniques.

first, you'll need the starting xHTML and CSS, so if you've read the first few tuts of mine, you'll know how to make a reset.css file, make the basic xHTML setup, etc. so do all this.

Whip up the following within your xHTML:

[HTML]
<div class="navigation">
<ul class="navigation">
<li><a href="#"><em>home</em> Go to homepage</a></li>
<li><a href="#"><em>page2</em> Go to Page2</a></li>
</ul>
<div class="clear"></div>
</div>
[/HTML]

so far, we've got a box model that will look like this:

this is perfect in the HTML, it is logically ordered and has meaning, now we can apply CSS to make this a half-decent navigation:

[HTML]
<style type="text/css">
body {
background-color: #111111;
}

div.navigation {
position: relative;
width: 100%;
margin-top: 0.4em;
border-top-color: #333;
border-bottom-color: #333;
border-style: solid;
border-width: 1px;
}

ul.navigation {
position: relative;
margin-left: 20%;
margin-right: 20%;
width: 60%;
height: 2.4em;
}

ul.navigation li {
float: left;
margin-right: 1em;
position: relative;
margin-top: 0.1em;
}

ul.navigation li a {
position: relative;
display: block;
font-family: "Calibri", Arial, Tahoma, Helvetica, Geneva, sans-serif;
color: #999999;
text-decoration: none;
font-size: 0.8em;
}

ul.navigation li a:hover {
color: #fff;
}

ul.navigation li a em {
font-family: "Calibri", Arial, Tahoma, Helvetica, Geneva, sans-serif;
font-size: 1.4em;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
position: relative;
display: block;
width: 100%;
color: #fff;
}

div.clear {
clear: both;
}
</style>[/HTML]

Here is an explanation of what each rule does:

Code:

body {
background-color: #111111;
}

This applies a dark gray background over the entire document (<body>).

Code:

div.navigation {
position: relative;
width: 100%;
margin-top: 0.4em;
border-top-color: #333;
border-bottom-color: #333;
border-style: solid;
border-width: 1px;
}

The <div class="navigation"> in our code has this CSS, which positions the div and it's contents relative to the parent, which in this case is <body>, the div is the full width of <body>, and is positioned 0.4ems from what is above it. It also has a 1 pixel gray border that applies only to the top and bottom.

Code:

ul.navigation {
position: relative;
margin-left: 20%;
margin-right: 20%;
width: 60%;
height: 2.4em;
}

the <ul class="navigation"> has been placed relative to the parent tag, which is <div class="navigation"> and has been placed 20% to the left and right, with a width that is 60% the total width of the div it is inside of, so basically it's centered no matter what. It also has a total height of 2.4em.

Code:

ul.navigation li {
float: left;
margin-right: 1em;
position: relative;
margin-top: 0.1em;
}

these are the list items within the <ul>, they are to always float to the left, with a space of 1em to their right, again - relative to their parent which is the <ul> from above, and are to be positioned 0.1em from the top of the <ul>

Code:

ul.navigation li a {
position: relative;
display: block;
font-family: "Calibri", Arial, Tahoma, Helvetica, Geneva, sans-serif;
color: #999999;
text-decoration: none;
font-size: 0.8em;
}

this is the <a> tag and it's contents, within the <li> inside the <ul>, it is placed relative to the <li> but has a display:block, which means that there is a line break both before and after it, so basically, it displays it all vertically, which is why the <li> is floated to the left, to display those horizontally whilst having line break in the <a>. it uses the custom font "Calibri" (This is abundant on all office 2007 XP systems, or the XP Systems with the update for office 07 files, and all vista systems, so it is safe to use as a first choice, as long as there is a fall back like I have). The text is a gray and has no decoration (no underline that is automatically applied to <a> elements), it has a font size of 0.8em.

Code:

ul.navigation li a:hover {
color: #fff;
}

This says that when the <a> is rolled over, the text turns white.

Code:

ul.navigation li a em {
font-family: "Calibri", Arial, Tahoma, Helvetica, Geneva, sans-serif;
font-size: 1.4em;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
position: relative;
display: block;
width: 100%;
color: #fff;
}

this says that the contents of the <em> withing the <a> above is 1.4em in height, is not italicised like it would normally (<em>, better known as the emphasis tag is auto applied with italics text). The font shall be bold and automatically converted to uppercase (Capitals).

Code:

div.clear {
clear: both;
}

This just clears the floats from the <li>, it is needed to fix browser bugs.

But Mat, WHAT THE FUCK IS ALL THIS "EM" SHIT YOU SAY AS SIZES IN THE CSS!?!?!?!

em is a relative value to the end user's default font size, which usually is 16pt, so "1em = 16pt in font size", it means that the layout is elastic according to the user's preferences, it helps prevent breakage in the layout on larger-font browsers and whatnot - just a technique I wanted to show you

Hopefully, you got a navigation like this below:

[IMG]

[/IMG]

and there you have it, a simple yet effective navigation that works. No tables, no images, pure xHTML/CSS.