RE: [WSG] setting width for
  • s when inline

    • Tue, 13 Jul 2004 05:34:31 -0700

    for all interested (and thanks to everyone), tania had the answer that worked out for me. the <li>s need to have some float (within the <ul>) or they all bunch up.
     
    ps - for anyone that's interested, i'm not quite doing the ala-tabs thing. i'm replacing a list of links with associated icons, replacing the text in the <li>s with images via css. presents like a text list to readers, etc. visually, it looks like a row of (differing-width) icons.
     
    s:r
     
    -----Original Message-----
    From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]On Behalf Of [EMAIL PROTECTED]
    Sent: Monday, July 12, 2004 9:24 PM
    To: [EMAIL PROTECTED]
    Subject: Re: [WSG] setting width for <li>s when inline

    By adding " float: left; " to your <li> class all your list items will continue on along one horizontal line. If you leave the <li> width at 200 they wil be even spaced but if you remove this they will of course bunch up closer.
     
    Tania
     
    ----- Original Message -----
    Sent: Tuesday, July 13, 2004 5:32 AM
    Subject: [WSG] setting width for <li>s when inline

    I'm attempting to build a horizontal menu that from an unordered list. My plan is to provide the list as text in the html, then use an image-replacement scheme (ala http://www.mezzoblue.com/tests/revised-image-replacement/) to  swap out the text with images. It looks to me like image-replacement depends on me being able to set the width of the containing element, in my case, an <a>

    I want the CSS to work without being altered, whether i include all of the <li> menu items or not, so I don't know how wide the overall <ul> will be when the page is actually created.

    Is it possible to set width on an inline element? Can I get the same effect from some sort of absolute positioning (when i don't know the widths of elements)?

    for instance,

    <ul>
    <li>short</li>
    <li>this is a longer item</li>
    <li>and some other</li>
    </ul>

    ul {
    display: inline;
    }

    li {
    display: inline;
    width: 200px;
    height: 50px;
    background-color: #eee;
    }

    in this example, i'd like to see that as 3 200px squares in a horizontal line...

    any help appreciated...

    scott reston
    *****************************************************
    The discussion list for http://webstandardsgroup.org/
    See http://webstandardsgroup.org/mail/guidelines.cfm
    for some hints on posting to the list & getting help
    *****************************************************


    Reply via email to