How do I center this Dynamic Drive menu?

[briandap]

Hi I'm trying to get this menu centered: http://www.dynamicdrive.com/style/cs...el_css_menu_2/

First I wanted the button centered with black on both sides plus centering the whole thing, but i have been messing for days and can't figure it out.

I see that the style="clear:left" is what makes the black space, but how can I on the right? and I how can i change the size? Thanks in advance

Brian

[robin9000]

I can see that it has to do with the following section:

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float:left;
}

The part that would have to change is the float:left; tag but there is no center tag.

I too was wondering how to do this my self?

[briandap]

Yeah if you change it to float: center; than they are stacked and it isn't displayed properly. anyone know?

text-align: center; doesn't work either because it just centers the text.

[Schmoopy]

Well text-align can centre images, but just not whole divs.

[robin9000]

Ok here is how it is done

first you need to create a new tag in a new CSS style sheet or you can use an existing one just give it an unique id, here is my example


#example
{
margin: 0 auto;
width: 770px;
border: 1px solid red;
}

Then what you need to do is to link your style sheet to the page you need to use it in and here is an example below of how to use it with div tags.

At the top I have placed a new div tag and at the bottom a closing div tag. Both are shown in orange.

<div id="example">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Communications</a></li>
<!--Single row-->
<li><a href="#">Home</a>
<ul>
<li><a href="#">Location</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">F.A.Q.</a></li>
</ul>
</li>
<!--text-->

<li><a href="#">Services</a>
<ul>
<li><a href="#">WebDesign</a></li>
<li><a href="#">Computer</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<span style="color: #00FF00"><br style="clear: left" />
</span></div>
</div>


This will only center the menu though not the meue items in the menu, I'd still like to know how to do that too.