Advanced Search

Results 1 to 3 of 3

Thread: How can i center this CSS Sprite menu?

  1. #1
    Join Date
    Feb 2007
    Location
    West Yorkshire, United Kingdom
    Posts
    145
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question 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&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.
    Last edited by Ryan Fitton; 07-03-2010 at 09:26 PM.

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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;
    }

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

    Ryan Fitton (07-03-2010)

  4. #3
    Join Date
    Feb 2007
    Location
    West Yorkshire, United Kingdom
    Posts
    145
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    thanks very much you have got it to work

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •