Results 1 to 4 of 4

Thread: css menu should be centered

  1. #1
    Join Date
    Aug 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css menu should be centered

    I have tried so many things but nothing has worked. All I want is the menu to stay centered on the page but it stays too far to the left. The css:
    Code:
    /* CSS Document 
    Title:	Jennifer Liu-Cooper Consultant screen style
    Author: 	Coopergraphix
    */
    
    /* general---------------------------------------------------------- */
    body {
    	background-color: #ffffff;
    	margin: 0;
    	padding: 0;
    	font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12pt;
    	text-align: center;
    	color: #4f2900;
    }
    
    H2 {
    	text-align: center
    }
    
    /* classes---------------------------------------------------------- */
    #background {
    	background-repeat: no-repeat;
    	background-position: center top;
    	position: relative;
    	visibility: visible;
    }
    .centerpic {
    	display:block;
    	margin-left: auto;
        	margin-right: auto;
    	position: relative;
    	top: 0px;
    	height: auto;
    	width: auto;
    	visibility: visible;
    }
    .ctrtxt {
    	font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
    	font-style: normal;
    	color: #000000;
    	visibility: visible;
    	margin: 0 auto;
    	width: 500px;
    	height: auto;
    	letter-spacing: normal;
    	line-height: 120%;
    	word-spacing: normal;
    	font-size: 12pt;
    }
    
    /* page structure---------------------------------------------------------- */
    #logo {
    	display: block;
    	background: url(../images/jlc_final_logo_150.png) no-repeat center;
    	margin:auto;
    	padding-top: 60px;
    	top: 150px;
    	height: 150px;
    	width: 150px;
    	visibility: visible;
    }
    #logo a {
    	display: block;
    	width: 100%;
    	height: 100%;
    	text-indent: -9999px;
    }
    
    #signature {
    	font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
    	font-style: normal;
    	color: #000000;
    	padding-left: 220px;
    	line-height: 150%;
    	text-align: left;
    }
    
    .insideLogo {
    display:block;
    margin:0 auto;
    text-indent:-9999px;
    }
    
    #inside {
    	width: 550px;
    	margin: 0 auto 0 auto;
    	padding-top: 10px;
    	font-size: 100%;
    	line-height: 100%;
    	text-align: justify;
    }
    
    #inside2 {
    	font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
    	font-style: normal;
    	color: #000000;
    	width: 550px;
    	margin: 0 auto;
    	padding-top: 0px;
    	padding-left: 400px;
    	font-size: 100%;
    	line-height: 80%;
    	text-align: left;
    	
    }
    
    #inside3 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-style: normal;
    	color: #000000;
    	width: 750px;
    	margin: 0 auto 0 auto;
    	padding-top: 10px;
    	font-size: 10pt;
    	text-align: left;
    	letter-spacing: normal;
    	line-height: 100%;
    	font-weight: lighter;
    }
    
    /* Menu---------------------------------------------------------- */
    #menu {
    	background: url(../images/main-bg.gif) repeat-x top left;
    	height: 88px;
    	width: 100%;
    	
    	position: absolute;
    	top: 580px;
    	text-align: center;
    	left: 0px;
    }
    #menu ul {
    	width: 950px;
    	margin: 0 auto 0 auto;
    }
    #menu ul li {
    	list-style-type: none;
    	padding:0;
    	float: left;	
    }
    #menu li a {
    	outline: none;
    }
    #menu li#menuIntroduction {
    	width: 157px;
    	height: 88px;
    	background: url(../images/menu-introduction.gif) 0px 0px no-repeat;
    }
    #menu li#menuIntroduction a {
    	display: block;
    	width: 157px;
    	height: 88px;
    	text-indent: -9999em;
    	text-decoration: none;
    }
    #menu li#menuIntroduction a:hover {
    	background: url(../images/menu-introduction.gif) 0px -88px no-repeat;
    }
    #menu li#menuConsulting {
    	width: 213px;
    	height: 88px;
    	background: url(../images/menu-consultingServices.gif) 0px 0px no-repeat;
    }
    #menu li#menuConsulting a {
    	display: block;
    	width: 213px;
    	height: 88px;
    	text-indent: -9999em;
    	text-decoration: none;
    }
    #menu li#menuConsulting a:hover {
    	background: url(../images/menu-consultingServices.gif) 0px -88px no-repeat;
    }
    #menu li#menuBlog {
    	width: 113px;
    	height: 88px;
    	background: url(../images/menu-blog2.gif) 0px 0px no-repeat;
    }
    #menu li#menuBlog a {
    	display: block;
    	width: 113px;
    	height: 88px;
    	text-indent: -9999em;
    	text-decoration: none;
    }
    #menu li#menuBlog a:hover {
    	background: url(../images/menu-blog2.gif) 0px -88px no-repeat;
    }
    #menu li#menuJennifer {
    	width: 186px;
    	height: 88px;
    	background: url(../images/menu-JenniferCooper.gif) 0px 0px no-repeat;
    }
    #menu li#menuJennifer a {
    	display: block;
    	width: 186px;
    	height: 88px;
    	text-indent: -9999em;
    	text-decoration: none;
    }
    #menu li#menuJennifer a:hover {
    	background: url(../images/menu-JenniferCooper.gif) 0px -88px no-repeat;
    }
    #menu li#menuContact {
    	width: 113px;
    	height: 88px;
    	background: url(../images/menu-contact.gif) 0px 0px no-repeat;
    }
    #menu li#menuContact a {
    	display: block;
    	width: 113px;
    	height: 88px;
    	text-indent: -9999em;
    	text-decoration: none;
    }
    #menu li#menuContact a:hover {
    	background: url(../images/menu-contact.gif) 0px -88px no-repeat;
    }
    And the html:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<meta name="Keywords" content="" />
    		<meta name="Description" content="" />
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<meta name="phone" content="651-895-5028" />
    		<meta name="address" content="16520 N Hillcrest Ct." />
    		<meta name="city" content="Eden Prairie" />
    		<meta name="state" content="Minnesota" />
    		<meta name="country" content="United States" />
    		<meta name="zipcode" content="55346" />
    <meta name="verify-v1" content="ztLQ/DunJDh6/l4nqlxn5rGDXSIagJyhFLOzJqlfgyI=" />
    <title>jlc consultant</title>
    <link rel="SHORTCUT ICON" href="../images/logo_32.ico" />
    <link rel="stylesheet" href="http://jlcconsultant.com/paulcooper201/style3.css" type="text/css" media="screen" />
    	
    	</head>
    	<body>
    		<h1 id="logo">
    			<a href="">jlc consultant</a>
    	</h1>
    
        		<div id="inside">
            <p><p class="ctrtxt">Jennifer Liu-Cooper is a development operations consultant with over twenty years of experience in the field.  Areas of specialty include business process re-design, knowledge/data management, gift/pledge processing, and system selection and implementation. Institutions served span the private and public sectors, including colleges and universities, hospitals, and non-profit organizations. 
    
    			<div id="signature">
    				<p>Sincerely,</p>
    				<p>Jennifer Liu-Cooper</p>
    		
    	
    		
    	<div id="menu">
    			<ul>
    				<li id="menuIntroduction"><a href="index.html">Introduction</a></li>
    				<li id="menuConsulting"><a href="consulting-services.htm">Consulting Services</a></li>
    				<li id="menuJennifer"><a href="Jennifer-Cooper.htm">Jennifer Cooper</a></li>
    				<li id="menuBlog"><a href="//jlcconsultant.com/blog">Blog</a></li>
    				<li id="menuContact"><a href="contact.htm">Contact</a></li>
    			</ul>
    			
    	</div>		
    			
    	</div>
    	</body>
    </html>
    Any help would be greatly appreciated!

  2. #2
    Join Date
    Feb 2009
    Location
    Victoria, BC, Canada
    Posts
    303
    Thanks
    18
    Thanked 36 Times in 36 Posts

    Default

    It's because you have float: left; in there. It makes it float left.

    If you take the float:left out, it'll work - BUT, there'll be a space between <LI>'s.

    Cheers,
    X96
    Alex Blackie, X96 Design
    My Website
    I specialize in: HTML5, CSS3, PHP, Ruby on Rails, MySQL, MongoDB, Linux Server Administration

  3. #3
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    471
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    you should work with the padding-left or left
    like this one, for example:
    Code:
    .menu li  {
    	left:auto;
    	top:auto;
    	left:10px;
    	position: absolute;
    	display: none;
    }
    good luck

  4. #4
    Join Date
    Aug 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much! I'll try these out and post my results later today.

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
  •