HTMLHelp Forums > centering a list

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

asmith

Nov 6 2009, 04:53 AM

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

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

Christian J

Nov 6 2009, 08:59 AM

QUOTE(asmith @ Nov 6 2009, 10:53 AM)

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.

QUOTE

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

Nov 6 2009, 03:22 PM

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

Nov 6 2009, 04:09 PM

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>

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.