How can i center this CSS Sprite menu?
I have a CSS Sprite menu located on my website at: http://ryanfitton.co.uk/m/ it is the navigation bar with links to "Home", "Links" and "Contact".
Here is the HTML code for the websites page:
HTML Code:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ryan Fitton, website design student based in Wakefield, West Yorkshire, UK :: Mobile Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="/m/style.css" />
</head>
<body>
<div id="logo"><img src="/m/images/logo.png" width="245" height="58" alt="Logo" title="Logo" /></div>
<ul id="menu">
<li class="about"><a class="selected" href="/m/index">Home⁄About</a></li>
<li class="links"><a href="/m/links">Links</a></li>
<li class="contact"><a href="/m/contact">Contact</a></li>
</ul>
<h1>Hi there...</h1>
<h2>Hi there! I'm Ryan Fitton a college student who loves website design :D</h2>
<h2>ABOUT
<br/>I'm Ryan I design and build custom websites for individuals and companies. This website was created to show my portfolio and to be used as my online presence, so please look around; take a look at my portfolio, my photos and maybe contacting me :)
<br /><br />I first started getting involved with web design at the age of 11; at that age i was just getting used to CSS and HTML, however now i'm 17 i have got a very good understanding of the technologies used in development such as, HTML, CSS and PHP. I'm a big supporter of web standards and I agree that all websites should be valid, easy to use and be accsessable.</h2>
<h3>Copyright 2010. Ryan Fitton.</h3>
</body>
</html>
and here is the CSS code that is needed for that page:
Code:
body {
border:0 none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
padding:0;
vertical-align:baseline;
background-image: url(images/background.jpg);
background-position: top;
background-repeat: repeat-x;
background-color: #302416;
/* ----------------------------------------------------------
Logo
---------------------------------------------------------- */
}
#logo {
font-family: Helvetica,Arial,sans-serif;
color: #000000;
font-size:20px;
text-align: center;
width: 100%;
height: 58px;
padding-top: 10px;
padding-bottom: 0px;
border: 0px;
}
#logo img {
font-family: Helvetica,Arial,sans-serif;
color: #000000;
font-size:20px;
text-align: center;
width: 245px;
height: 58px;
border: 0px;
/* ----------------------------------------------------------
Navbar - Navbar Content
---------------------------------------------------------- */
/* Everything CSS Sprite Menu */
}
ul#menu{padding:0; list-style:none; width:275px; margin-left:20px; margin-right:auto; clear: both;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px;}
#menu li a{background:url('images/nav/nav_sprite.gif') no-repeat; width:244px;; height:48px; display:block;}
/* About Button */
#menu li.about{width:77px; height:48px;}
#menu li.about a{background-position:0px -48px;}
#menu li.about a.selected{background-position:-0px -0px;}
/* Links Button */
#menu li.links{width:68px; height:48px;}
#menu li.links a{background-position:-77px -48px;}
#menu li.links a.selected{background-position:-77px -0px;}
/* Contact Button */
#menu li.contact{width:99px; height:48px;}
#menu li.contact a{background-position:-145px -48px;}
#menu li.contact a.selected{background-position:-145px -0px;
/* ----------------------------------------------------------
Main - Main Content
---------------------------------------------------------- */
}
h1 {
color:#4dd6e8;
font-family:Georgia,Times,serif;
font-size:28px;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:1px;
margin-bottom:1px;
height: auto;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
text-align: left;
clear:both;
}
h2 {
color: #D4C6B9;
font-family:Helvetica,Arial,sans-serif;
font-size:18px;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:1px;
margin-bottom:10px;
height: auto;
padding-left: 10px;
padding-right: 10px;
text-align: left;
clear: both;
}
h3 {
color: #FFFFFF;
font-family:Helvetica,Arial,sans-serif;
font-size:15px;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-top:16px;
margin-bottom:5px;
width: 100%;
height: auto;
padding-top: 8px;
text-align: center;
background-image: url(images/bar.gif);
background-position: top;
background-repeat: no-repeat;}
I'm having trouble centering it in my page. But i also stay in the middle when i alter the width sizes of the browser, so i think a percentage width would be needed. But i'm quite a newbie at CSS so i will probably be wrong.
Many thanks, Ryan.
