Centering horizontal <ul> inside <div>

bucket

04-16-2011, 03:03 AM

Hey guys, Im having a bit of a confusing problem at the moment, im trying to center my navigation menu inside my fixed width.

This is how it currently looks like:

http://s3.amazonaws.com/awesome_screenshot/534479?AWSAccessKeyId=0R7FMW7AXRVCYMAPTPR2&Expires=1302919485&Signature=cXc3gaj8dkUz2s7fwNldskT%2Fnfo%3D

Im trying to center it so it doesnt matter how many <li>'s there are it will still be centered.

Here is my HTML:

<center>
<div class="main_menu">
<ul>
<li> <a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li> <a href="#">Portfolio</a></li>
<li> <a href="#">Portfolio</a></li>
<li> <a href="#">Portfolio</a></li>
</ul>
</div>
</center>

And here is my CSS:
.main_menu
{
border:1px solid;
width:898px;
margin-bottom:5px;
background-color:#333333;
height:30px;
line-height:30px;
color:#000000;
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align: center;
}
.main_menu ul
{
position:relative;
text-align: center;
margin: 0 auto;
list-style:none;
cursor:pointer;
}
.main_menu ul li
{
list-style-position:inside;
cursor:pointer;
text-align: center;
padding:0;
margin:0;
float:left;
background:#333333;
}
.main_menu ul li a
{
cursor:pointer;
text-align: center;
color:#FFF;
display:block;
text-decoration:none;
padding:0 25px;
}
.main_menu ul li a:hover
{
cursor:pointer;
text-align: center;
background:#3ea5ea;
color:#000;
}

_Aerospace_Eng_

04-16-2011, 03:45 AM

The <center> tag isn't going to work. It is also deprecated. Why you are even using it in the first place beats me. This should help

http://www.cssplay.co.uk/menus/centered.html

bullant

04-16-2011, 03:50 AM

Maybe use this demo as a guide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#linksContainer {
width: 900px;
margin: 0px auto 0px auto;
overflow: hidden;
border: 1px solid red}
#linksList {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
position: relative;
left: 50%}
#linksList li {
float: left;
margin: 0px 20px 0px 20px;
position: relative;
right: 50%}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="linksContainer">
<ul id="linksList">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</body>
</html>

bucket

04-16-2011, 04:24 AM

Bullant, thank you so much my mate, you have helped me out alot! :)

Works perfectly. :)

Also one more thing, how would I do it so i can add images on both ends of the navbar?

bullant

04-16-2011, 04:31 AM

you're welcome :)

Also one more thing, how would I do it so i can add images on both ends of the navbar?

something like this.

<div id="linksContainer">
<ul id="linksList">
<li><img src="yourPic.jpg" alt="" /></li>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Portfolio</a></li>
<li><img src="yourPic.jpg" alt="" /></li>
</ul>
</div>

Depending on the width of your images, you might have to increase the width of linksContainer in the css.

bucket

04-16-2011, 06:24 AM

yeah like lets say i want to add like rounded corners at the end, would I make it a bg end image or a img src?

bullant

04-16-2011, 11:02 PM

yeah like lets say i want to add like rounded corners at the end, would I make it a bg end image or a img src?

I'm not sure what is going on here.

Your signature says

PHP, HTML, and CSS Coding, Logo and Web Design - Professionally done

So if it is referring to you, then you already know the answer to your basic question.