Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Attempt at lists instead of tables

    Hi,

    I'm trying to redesign and not use tables. I'm converting most of the tables to lists actually - for the content I'm dealing with lists seems to work well for this.

    But... I'm stuck on a section. Here is a link to the test page with the code.

    http://www.kdok.com/programmingtest.html

    Normally I would put the "times" in one <td> and the "names" in an adjacent cell. This lines up the 1st letter of each line nicely.

    I'm not having much luck using an <ul> for this tho. As you can see the first letters of the "names" are staggered due to the data all being on the same line. I'm having trouble similating a table I guess.

    Any thoughts or suggestions on how to straighten that out?

    Thanks
    Dodge

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    Try something like this:

    Code:
    <head>
    
    <style>
    
    
    #times
    {
    	float:left;
    }
    
    
    </style>
    
    </head>
    
    
    <body>
    
    <p><strong>Monday Through Friday</strong></p>
    
    <div id="times">
    <span>12am to 5am -- </span><br>
    <span>5am to 10am -- </span><br>
    <span>10am to 3pm -- </span><br>
    <span>2pm to 7pm --  </span><br>
    <span>7pm to 12am -- </span><br>
    </div>
    
    <div>
    <a href="houston.html">Jerry Houston</a><br>
    <a href="billdavis.html">Bill Davis</a><br>
    <a href="berry.html">Paul Berry</a><br>
    <a href="fulgham.html">Mick Fulgham</a><br>
    <a href="kyser.html">Paul Kyser</a><br>
    </div>
    
    </body>
    Last edited by chump2877; 03-10-2005 at 05:41 PM.
    Regards, R.J.

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

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have to disagree with chump2877 on this one. If CSS were disabled, it's not clear which time corresponds to which name, not to mention the lack of semantic structure. Try enclosing the time in a span and setting a width that will accomodate.

    Code:
    <style type="text/css">
      .time { width:8em; }
    </style>
    
    
    <ul class="programming">
      <li style="list-style: none"><strong>Monday Through Friday</strong></li>
    
      <li><span class="time">12am to 5am</span> <a href="houston.html">Jerry Houston</a></li>
    
      <li><span class="time">5am to 10am</span> <a href="billdavis.html">Bill Davis</a></li>
    
      <li><span class="time">10am to 3pm</span> <a href="berry.html">Paul Berry</a></li>
    
      <li><span class="time">2pm to 7pm</span> <a href="fulgham.html">Mick Fulgham</a></li>
    
      <li><span class="time">7pm to 12am</span> <a href="kyser.html">Paul Kyser</a></li>
    </ul>
    BTW, as far as semantics go, this could be appropriate for a <table>.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,746
    Thanks
    18
    Thanked 155 Times in 146 Posts
    yea, i like your way better mcdougal....and yes, when you are presenting data in tabular format, there's really no reason to avoid tables just for the sake of avoiding tables....
    Regards, R.J.

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

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys!

    But that doesn't appear to have done the trick. I've updated the page if you want to check it. The first set is with the code you offered.

    I may need to use a table.

    I agree that if the data is tabular a table is in order and acceptable. I just wanted to see if this could be done "tableless".

    Thanks
    Dodge

  • #6
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Add float:left; to the class rules. It does the trick in Firefox, can't test it in IE at the moment.

    Code:
    .times { 
    width: 10em; float:left;
    }
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #7
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For this, I'd go either with a table, or with a definition list. Perhaps something like this:
    Code:
    <dl>
         <dt>12am to 5am</dt>
              <dd>Jerry Houston</dd>
         <dt>5am to 10am</dt>
              <dd>Bill Davis</dd>
         <dt>10am to 3pm</dt>
              <dd>Paul Berry</dd>
         <!-- Etc. -->
    </dl>


  •  

    Posting Permissions

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