centering a list Options

[asmith]

Hi,

Long time ago I picked up a code from cssplay and everything was fine.
Recently I added some languages to the site and my menu is getting messed up because some word in english has a longer length in other languages. (or shorter, Just different size)

I tried to narrow down the codes to this one:

CODE

<style type="text/css">
.mymenu {position:relative;z-index:2000; height:21px;}
.mymenu ul li a, .menu1 ul li a:visited {display:block; text-decoration:none; color:red;height:20px; text-align:left; background:transparent; line-height:20px; font-size:12px;padding:5px 10px 5px 10px;z-index:5000;}
.mymenu ul {padding:0; margin:0; list-style: none; display: inline}
.mymenu ul li {float:left; position:relative;}
.mymenu ul li ul {display: none;}
.mymenu ul li.wide a, .menu1 ul li.wide a:visited {width:300px;}

.mymenu ul li:hover a {color:yellow; background:black;}
</style>
<div align="center">
<span class="mymenu">

<ul>
<li><a href="link" class="upper">test</a></li>
<li><a class="hide" href="link">testtesttest</a></li>

</ul>
</span>

</div>

My first question is, How can I center the ul in the div?
In this case, the 2 links just stand at the center of the div.
I put display: inline in this :
.mymenu ul {padding:0; margin:0; list-style: none; display: inline}

But I'm getting nothing, As I think the ul is acting like block.

Thanks for your time

This post has been edited by asmith: Nov 6 2009, 04:54 AM

[Christian J]

CODE

<span class="mymenu">

<ul>
<li><a href="link" class="upper">test</a></li>
<li><a class="hide" href="link">testtesttest</a></li>

</ul>
</span>

You can't put a block element like UL inside an inline element like SPAN.

My first question is, How can I center the ul in the div?

Same way as with any block element: http://css-discuss.incutio.com/?page=CenteringBlockElement

But do you want the LI elements to display like inline? If so:

CODE

div {
text-align: center;
background: pink;
}
ul, li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
ul {background: lime;}
li {background: yellow;}

<div>
<ul>
<li><a href="link" class="upper">test</a></li>
<li><a class="hide" href="link">testtesttest</a></li>
</ul>
</div>

[asmith]

Thanks mate I found what I needed!!

Dunno why I thought <li> is an inline element ^^
I may come back to this topic though

[Christian J]

Actually the code can be simplified:

CODE

ul {
text-align: center;
margin: 0;
padding: 0;
background: pink;
}
li {
display: inline;
background: yellow;
}

<ul>
<li><a href="link" class="upper">test</a></li>
<li><a class="hide" href="link">testtesttest</a></li>
</ul>