SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Thread: Double List?

  1. #1
    Pixels Matter! Jimknee's Avatar
    Join Date
    Jul 2001
    Location
    Island Paradise :D
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Double List?

    Ok, I'm trying to get my lists arranged like so:



    What's the best way to do this? Also, I don't want any 'dots' or numbers next to the items. (the lists are lists of links)

    Tks


    http://sample.adminsites.com/

  2. #2
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To not have 'dots' you could use:
    Code:
     li { list-style-type: none}
    The only way I could think of to display the lists like that is to use relative positioning, and have each subset of links insite a div.

    I know that wouldn't be the best solution.


  3. #3
    Pixels Matter! Jimknee's Avatar
    Join Date
    Jul 2001
    Location
    Island Paradise :D
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tks, Winged Spider.

    Hmm, that solution sounds a little complicated. There's no easier way?

  4. #4
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There probably is. I can't think of it right now, or I don't know it.


  5. #5
    Pixels Matter! Jimknee's Avatar
    Join Date
    Jul 2001
    Location
    Island Paradise :D
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok

    I'm basically trying to avoid having a long, scrolling page. But someone mentioned to me that the links on my page were bunched together. (still are) So I figured CSS might clean it up.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2001
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give this a go...

    <table><tr>
    <th colspan="2">Photoshop</th>
    </tr><tr>
    <td><ol style="list-style-type: none;">
    <li>slice images</li>
    <li>glass buttons</li>
    <li>photoshop cafe</li>
    </ol></td>
    <td><ol style="list-style-type: none;">
    <li>vector shapes</li>
    <li>depth of field</li>
    <li>gfxsite</li>
    </ol></td>
    </tr></table>

    I think CSS is the only "clean" way to get rid of the bullets unless you just to a regular...
    slice images<br>
    glass buttons<br>
    photoshop cafe
    Sort of thing. If you don't want the bullets, it would probably come out the same anyways?

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep...

    Just put it in a TABLE with two columns.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    Pixels Matter! Jimknee's Avatar
    Join Date
    Jul 2001
    Location
    Island Paradise :D
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's a good solution- but I was wondering if there was a CSS solution. Just to keep the code simple.

    Tks, htmlite

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no list type that will put your data into two columns. There WAS a Netscape only tag that would take a paragraph of content and split into two colums. It's too bad that never caught on. That would have been a GREAT tag to keep in the spec.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  10. #10
    Pixels Matter! Jimknee's Avatar
    Join Date
    Jul 2001
    Location
    Island Paradise :D
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Netscape only? Argh. I don't want to go 'table happy' on my page.

    Tks.

  11. #11
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ill take this as a challenge.

    It will be fun.

    Let's see what you can do with CSS.


  12. #12
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could always go XML and define some patterns for the list. However, XML would probably be overkill.

    Sketch
    Aaron Brazell
    Technosailor



  13. #13
    Pixels Matter! Jimknee's Avatar
    Join Date
    Jul 2001
    Location
    Island Paradise :D
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "Ill take this as a challenge.

    It will be fun.

    Let's see what you can do with CSS."

    Excellent!

    ---------------

    XML? Hmm, looks like I'll be buying another 800 page book soon!

  14. #14
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What, am I getting requests, now? :-D

    Well, which do you want first: the good news or the bad? Lets start with the good: in CSS3 your problems will be solved with multi-column layouts. The bad news: at the rate that browsers progress regarding standards, you'll have to wait a while.

    But wait, there are possibilities with CSS1! If you think creatively, I'm sure that you could use the float and clear properties to do what you want.
    Code:
    <html>
    <head>
    <title>A Title to Make This a Valid XHTML Document...</title>
    <style type="text/css">
    div {
      clear: left;
      }
    div ul {
      float: left;
      list-style-type: none;
      }
    </style>
    </head>
    <body>
      <div>
        <h1>My Fav CSS Tuts...</h1>
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
        </ul>
        <ul>
          <li>Link 4</li>
          <li>Link 5</li>
          <li>Link 6</li>
        </ul>
      </div>
    
      <div>
        <h1>My Fav HTML Tuts...</h1>
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
        </ul>
        <ul>
          <li>Link 4</li>
          <li>Link 5</li>
          <li>Link 6</li>
        </ul>
      </div>
    </body>
    Or, if you want to get really advanced, you could try to use CSS2's display property's "table-*" values. But I don't even tread there. ;-)

    Quite frankly, I don't see how you would be any better not using tables for this. Remeber this is what they were designed for! You're listing data (this time links) into a package that is contained in as little screen space as possible. Also, putting your links inside a table takes care of that spacing problem you were having.

    Now, repeat after me: tables arn't always bad, just using them for cheep layout effects is. :-D

    ~~Hope This Helps

  15. #15
    Pixels Matter! Jimknee's Avatar
    Join Date
    Jul 2001
    Location
    Island Paradise :D
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much, Ian.

    Good points. I was thinking there was a CSS solution that I could put once in my linked sheet, and the links - as they are added - would flow automatically into multiple lists. As you've said, some of this will be possible in CSS3.

    "This module has two major advantages over table-based layouts. First, it allows content to flow from one column to another based on available space rather than document structure. Second, this module allows the column width to be specified and the number of columns to vary depending on available space."

    I'm trying to avoid having to pick through tables as I update and change links. (There are 88 links so far.) So, I'm going to give that float/clear solution a try.

    Tks

  16. #16
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you code your TABLEs right then it won't be that hard. Plus, there's always find and replace. If you do decide to go with a CSS solution, make sure that you test extensively. It would suck to change your code and then discover that some browsers can't see what you want.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  17. #17
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know Netscape 4 has big problems with complex floats. :-(

    N4 is the bane of my existence...

  18. #18
    Pixels Matter! Jimknee's Avatar
    Join Date
    Jul 2001
    Location
    Island Paradise :D
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, good point about testing.


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
  •