Menu Help Needed

[englebert]

Hi Guys,

I'm fairly new to CSS and am trying to convert a design from tables for practice. A main sticking point i have is with the menu.

CSS Version:
http://www.sixthsense-esp.co.uk/CSS/needmotorsport.htm

Tables Version:
http://www.sixthsense-esp.co.uk/needmotorsport/1.htm

I have set the rectangles behind the menu as a background image in the div which is then positioned. Problem is, the text is not lining up nicely (the distance between each menu item is smaller).

I was wondering how to fix this, or if there was a better way of doing a menu like this.

Thanks

The CSS if needed:

/* BODY */

body
{ 
background-color: #FFFFFF;
margin: 0 0 0 0; /*top right bottom left*/
padding: 0 0 0 0;
}


/* FONT */


h1 {
font-family: arial;
font-size: 100%;
color: #44A5E2;
font-weight:bold;
}

h2 {
font-family: arial;
font-size: 80%;
color: #44A5E2;
}

p {font-family: arial; font-size: 12px; color: #808080; text-align: justify;}
p a:link {color: #5DB2E8; text-decoration: none;} 
p a:visited {color: #5DB2E8; text-decoration: none;}
p a:hover {color: #5DB2E8; text-decoration: none;}
p a:active {color: #5DB2E8; text-decoration: none;}

p.menu {font-family: arial; font-size: 12px; color: #E1F1FB; text-decoration: none; line-height: 20px; text-align: right;}
p.menu a:link {color: #E1F1FB; text-decoration: none;} 
p.menu a:visited {color: #E1F1FB; text-decoration: none;}
p.menu a:hover {color: #FFFFFF; text-decoration: none;}
p.menu a:active {color: #E1F1FB;text-decoration: none;}

p.logo {font-family: arial; font-size: 0pt; color: #E1F1FB; text-decoration: none; text-align: right}

li {
list-style-type: none;
line-height: 150%; 
}

hr {
border: 0px none;
width: 100%;
color: #9ECEEC;
background-color: #9ECEEC;
height: 1px
}

/* LAYOUT */


a img {border: none; }

#logo {
position: absolute; top: 0px; left: 0px;
width: 248px;
height: 138px;
padding: 0 0 0 0; /*top right bottom left*/
background-color:#5DB2E8;
margin: 0;
margin-top: 0px;
font-weight: normal;
}

#topright {
position: absolute; top: 0px; left: 5px;
width: 642px;
height: 111px;
padding: 27px 0px 0 0; /*top right bottom left*/
margin-top: 0px;
margin-left: 243px;
background-image: url('NeedMotorsport/top-repeat.gif');
background-repeat: repeat;
background-color:#CCCCCC;
} 

#navigation {
position: absolute; top: 138px; left: 0px;
width: 232px;
height: 100%;
padding: 0 16px 0 0; /*top right bottom left*/
background-color:#5DB2E8;
margin: 0 0 0 0;
margin-top: 0px;
font-weight: normal;
background-image: url('NeedMotorsport/menu-background.gif');
background-repeat: no-repeat;
background-position: 96px 4px; 
}

#centerDoc {
position: absolute; top: 138px; left: 5px;
width: 626px;
height: 600px;
padding: 0 0 0 16px; /*top right bottom left*/
background-color:#FFFFFF;
margin-top: 0px;
margin-left: 243px;
}

[kungfu71186]

try using a list for a menu instead of the paragraphs.

<ul>
<li>link1</li>
</ul>

etc..