Centering a menu composed of a list 2

[DarwinIT]

I found a cool menu on a site and have tried to copy it. It uses lists with CSS to get drop down menu effects. Very cool but I can't get it to center.

Here's the html, which is going into an ASP.net master page so all of my pages will have the menu.

<div id=home_ad" class="">
<div class="home_banner">
<div class="menu" >
<ul>
<li class="selected"><a title="Home" href="djpHomePage.aspx">HOME</a></li>

<li>
<a href="javascript:void(0);">Donald James Parker</a>
<ul>
<li><a href="bio.aspx">Biography</a></li>
<li><a href="

http://dp.wordpress.com"

target="_blank">Blog</a></li>
<li><a href="GuestBookView.aspx">Guest Book</a></li>
<li><a href="../redirect_menu/redirect_donate.html">Challenges</a></li>
</ul>
</li>
<li>
<a href="../redirect_menu/redirect_home.html">BOOKS</a>
<ul>
<li> <a href="../redirect_menu/redirect_home.html">DP</a>
<li><a href="../redirect_menu/redirect_xxwebchurch.html">Recommended</a></li>
<li><a href="../redirect_menu/redirect_xxmissions.html">Featured</a></li>
<li><a href="../redirect_menu/redirect_itinerants.html">Evolution</a></li>
<li><a href="../redirect_menu/redirect_patricia.html">Writing</a></li>

</ul>
</li>
<li>
<a href="../redirect_menu/redirect_donate.html">LINKS</a>
<ul>
<li><a href="../redirect_menu/redirect_donate.html">Authors</a></li>
<li><a href="../redirect_menu/redirect_partner.html">Evolution</a></li>
<li><a href="../redirect_menu/redirect_partner.html">Religion</a></li>
<li><a href="../redirect_menu/redirect_partner.html">Writing</a></li>
<li><a href="../redirect_menu/redirect_partner.html">Videos</a></li>
<li><a href="../redirect_menu/redirect_partner.html">Radio Interviews</a></li>
</ul>
</li>


</ul>

</div>
</div>
</div>

------------
And the CSS

div#menu_parent
{
width:100%;
padding:0px;
margin:0px;
background-color:#BFBFBF;
}
div.menu
{
background-color:#BFBFBF;
border-bottom:0px solid #D6D6D6;
z-index:200;
width:100%;
margin:0 auto;
}
div.menu ul
{
display:inline;
list-style:none;
margin:0 auto;
padding:0;
background-color:#BFBFBF;

}

div.menu li
{
float:left;
position:relative;
font-size:0.87em;
font-weight:normal;
letter-spacing:1px;
}
div.menu li a
{
background-color:#BFBFBF;
display:inline-block;
height:32px;
text-decoration:none;
text-transform: uppercase;
text-align:center;
line-height:32px;
color:#202020;
padding:0 0.7em;
font-size:11px;
font-family:arial,Verdana,sans-serif;
font-weight:normal;
}
div.menu li a:hover
{
background-color:#3C0E39;
color:#eee;
cursorointer;
text-decoration:none;
}
div.menu li.selected a
{
background-color:#0058FE;
color:#eaeaea;
}

/* Temporary blue */

div.menu li.blue a
{

color:#0058FF;
font-weight:bold;
}







div.menu li.selected ul li a
{
background-color:#BFBFBF;
color:#202020;

}

div.menu li.selected ul li a:hover
{
background-color:#3C0E39;
color:#eaeaea;
}

div.menu ul ul
{
position:absolute;
width:273px;
height:0;
visibility:hidden;
top:32px;
left:0px;
border-top:1px solid #2c2c2c;
}


div.menu ul ul li a
{
width:260px;
height:26px;
text-align:left;
line-height:26px;
border:1px solid #2c2c2c;
border-width:0 1px 1px 1px;
font-size:9px;

}
div.menu ul a:hover ul, div.menu ul li:hover ul
{
visibility:visible;
z-index:200;
}



.home_banner{width:728px;float:left;margin-top:15px;}

 

[Vragabond]

If you give your .menu a width that is less than 100% (as much as it needs to be), the menu should appear in the center.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[BillyRayPreachersSon]

You should also validate your the HTML as it contains errors. Whether you added these errors, or whether they were in the original you copied, we can only speculate at.

For example, the <div> in the first line is missing an open quote before the id attribute:

<div id=[!]"[/!]home_ad" class="">

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[DarwinIT]

Thanks for the feedback.

I made the width 80% and it shifted slightly to the right. I made it 50 and it shifted more - but still wasn't in the center. There has to be a more elegant way of centering that determining the exact percent to place it in the approximate center? When I increased the font size, my menu wrapped at 50% - even though I was not using up 50% of the screen with the menu! I don't get that at all.

I did insert the missing quote and ran the page through an html validator. All seems fine with the html. Ditto with the CSS.

So I'm still stuck here.

 

[Vragabond]

Given that unordered list (ul) that is used to display the menu is displayed inline, you could try and give div.menu [tt]text-align: center;[/tt]. It would be easier to help if you could provide us with a live example or a mock-up page showing the problem.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DarwinIT]

I got it. I changed display on the menu-ul to inline-block. That caused the menu bar to span the 95% of the screen I had specified. I changed the background color on the menu class to match the background of the body to hide the portion of the menu where no lists were present - and then was able to set the width to 100% again so it is perfectly centered.

Thanks for your suggestions guys!!!

div.menu
{
background-color:#FFFFFF;
border-bottom:0px solid #D6D6D6;
position:relative;
z-index:100;
width:100%;
margin:0 auto;
}
div.menu ul
{
display:inline-block;
list-style:none;
margin:0 auto;
padding:0;
background-color:#00FF00;

}