CSS menu fun

programming web dev
1

Hey Guys, I’m creating a website for a friend and am struggling getting the menu that he has designed to work. You can see the mockup here: http://img.photobucket.com/albums/v292/state-of-terror/Temp/SED_blackchromeRedux-01.jpg

and here is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!-- Meta Info -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <meta name="description" content="" />
        <meta name="author" content="" />

        <meta name="copyright" content="" />
        <meta name="company" content="" />
        <meta name="revisit-after" content="3 days" />
    <!-- Cascading Style Sheets -->
    <style type="text/css">
    body {
        background:#fff;
    }
    ol, ul, li {
        list-style-image:none;
        list-style-type:none;
    }
        #holder {
            position: absolute;
            top:50%;
            left:50%;
            width:750px;
            height:auto;
            margin:-237px 0px 0px -375px;
            
        }
        #menu {
            width:750px;
            height:auto;
            display:block;
            font:10px Arial, Helvetica, Geneva, sans-serif;
            color:#fff;
            
        }
        #menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #menu ul li {
            height:53px;
            width:125px;
            float: left;
            margin: 0 0.15em;
        }
        #menu ul li a {
            line-height: 2em;
            float: left;
            display: block;
            text-decoration: none;
            text-align: center;
        }
        #menu ul li a .menuLeft{
            height: 53px;
            width: 125px;
            background: url(siteImages/button_left_normal.png) no-repeat left top;
            
        }
        #menu ul li a .menuMiddle{
            height: 53px;
            width: 125px;
            background: url(siteImages/button_middle_normal.png) no-repeat left top;
        }
        #menu ul li a .menuRight{
            height: 53px;
            width: 125px;
            background: url(siteImages/button_right_normal.png) no-repeat left top;
        }
         #nav-menu
        {
        width:30em
        }
        #content {
            width:100%;
            height:370px;
        }
        #footer {
            width:100%;
            height:25px;
        }
    </style>
    <!-- JavaScript -->
  

    </head>

    <body>

        <div id="holder">
            <div id="menu">
                <ul>
                <li class="menuLeft"><a href="#">Welcome</a></li><li class="menuMiddle"><a href="#">Client Work</a></li><li class="menuMiddle"><a href="#">Design // Art</a></li><li class="menuMiddle"><a href="#">Products // Shop</a></li><li class="menuMiddle"><a href="#">Info // Contact</a></li><li class="menuRight"><a href="#">Links // Exposure</a></li>

                </ul>
            </div>
            <div id="content">
                

            </div>
            <div id="footer">
            </div>
        </div>
    </body>
    </html>

I would appreciate it if someone could help me to get this working correctly.

cheers,

-ollie