|
|
Posted by Jukka K. Korpela on 06/15/07 16:45
Scripsit Tomasz Chmielewski:
> I want to make a small menu with <ul> and <li>.
What do you mean by a menu? Your examples show no sign of links. Did you
omit them just for simplicity?
> The problem is, when I use <ul>, the menu is moved to the right a bit.
That's to be expected, since the default rendering has left margin or
padding, partly to accommodate list bullets.
> Let me illustrate by example:
Why don't you post a URL so that we could see a _real_ example? The one you
posted has a syntax error.
> If I remove <ul>, it will work fine, but then, it doesn't wrap
> properly if the line is longer:
Then it's not a list, and it's not valid markup. All bets are off.
> Anyone knows the right spell? :)
Surely. Set the left margin and padding of ul and li elements so that you
have the desired total amount of indentation. It's easiest to set all but
one of them to zero. Beware that the indentation should be at least about
1.3em, since otherwise the bullets might not fit in. (If you want to get rid
of the bullets, use list-style-type: none.)
You would thus use something like the following:
<style type="text/css">
ul, ul li { margin-left: 0; padding-left: 0; }
ul { margin-left: 1.3em; }
</style>
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Navigation:
[Reply to this message]
|