SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)

    Should I use lists in this case?

    Hallo all,

    I'm doing a code rewrite (for a potential customer) of <snip> this site, example page. You can see articles lined up with a photo and short description.

    The current code uses classed divs which I was starting to use myself. But The setup is
    Header
    thing, thing, thing, thing, thing, thing

    Header
    thing, thing, thing, thing, thing, thing

    well, if a grocery list is a list because they are all grocery items, then would these be better as lists?

    It's hard for me to tell if this is a list of items or a sequence of items. Maybe ultimately it doesn't matter but right now I'm between listing and divving them.

    I'm not considering a table for this, I don't think it's necessary or tabular enough.

    Thanks,
    poes

    edit link now removed, original HTML added.
    original page's HTML (indentation mine, it's all one big string):
    Code:
     <!-- CONTENT -->
          <div class="main-content">
    
    <a href="index.php?p=home">Home</a> > <a href="index.php?p=shopfilter">Shop</a> > <b>Artikelen</b><h1>Shop - Artikelen</h1>
    <table>
    <tr>
    <td><a href="index.php?p=shopfilter"><u>Terug naar de shop</u></a>
    <tr><td>&nbsp;</table>
    <table><tr><td align="right"><b>Categorie:</b> <td><a href="#Jassen">Jassen</a> <a href="#Jeans">Jeans</a> <a href="#Riemen">Riemen</a> <a href="#Shirts">Shirts</a> <a href="#Vest">Vest</a> </table>
    <hr class="clear-contentunit"><br>
    <A NAME="Jassen"><H2>Jassen</H2></A>
    
    <DIV CLASS="artikellist"><A HREF="index.php?p=artikel_detail&artikel=1021"><IMG SRC="images/kleding/N94009A_1th.jpg" HEIGHT="330"></A><BR><U><B>Jongens</B></U><BR><FONT COLOR="red"><B>Nieuw!</B></FONT> <A HREF="index.php?p=artikel_detail&artikel=1021">Levi's<BR>Many - Medium used</A></DIV>
    
    <DIV CLASS="artikellist"><A HREF="index.php?p=artikel_detail&artikel=1020"><IMG SRC="images/kleding/N94006A_1th.jpg" HEIGHT="330"></A><BR><U><B>Jongens</B></U><BR><FONT COLOR="red"><B>Nieuw!</B></FONT> <A HREF="index.php?p=artikel_detail&artikel=1020">Levi's<BR>Many - Rinse</A></DIV>
    <TABLE><TR><TD><A HREF="#top">Terug omhoog</A><TR><TD>&nbsp;</TABLE>
    <A NAME="Jeans"><H2>Jeans</H2></A>
    <DIV CLASS="artikellist"><A HREF="index.php?p=artikel_detail&artikel=1015"><IMG SRC="images/kleding/N92210A_1th.jpg" HEIGHT="330"></A><BR><U><B>Jongens</B></U><BR><FONT COLOR="red"><B>Nieuw!</B></FONT> <A HREF="index.php?p=artikel_detail&artikel=1015">Levi's<BR>Lift - Rinse</A></DIV>
    
    <DIV CLASS="artikellist"><A HREF="index.php?p=artikel_detail&artikel=1014"><IMG SRC="images/kleding/N92208A_1th.jpg" HEIGHT="330"></A><BR><U><B>Jongens</B></U><BR><FONT COLOR="red"><B>Nieuw!</B></FONT> <A HREF="index.php?p=artikel_detail&artikel=1014">Levi's<BR>Usual - Rinse</A></DIV>
    
    <DIV CLASS="artikellist"><A HREF="index.php?p=artikel_detail&artikel=1016"><IMG SRC="images/kleding/N92216A_1th.jpg" HEIGHT="330"></A><BR><U><B>Jongens</B></U><BR><FONT COLOR="red"><B>Nieuw!</B></FONT> <A HREF="index.php?p=artikel_detail&artikel=1016">Levi's<BR>Usual - Medium used</A></DIV>
    
    <DIV CLASS="artikellist"><A HREF="index.php?p=artikel_detail&artikel=1017"><IMG SRC="images/kleding/N92259A_1th.jpg" HEIGHT="330"></A><BR><U><B>Meisjes</B></U><BR><FONT COLOR="red"><B>Nieuw!</B></FONT> <A HREF="index.php?p=artikel_detail&artikel=1017">Levi's<BR>Jael Dark - Dark Worn</A></DIV>
    
    <DIV CLASS="artikellist"><A HREF="index.php?p=artikel_detail&artikel=1018"><IMG SRC="images/kleding/N92265A_1th.jpg" HEIGHT="330"></A><BR><U><B>Meisjes</B></U><BR><FONT COLOR="red"><B>Nieuw!</B></FONT> <A HREF="index.php?p=artikel_detail&artikel=1018">Levi's<BR>Jael Medium - Light indigo</A></DIV>
    
    <DIV CLASS="artikellist"><A HREF="index.php?p=artikel_detail&artikel=1019"><IMG SRC="images/kleding/N99270A_1th.jpg" HEIGHT="330"></A><BR><U><B>Meisjes</B></U><BR><FONT COLOR="red"><B>Nieuw!</B></FONT> <A HREF="index.php?p=artikel_detail&artikel=1019">Levi's<BR>Laguna - Medium used</A></DIV>
    
    <TABLE><TR><TD><A HREF="#top">Terug omhoog</A><TR><TD>&nbsp;</TABLE>      </div>
    Last edited by Stomme poes; Jun 30, 2009 at 05:56.

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd definitely use at least an unordered list, probably nested; headers on the top level, and items descended.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Thanks, I ended up with this:
    Code:
            <div id="artikelen">
              <h3><a id="Jeans" href="#Jeans"></a>Jeans</h3>
              <ul>
                <li>
                  <p><a href="#"><img src="img/g-star1.jpg" width="145" height="330" alt="" /></a> Heren</p>
                  <p><span class="nieuw">Nieuw!</span> <a href="#">G-Star <span class="typ">Many - Medium used</span></a></p>
                </li>
                <li>
                  <p><a href="#"><img src="img/g-star2.jpg" width="145" height="330" alt="" /></a> Heren</p>
                  <p><span class="nieuw">Nieuw!</span> <a href="#">G-Star <span class="typ">Many - Rinse</span></a></p>
                </li>
                <li>
                  <p><a href="#"><img src="img/g-star3.jpg" width="145" height="330" alt=""></a> Heren</p>
                  <p><span class="nieuw">Nieuw!</span> <a href="#">G-Star <span class="typ">Many - Rinse</span></a></p>
                </li>
              </ul>
              <p class="boven"><a href="#categorie">Terug omhoog</a></p>
    
              <h3><a id="Riemen" href="#Riemen"></a>Riemen</h3>
              <ul>
                <li>
                  <p><a href="#"><img src="img/g-star4.jpg" width="145" height="330" alt="" /></a> Heren</p>
                  <p><span class="nieuw">Nieuw!</span> <a href="#">G-Star <span class="typ">Many - Medium used</span></a></p>
                </li>
                <li>
                  <p><a href="#"><img src="img/g-star5.jpg" width="145" height="330" alt="" /></a> Heren</p>
                  <p><span class="nieuw">Nieuw!</span> <a href="#">G-Star <span class="typ">Many - Rinse</span></a></p>
                </li>
                <li>
                  <p><a href="#"><img src="img/g-star6.jpg" width="145" height="330" alt=""></a> Heren</p>
                  <p><span class="nieuw">Nieuw!</span> <a href="#">G-Star <span class="typ">Many - Rinse</span></a></p>
                </li>
              </ul>
              <p class="boven"><a href="#categorie">Terug omhoog</a></p>
    
              <h3><a id="Shirts" href="#Shirts"></a>Shirts</h3>
              <ul>
                <li>
                  <p><a href="#"><img src="img/g-star7.jpg" width="145" height="330" alt="" /></a> Heren</p>
                  <p><span class="nieuw">Nieuw!</span> <a href="#">G-Star <span class="typ">Many - Medium used</span></a></p>
                </li>
                <li>
                  <p><a href="#"><img src="img/g-star8.jpg" width="145" height="330" alt="" /></a> Heren</p>
                  <p><span class="nieuw">Nieuw!</span> <a href="#">G-Star <span class="typ">Many - Rinse</span></a></p>
                </li>
                <li>
                  <p><a href="#"><img src="img/g-star9.jpg" width="145" height="330" alt=""></a> Heren</p>
                  <p><span class="nieuw">Nieuw!</span> <a href="#">G-Star <span class="typ">Many - Rinse</span></a></p>
                </li>
              </ul>
              <p class="boven"><a href="#categorie">Terug omhoog</a></p>
            </div>
    The original code has a div for each item with a class, and thought I could get away with an extra container with an id and reference the lists:

    Code:
    h1, h2, h3 {
      margin-bottom: .5em;
      color: #505050;
      font: normal 1.3em "trebuchet ms", helvetica, arial, sans-serif;
    }
    	h1 {
    	  margin-bottom: .8em;
    	  font-size: 1.4em;
    	}
    	#artikelen h3 {
    	  clear: both;
    	  margin-top: 2em;
    	  font-size: 1.2em;
    	}
    ...
    
    #artikelen {
      overflow: hidden;
    }
    * html #artikelen {width: 585px; overflow: visible;}/*haslayout*/
    
    #artikelen ul {
      list-style: none;
      margin-bottom: 1.5em;
      overflow: hidden;
    }
    	#artikelen ul li {
    	  float: left;
    	  width: auto;
    	  min-width: 145px;
    	  margin-right: 1em;
    	  padding: 4px;
    	  background-color: #fff;
    	  border: 1px solid #d2d2d2;
    	}
    	#artikelen li p {
    	  font-size: .7em;
    	  font-weight: bold;
    	  text-align: center;
    	}
    
    * html #artikelen li p a {display: block;}
    
    		#artikelen li p:first-child a {
    		  display: block;
    		}
    		p span.nieuw {
    		  color: #f00;
    		}
    		p a span.typ {
    		  display: block;
    		}
    		  
    
    p.boven {
      clear: both;
      font-size: .8em;
    }
    I don't like width-less floats here but I noticed the articles aren't always the same width even though supposedly the images are all supposed to be the same sizes. So I'm hoping blocking some inners will let the shrink-wrap work right... until I can see if they're going to use image-magick or something.

    What's sad is the code on the existing site will be what's used : ( I'm just making a pretty example.

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    I'd definitely use at least an unordered list, probably nested; headers on the top level, and items descended.

    cheers,

    gary
    Looks to me to be an ordered list - alphabetically ordered

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    alphabetically?

  6. #6
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    alphabetically?
    Weird sounding word, huh? ha!

    Alphabetical order:

    Jeans
    Riemen
    Shirts

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Huh, you know, it might be. I never noticed. Looking on a fuller page with more stuff, yeah, that must have been what they did.

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Looks to me to be an ordered list - alphabetically ordered
    I didn't catch that, but if it is alphabetic by purpose, and not serendipitously, then ordered it is.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    HTML Code:
    		<dl>
    			<dt>Header</dt>
    			<dd>
    				<ol>
    					<li>Item</li>
    					<li>Item</li>
    					<li>Item</li>
    					<li>Item</li>
    				</ol>
    			</dd>
    			<dt>Header</dt>
    			<dd>
    				<ol>
    					<li>Item </li>
    					<li>Item</li>
    					<li>Item</li>
    				</ol>
    			</dd>
    		</dl>

  10. #10
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I try to stay away from using Definition Lists for examples such as Stomme proposed.

    Read this section: Are there downsides of using definition lists?
    http://www.maxdesign.com.au/presentation/definition/

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Agreed with MaxDesign on this one-- those headers need to remain headers. They are heading the content underneath them. Since I am already using headers there is already a relationship— a header "heads" the content underneath it, until the next header or eof, right? So the content underneath "belongs" to that header. Plus you can quick-key H in JAWS : )

    Since I don't know why they chose alphabetical, I'm not going with the ordered list, I mean, can it possibly matter that the jeans come before or after vests? I think alphabetical was just chosen as being easy for the maintainer/writer of the page. There might also be something going on in the back-end.

    If it mattered (the alphabeticalness) then I'm agreed with Gary, and I would indeed go with an ol (which can has headers inside). So taking oddz' example but without the dl:
    Code:
    <ol>
      <li>Header
        <ul>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
        </ul>
      </li>
      <li>Header
        <ul>
          <li>Item </li>
          <li>Item</li>
          <li>Item</li>
        </ul>
      </li>
    </ol>


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
  •