Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Centering Menu Bar

    How would I go about centering the menu bar of this webpage and css? If i try changing the float then it ends up having them all centered and each image on a new line.

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Velox" content="Velox WebDesign" />
    <title>Temp</title>
    
    <script type="text/javascript" src="styleswitcher.js"></script>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
    </head>
    <body>
    
    <center>
    <div id="menu">
    	<ul>
    		<li><a href="http://thursday.forumotion.co.uk" class="forum"><span>Forum</span></a></li>
    		<li><a href="http://www.1.computafix.org.uk/staff/thursday/archive.htm" class="archive"><span>Newsletter Archive</span></a></li>
    		<li><a href="http://www.1.computafix.org.uk/staff/thursday/subscribe.htm" class="subscribe"><span>Subscribe</span></a></li>
    		<li><a href="http://www.1.computafix.org.uk/staff/thursday/index.htm" class="home"><span>Home</span></a></li>
    		<li><a href="http://www.1.computafix.org.uk/staff/thursday/games.htm" class="games"><span>Games</span></a></li>
    		<li><a href="http://www.1.computafix.org.uk/staff/thursday/about.htm" class="about"><span>About</span></a></li>
    		<li><a href="#" class="font"><span>Font</span></a></li>	
    		<li><a href="#" class="fonts"><span>As</span></a></li>
    		<li><a href="#" class="fontm"><span>Am</span></a></li>
    		<li><a href="#" class="fontl"><span>Al</span></a></li>										
    	</ul>
    </div>
    </center>
    </body>
    </html>

    CSS:
    Code:
    body{
    	background:#97bf96;
    	color:#666;	
    	font:12px/18px Tahoma, Arial, Helvetica, sans-serif;	
    }
    
    
    
    	#menu{
    		width:100%;
    		overflow:hidden;
    		float: middle;
    		
    	}
    
    		#menu ul{
    			list-style:none;
    			margin-left:auto;
    			margin-right:auto;
    			text-align:center;
    		}
    			#menu li{
    				list-style:none;
    				display:block;
    				margin:32px 0px;
    				float:left;
    			}
    				#menu li a{
    					display:block;
    				}
    					#menu li a:hover{
    					}
    						#menu li a span{
    							display:none;
    						}
    				#menu li a.current{
    					display:block;
    					color:#fff;
    					background:#da6800 url(images/Pad.jpg) repeat-x left;
    					font-size:11px;
    					font-weight:bold;
    					line-height:36px;
    					text-decoration:none;
    					padding:0 0px;	
    				}
    					#menu li a:hover.current{
    						color:#fff;
    					}
    
    				#menu li a.forum{
    					background:url(images/Forum.jpg) no-repeat;
    					width:79px;
    					height:36px;
    					margin-left:auto;
    					margin-right:auto;
    				}
    					#menu li a:hover.forum{
    						background:url(images/Forum_h.jpg) no-repeat;
    					}
    				#menu li a.archive{
    					background:url(images/Archive.jpg) no-repeat;
    					width:220px;
    					height:36px;
    				}
    					#menu li a:hover.archive{
    						background:url(images/Archive_h.jpg) no-repeat;
    					}
    				#menu li a.subscribe{
    					background:url(images/Subscribe.jpg) no-repeat;
    					width:113px;
    					height:36px;
    				}
    					#menu li a:hover.subscribe{
    						background:url(images/Subscribe_h.jpg) no-repeat;
    					}
    				#menu li a.home{
    					background:url(images/Home.jpg) no-repeat;
    					width:104px;
    					height:104px;
    					margin: -32px 0px;
    				}
    					#menu li a:hover.home{
    						background:url(images/Home_h.jpg) no-repeat;
    					}
    				#menu li a.games{
    					background:url(images/Games.jpg) no-repeat;
    					width:79px;
    					height:36px;
    				}
    					#menu li a:hover.games{
    					background:url(images/Games_h.jpg) no-repeat;
    					}
    				#menu li a.about{
    					background:url(images/About.jpg) no-repeat;
    					width:109px;
    					height:36px;
    				}
    					#menu li a:hover.about{
    					background:url(images/About_h.jpg) no-repeat;
    					}
    				#menu li a.font{
    					background:url(images/Font.jpg) no-repeat;
    					width:112px;
    					height:36px;
    				}
    					#menu li a:hover.font{
    					background:url(images/Font_h.jpg) no-repeat;
    					}
    				#menu li a.fonts{
    					background:url(images/Fonts.jpg) no-repeat;
    					width:32px;
    					height:36px;
    				}
    					#menu li a:hover.fonts{
    					background:url(images/Fonts_h.jpg) no-repeat;
    					}
    				#menu li a.fontm{
    					background:url(images/Fontm.jpg) no-repeat;
    					width:32px;
    					height:36px;
    				}
    					#menu li a:hover.fontm{
    					background:url(images/Fontm_h.jpg) no-repeat;
    					}
    				#menu li a.fontl{
    					background:url(images/Fontl.jpg) no-repeat;
    					width:32px;
    					height:36px;
    				}
    					#menu li a:hover.fontl{
    					background:url(images/Fontl_h.jpg) no-repeat;
    					}
    Last edited by 03myersd; 06-16-2009 at 12:00 AM.

  • #2
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    float:middle doesn't exist. Try magin:auto
    Code:
    #menu{
            width:100%;
            overflow:hidden;
            /*float: middle;*/
                   margin:auto;
            
        }
    Last edited by Kristofa; 06-15-2009 at 10:17 PM. Reason: code tags

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That didn't work unfortunately.

    Here is what the page looks like with images: www.tinyurl.com/03myersd
    Last edited by 03myersd; 06-15-2009 at 10:57 PM.

  • #4
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    So you want the whole bar itself centred?

    If so try adding this to the top of your css

    Code:
    * {
    	padding:0;
    	margin:0;
    	border:0;
    }
    Also add the following to your #menu tag

    Code:
    margin:0 auto;

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    You'll need a width to center it. All your <a> tags add up to 912px, so:

    Code:
    #menu {
    	width:912px;
    	margin:0 auto;
    }
    and at the start:
    Code:
    * {
    	margin:0;
    	padding:0;
    }

  • Users who have thanked Fisher for this post:

    03myersd (06-16-2009)

  • #6
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by laurieballard View Post
    So you want the whole bar itself centred?
    Yeah thats right. The code you gave didn't manage to make it do that though...

  • #7
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Just checked the test link and you have used a ' instead of a ; at the end of the line

    Yours is:

    Code:
    #menu{
    		width:100%;
    		overflow:hidden;
    		margin:auto'
    		
    	}
    Needs to be:

    Code:
    #menu{
    		width:100%;
    		overflow:hidden;
    		margin:0 auto;
    		
    	}
    Also mite be worth using a fixed width as Fisher says above otherwise the browser may try to stretch the bar if a different resolution is used

  • #8
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fisher View Post
    You'll need a width to center it. All your <a> tags add up to 912px, so:

    Code:
    #menu {
    	width:912px;
    	margin:0 auto;
    }
    and at the start:
    Code:
    * {
    	margin:0;
    	padding:0;
    }
    Just saw this post. Unfortunately this didnt help either. My html is the same as always and the CSS is now:

    Code:
    * {
    	padding:0;
    	margin:0;
    	border:0;
    }
    
    body{
    	background:#97bf96;
    	color:#666;	
    	font:12px/18px Tahoma, Arial, Helvetica, sans-serif;	
    }
    
    
    
    	#menu{
    		width:912px;
    		overflow:hidden;
    		margin:0 auto;
    		
    	}
    
    		#menu ul{
    			list-style:none;
    			margin-left:auto;
    			margin-right:auto;
    			text-align:center;
    		}
    			#menu li{
    				list-style:none;
    				display:block;
    				margin:32px 0px;
    				float:left;
    			}
    				#menu li a{
    					display:block;
    				}
    					#menu li a:hover{
    					}
    						#menu li a span{
    							display:none;
    						}
    				#menu li a.current{
    					display:block;
    					color:#fff;
    					background:#da6800 url(images/Pad.jpg) repeat-x left;
    					font-size:11px;
    					font-weight:bold;
    					line-height:36px;
    					text-decoration:none;
    					padding:0 0px;	
    				}
    					#menu li a:hover.current{
    						color:#fff;
    					}
    
    				#menu li a.forum{
    					background:url(images/Forum.jpg) no-repeat;
    					width:79px;
    					height:36px;
    					margin-left:auto;
    					margin-right:auto;
    				}
    					#menu li a:hover.forum{
    						background:url(images/Forum_h.jpg) no-repeat;
    					}
    				#menu li a.archive{
    					background:url(images/Archive.jpg) no-repeat;
    					width:220px;
    					height:36px;
    				}
    					#menu li a:hover.archive{
    						background:url(images/Archive_h.jpg) no-repeat;
    					}
    				#menu li a.subscribe{
    					background:url(images/Subscribe.jpg) no-repeat;
    					width:113px;
    					height:36px;
    				}
    					#menu li a:hover.subscribe{
    						background:url(images/Subscribe_h.jpg) no-repeat;
    					}
    				#menu li a.home{
    					background:url(images/Home.jpg) no-repeat;
    					width:104px;
    					height:104px;
    					margin: -32px 0px;
    				}
    					#menu li a:hover.home{
    						background:url(images/Home_h.jpg) no-repeat;
    					}
    				#menu li a.games{
    					background:url(images/Games.jpg) no-repeat;
    					width:79px;
    					height:36px;
    				}
    					#menu li a:hover.games{
    					background:url(images/Games_h.jpg) no-repeat;
    					}
    				#menu li a.about{
    					background:url(images/About.jpg) no-repeat;
    					width:109px;
    					height:36px;
    				}
    					#menu li a:hover.about{
    					background:url(images/About_h.jpg) no-repeat;
    					}
    				#menu li a.font{
    					background:url(images/Font.jpg) no-repeat;
    					width:112px;
    					height:36px;
    				}
    					#menu li a:hover.font{
    					background:url(images/Font_h.jpg) no-repeat;
    					}
    				#menu li a.fonts{
    					background:url(images/Fonts.jpg) no-repeat;
    					width:32px;
    					height:36px;
    				}
    					#menu li a:hover.fonts{
    					background:url(images/Fonts_h.jpg) no-repeat;
    					}
    				#menu li a.fontm{
    					background:url(images/Fontm.jpg) no-repeat;
    					width:32px;
    					height:36px;
    				}
    					#menu li a:hover.fontm{
    					background:url(images/Fontm_h.jpg) no-repeat;
    					}
    				#menu li a.fontl{
    					background:url(images/Fontl.jpg) no-repeat;
    					width:32px;
    					height:36px;
    				}
    					#menu li a:hover.fontl{
    					background:url(images/Fontl_h.jpg) no-repeat;
    					}

  • #9
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Can you upload to a test link so we can take another look?

  • #10
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Its uploaded.

    EDIT: By the way its still the same link as before.
    Last edited by 03myersd; 06-15-2009 at 11:50 PM.

  • #11
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    In your live version you are missing a ; off the end of width:

    Code:
    	#menu{
    		width:912px
    		overflow:hidden;
    		margin:0 auto;
    		
    	}

  • Users who have thanked noneforit for this post:

    03myersd (06-16-2009)

  • #12
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh... That was... thick of me. Thanks for all the help I got!

  • #13
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    No problem at all, weve all done it

    During coding its worth validating both your html and CSS as this will flag up any errors such as typos in the css

    http://jigsaw.w3.org/css-validator/

    http://validator.w3.org/


  •  

    Posting Permissions

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