Centering Navigation Links/Texts

HTML & CSS
1

I am relatively new to web design etc.

I am trying to center the navigation links.

CSS for navigation is:

#main_navigation {
top:10px;
font-size:11px;
height:50px;
float:right;
}
.main-menu {
position:relative;
z-index:22;
font-family:‘Droid Sans’, arial, serif;
}
.main-menu ul {
margin:0;
padding:0;
list-style-type:none;
}
.main-menu ul li {
position:relative;
display:inline;
float:left;
font-size:14px;
text-align:center;
}
.main-menu ul li a,.main-menu ul li a:link,.main-menu ul li a:visited {
line-height:40px;
color:#3d4753;
font-size:16px;

}
.main-menu ul li a:hover {
color:#e26fb5;
}
.main-menu ul li a {
display:block;
text-decoration:none;
overflow:hidden;
padding:0px 15px;
}

  • html .main-menu ul li a {
    display:inline-block;
    }
    .main-menu ul li ul {
    position:absolute;
    left:0px;
    display:block;
    visibility:hidden;
    }
    .main-menu ul li ul li {
    display:list-item;
    float:none;
    }
    .main-menu ul li ul li a {
    width:160px;
    padding:5px 10px;
    }
    .main-menu ul ul {
    background:#FFF;
    border:1px solid #e0e0e0;
    -moz-box-shadow:0px 3px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow:0px 3px 3px rgba(0,0,0,0.1);
    box-shadow:0px 3px 3px rgba(0,0,0,0.1);
    }
    .main-menu ul ul li a,.main-menu ul ul li a:link,.main-menu ul ul li a:visited {
    height:100%;
    line-height:20px;
    margin-right:-2px!important;
    border-bottom:dotted 1px #e1e1e1;
    padding:5px 10px!important;
    }
    .main-menuz ul li ul li a:hover,.main-menu ul ul li a:hover {
    background:#fbfbfb;
    text-decoration:none!important;
    margin:0 0px;
    color:#e26fb5;
    }
    .main-menuz ul ul li ul li a:hover,.main-menu ul ul ul li a:hover {
    text-decoration:none!important;
    width:160px;

I centered the logo using left and right margins on auto.
But everything I have tried for the navigation doesn’t work.

Can anyone help me out?

Thanks

Cordie.

2

Any chance you could post the relevant bits of HTML as well?

3

Is this all the html that you need??

<body>
<div id="wrapper">
	<div class="center">
		<div id="container">
			<!--WRAPPER-->
			<div id="header">
				<!-- HEADER  -->
				<!-- LOGO -->
                <a id="logo" title="Homepage" href="index.html"><img src="images/logo.png" alt=" " width="220" height="60"/></a>
				<!--LOGO ENDS  -->				 &#65279;	
				<!-- MAIN NAVIGATION ENDS-->
			</div>
			<!-- HEADER ENDS-->
			<!-- MAIN CONTAINER -->
			<div id="content">
				<div class="one">
                <div id="main_navigation" class="main-menu ">
					<!--  MAIN  NAVIGATION-->
					<ul>
						<li><a href="index.html" title="Home">Home</a></li>
						<ul>
							<li><a href="index.html">Simple Slider (Default)</a></li>
							<li><a href="homepage-nivo-slider.html">Nivo  Slider</a></li>
							<li><a href="homepage-thumb.html">Nivo Thumb Slider</a></li>
							<li><a href="homepage-content-slider.html">Simple Content Slider</a></li>
							<li><a href="homepage-3d-slider.html">3D Slider</a></li>
							<li><a href="homepage-accordian-slider.html">Accordian Slider</a></li>
							<li><a href="homepage-video-block.html">Video Block</a></li>
							<li><a href="homepage-grid.html">Grid Homepage</a></li>
							<li><a href="homepage-static.html">Static Homepage</a></li>
							<li><a href="#">Menu Second Level</a>
							<ul>
								<li><a href="#">Just</a></li>
								<li><a href="#">Showing it..</a></li>
								<li><a href="#">Third Level Menu</a>
								<ul>
									<li><a href="#">This is Third Level</a></li>
									<li><a href="#">Showing it..</a></li>
									<li><a href="#">It's easy to use</a></li>
								</ul>
								</li>
							</ul>
							</li>
						</ul>
						</li>
						<li><a href="#">Healing</a>
						<ul>
							<li><a href="#">Events</a>
							<ul>
								<li><a href="about-us.html">About Us</a></li>
								<li><a href="news.html">News Archive</a></li>
								<li><a href="services.html">Our Services</a></li>
								<li><a href="our-team.html">Our Team</a></li>
								<li><a href="testimonials.html">Clients Testimonials</a></li>
								<li><a href="jobs.html">Job Opportunities</a></li>
								<li><a href="faq.html">F.A.Q</a></li>
							</ul>
							</li>
							<li><a href="typography.html">Typography &amp; Features</a></li>
							<li><a href="columns.html">Template Columns</a></li>
							<li><a href="fullwidth.html">Fullwidth Page</a></li>
							<li><a href="pricing-box.html">Pricing Boxes</a></li>
							<li><a href="pricing-table.html">Pricing Table</a></li>
							<li><a href="404-error.html">404 Error</a></li>
						</ul>
						</li>
						<li><a href="#">Events</a>
						<ul>
							<li><a href="portfolio-one-column.html">One Column Portfolio</a></li>
							<li><a href="portfolio-two-columns.html">Two Columns Portfolio</a></li>
							<li><a href="portfolio-three-columns.html">Three Columns Portfolio</a></li>
							<li><a href="portfolio-four-columns.html">Four Columns Portfolio</a></li>
							<li><a href="portfolio-four-columns-2.html">Four Columns Portfolio 2</a></li>
							<li><a href="portfolio-sidebar.html">Portfolio With Sidebar</a></li>
							<li><a href="gallery.html">Gallery</a></li>
							<li><a href="portfolio-details.html">Portfolio Details</a></li>
							<li><a href="portfolio-details-2.html">Portfolio Details 2</a></li>
						</ul>
						</li>
						<li><a href="#">Blog</a>
						<ul>
							<li><a href="blog.html">Blog</a></li>
							<li><a href="blog-2.html">Blog Style II</a></li>
							<li><a href="blog-post.html">Blog Post</a></li>
						</ul>
						</li>
						<li><a href="contact.html">Contact</a></li>
						<li>
						<fieldset class="search-place">
							<input class="search-input" type="text" onBlur="if(this.value=='')this.value='Type and hit enter';" onFocus="if(this.value=='Type and hit enter')this.value='';" value="Type and hit enter"/>
						</fieldset>
						</li>
					</ul>
				</div>
4

Sorry, I’m not sure what you’re trying to do - the menu items seem to be below the logo (which is left aligned), and the reason it’s on the right is because you’ve give it a float: right?

If you want a two column layout, I suggest you use the OOCSS grid

5