SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    seems <li>ke a problem...

    My html looks like this:

    HTML Code:
    <html>
    <head>
    <title>Title</title>
    <style>
    body,div,p{padding:0;margin:0;}
    ul.navi{list-style:none;width:100%;text-align:center;}
    ul.navi li{float:left;[b]width:40%;[/b]}
    div#greeting{padding:7% 1% 5% 5%;float:left;width:55%}
    div#features{padding:5% 5% 5% 1%;float:right;width:33%}
    div#features p{text-align:center}
    </style>
    </head>
    <body>
    <div id="greeting">
    <p>some content</p>
    <p>some more content</p>
    <ul class="navi">
    <li>
      <div>What I want</div>
      <span>Try</span>
    </li>
    <li>
      <div>What I'll do</div>
      <span>Try once more</span>
    </li>
    </ul>
    </div>
    <div id="features">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <ul class="navi">
      <li>
    	<span>Go TRY</span>
      </li>
    </ul>
    <p>content</p>
    </div>
    </body>
    </html>
    Where I put the width in bold I'd love an auto-width, but width:auto does not do what I want.
    If there is only one <li> my width should be 100% but is there are 2 it should be 2 times 50%, is there are 3 ist shoud be 33,3% and so on... How can I solve this in CSS?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't really get a sense of what and why you are trying to do this.

    Can't you simply set up a class for each list depending on how many items you want in there?

    Alternatively specify an abritary width (e.g.20%) but just clear the last one (clear:both) to force a new line.

    Sorry I'm not really understanding what you need to do

    Paul

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you want the width of each <li> to be 100% of the <ul> width, divided by the number of list items (however many that may be)?

    I don't think you can do that, short of using Javascript or server-side scripting, or as Paul suggests, set up a different class for 3-item-lists, 4-item-lists, 5-item-lists, etc.

  4. #4
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    I can't really get a sense of what and why you are trying to do this.

    Can't you simply set up a class for each list depending on how many items you want in there?
    That would be the easiest solution if I did not need to make it generic.
    The html wil be rendered by XSLT, so I don't know how many items there will be...

    Quote Originally Posted by Paul O'B
    Alternatively specify an abritary width (e.g.20%) but just clear the last one (clear:both) to force a new line.

    Sorry I'm not really understanding what you need to do
    this way they will not be nicely centered: eg I take 20% for only 2 items -> 60% whitespace


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •