how to make <ul> *not* move text to the right

Discussion in 'HTML' started by Tomasz Chmielewski, Jun 15, 2007.

  1. I want to make a small menu with <ul> and <li>.

    The problem is, when I use <ul>, the menu is moved to the right a bit.

    Let me illustrate by example:


    Here some text before
    <ul>
    <li>item 1 about...</li>
    <li>item 2 else...</li>
    <ul>
    Here some text after


    Renders as:


    Here some text before

    *item 1 about...
    *item 2 else...

    Here some text after


    Whereas I would like it to render just as the rest of the text (Here
    some text):

    Here some text before

    * item 1 about...
    * item 2 else...

    Here some text after


    If I remove <ul>, it will work fine, but then, it doesn't wrap properly
    if the line is longer:


    Here some text before
    <li>item 1 about very long line</li>
    <li>item 2 else...</li>
    Here some text after


    Renders as:

    Here some text before

    * item 1 about very long
    line
    * item 2 else...

    Here some text after



    Whereas with <ul>, it renders just fine (but is moved to the right):

    Here some text before
    <ul>
    <li>item 1 about very long line</li>
    <li>item 2 else...</li>
    <ul>
    Here some text after


    Renders as:

    Here some text before

    * item 1 about very long
    line
    * item 2 else...

    Here some text after


    Anyone knows the right spell? :)


    --
    Tomasz Chmielewski
     
    Tomasz Chmielewski, Jun 15, 2007
    #1
    1. Advertising

  2. 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/
     
    Jukka K. Korpela, Jun 15, 2007
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Cal Who
    Replies:
    2
    Views:
    1,557
    Cal Who
    May 15, 2010
  2. Eduardo78
    Replies:
    0
    Views:
    278
    Eduardo78
    Nov 3, 2005
  3. Andrew Tomazos
    Replies:
    2
    Views:
    693
    Nobody
    Dec 12, 2011
  4. Oran
    Replies:
    2
    Views:
    600
  5. Replies:
    6
    Views:
    801
    John B. Matthews
    Apr 13, 2013
Loading...

Share This Page