Cascading Style Sheets (CSS) question- LI items in horizontal display

Discussion in 'HTML' started by bbcrock@gmail.com, Jan 30, 2006.

  1. Guest

    I have several items in a UL/LI relationship. These items are nested
    inside a div. I want to make the items display horizontal based on CSS
    relationships only (not resorting to html tables). I read that the way
    to do this is to use

    display: inline;

    but It's not changing the way the items display at all. Can anyone
    point me to a really good description of this tag, another tag that
    would move the LI items to a horizontal display or good ways to debug
    CSS?

    thanks!

    Don
    , Jan 30, 2006
    #1
    1. Advertising

  2. wrote:

    > I have several items in a UL/LI relationship. These items are nested
    > inside a div. I want to make the items display horizontal


    http://css.maxdesign.com.au/listamatic/

    > based on CSS relationships only


    CSS describes presentation, not relationships.

    > I read that the way to do this is to use
    >
    > display: inline;


    That is one way. There are several.

    > but It's not changing the way the items display at all.


    How are you using it?

    > Can anyone point me to a really good description of this tag, another tag
    > that would move the LI items to a horizontal display


    Display is a property, CSS doesn't have tags.

    http://www.w3.org/TR/CSS2/visuren.html#display-prop

    > or good ways to debug CSS?


    The DOM Inspector is very useful. A good introduction is available at
    http://www.brownhen.com/DI.html - but ignore everything about installing it
    as that is rather out of date. It is distributed with Firefox.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
    David Dorward, Jan 30, 2006
    #2
    1. Advertising

  3. Gazing into my crystal ball I observed writing in
    news::

    > I have several items in a UL/LI relationship. These items are nested
    > inside a div. I want to make the items display horizontal based on CSS
    > relationships only (not resorting to html tables). I read that the way
    > to do this is to use
    >
    > display: inline;
    >
    > but It's not changing the way the items display at all. Can anyone
    > point me to a really good description of this tag, another tag that
    > would move the LI items to a horizontal display or good ways to debug
    > CSS?
    >
    > thanks!
    >
    > Don
    >
    >


    css:
    ul li
    {
    /*adding padding and border so the text does not run together visually*/
    display: inline;
    padding-left:1em;
    padding-right:1em;
    border-right:1px solid #c0c0c0;
    }

    html:
    <ul>
    <li>a</li>
    <li>b</li>
    <li style="border:0">c has no border</li>
    </ul>


    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Jan 31, 2006
    #3
    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. Herb Stull

    Cascading Style Sheets

    Herb Stull, Jan 22, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    338
    Herb Stull
    Jan 22, 2004
  2. JezB
    Replies:
    5
    Views:
    2,076
  3. =?Utf-8?B?SmltIEhlYXZleQ==?=

    Cascading Style Sheets

    =?Utf-8?B?SmltIEhlYXZleQ==?=, Jun 6, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    364
    Cowboy \(Gregory A. Beamer\) [MVP]
    Jun 7, 2004
  4. John
    Replies:
    2
    Views:
    454
    nicholas
    Dec 16, 2004
  5. Software Engineer
    Replies:
    0
    Views:
    352
    Software Engineer
    Apr 2, 2007
Loading...

Share This Page