How can i center this CSS Sprite menu?

**Ryan Fitton** · 07-03-2010, 07:35 PM

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&frasl;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.

**azoomer** · 07-03-2010, 07:55 PM

If it is just the menu that you want to center it can be done by setting the margin-left and margin-right to auto like this

Code:

ul#menu {
clear:both;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:auto;
margin-right:auto;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
width:275px;
}

**Ryan Fitton** · 07-03-2010, 09:17 PM

thanks very much

you have got it to work

Thread: How can i center this CSS Sprite menu?

Thread Tools

Search Thread

How can i center this CSS Sprite menu?

The Following User Says Thank You to azoomer For This Useful Post:

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions