AvengeX Webmaster Development - Free PHP, MySQL, CSS, XHTML, Photoshop Tutorials

You are viewing section 3 of 5 « Previous Page — Next Page »

Introducing.. position: relative;

Positioning something with relative is very similar to positioning it absolutely. The difference is that it is relative to where the element has been placed in the mix. One thing you should be warned about is the fact that even if it's positioned, some browsers still fill the space where the element would go if it hadn't been. We can fix this by applying a float to it, eliminating this problem completely.

A little housekeeping...

To start off, we're going to have to specify the properties for #navigation. This will act as a container to hold the background image we're going to be working over.
#navigation {
height: 72px; /* height */
background: url('nav.jpg') no-repeat; /* set the background image, no repeating */
}


Now we've got that done, it's time to set up the list styles.
ul#linkmenu, #linkmenu li {
padding: 0; margin: 0;
list-style: none;
}
ul#linkmenu {
float: left;
height: 0; /* these two lines fix that extra whitespace problem on the layout */
}
#linkmenu li {
font-family: Times New Roman, Times, Georgia, sans-serif !important; /* NOTICE THIS! */
position: relative;
width: 10px;
}


If you look at how I've explicitly defined the font-family property, you might be wondering why. This is because fonts look different at different sizes, and further on in the tutorial we're going to be utilizing that to get the right coverage of the wannabe-hotspot. I've also given each a width of 10 pixels. If we leave it as variable, that means the positioning will become unpredictable - and this isn't too good.

You are viewing section 3 of 5 « Previous Page — Next Page »