SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: List output

  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List output

    I need to output a listing of activities, which should be grouped by category. Right now I use an unsorted list. Which example you can see here:

    Listing Example

    The way it is now it looks quite okay, but in each category there could be more than one activity (There could be for example 5 different walks) Where I'm now struggling with is how I create space between the different activities within a group? This is what i have in the page:
    Code HTML4Strict:
    <div class="content">
     
    <cfoutput query="getListing" group="category_name">
    <ul class="listing">
    <h2><img src="category_icons/#category_icon#" />#category_name#</h2>
    <cfoutput>
    <li>Name: <span>#activity_name#</span></li>
    <li>Title: <span>#activity_title#</span></li>
    </cfoutput>
    </ul>
    </cfoutput>
     
    </div>

    Sorry for the server side scripting included, but that is also to indicate that the content is created dynamically and could change over night.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,500
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    You've got a <h2> inside the <ul>, that doesn't validate. Put it before the <ul>.

    To list more activities, you could use a separate <ul> for each activity, and create some space between them using CSS.

  3. #3
    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)
    As Guido said that h2 is in the wrong place as nothing can come in that dead space between the ul and the opening list tag.

    I would make that structure one list anyway and not multiple lists.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .listing {
        width: 516px;
        margin: 0 17px;
        float: left;
        display:inline;
    }
    .listing h2 {
        margin:0 0 10px;
        padding: 5px 0;
        font-size: 1.5em;
        color: #304a07;
    }
    .listing h2 img {
        width: 40px;
        height: 40px;
        float: left;
        margin-left:-80px;
    }
    .listing p {
        margin:0
    }
    .listing li {
        width: 100%;
        float: left;
        padding-left: 80px;
        color: #86bd03;
        list-style: none;
        margin:0 0 20px;
    }
    .content .listing li span {
        display: inline-block;
        color: #1d6406
    }
    </style>
    </head>
    <body>
    <ul class="listing">
        <li>
            <h2><img src="http://acthol.bgmultimediaserver.net/category_icons/walking.jpg" alt="" />Πεζοπορία</h2>
            <p>Name: <span>Μυκήνες να Prosymna</span></p>
            <p>Title: <span>Στα βήματα του Αγαμέμνονα - Περίπατος στην Αρχαία Δρόμοι Μυκηναϊκή</span></p>
        </li>
        <li>
            <h2><img src="http://acthol.bgmultimediaserver.net/category_icons/cooking.jpg" alt="" />Μαγειρική</h2>
            <p>Name: <span></span></p>
            <p>Title: <span>Παραδοσιακή Ελληνική Μαγειρική</span></p>
        </li>
        <li>
            <h2><img src="http://acthol.bgmultimediaserver.net/category_icons/horsriding.jpg" alt="" />Ιππασία</h2>
            <p>Name: <span></span></p>
            <p>Title: <span>Ιππασία στην Αρκαδική εξοχή</span></p>
        </li>
    </ul>
    </body>
    </html>

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great example Paul, that works great thanks a lot!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, one last question regarding this! Like I said. It works great, but in a few case the text within the <span> is quite long and in such cases the entire <span> wraps to the next line, aligning left with the word Title:. I.E.
    Code:
    Title: 
    This is what is happening when the text within the span is longer than the
    available width.
    Is there somehow a way, that when the text is to long, it still start next to the word title but that the exceeding text goes to the next line, starting under the beginning of the <span> text, I.E.
    Code:
    Title: This is span from which the text is longer than the
           available width.
    Thank you in advance.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6
    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)
    You could do this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .listing {
        width: 516px;
        margin: 0 17px;
        float: left;
        display:inline;
    }
    .listing h2 {
        margin:0 0 10px;
        padding: 5px 0;
        font-size: 1.5em;
        color: #304a07;
    }
    .listing h2 img {
        width: 40px;
        height: 40px;
        float: left;
        margin-left:-80px;
    }
    .listing p {
        margin:0;
            padding:0 0 0 4em;
    }
    .listing p b{
        width:3.5em;
        margin-left:-4em;
        float:left;
        clear:left;
    }
    .listing li {
        width: 100%;
        float: left;
        padding-left: 80px;
        color: #86bd03;
        list-style: none;
        margin:0 0 20px;
    }
    .content .listing li span {
        display: inline-block;
        color: #1d6406
    }
    
    </style>
    </head>
    <body>
    <ul class="listing">
        <li>
            <h2><img src="http://acthol.bgmultimediaserver.net/category_icons/walking.jpg" alt="" />Πεζοπορία</h2>
            <p><b>Name:</b> <span>Μυκήνες να Prosymna</span></p>
            <p><b>Title:</b> <span>Στα βήματα του Αγαμέμνονα - Περίπατος στην Αρχαία Δρόμοι Μυκηναϊκή</span></p>
        </li>
        <li>
            <h2><img src="http://acthol.bgmultimediaserver.net/category_icons/cooking.jpg" alt="" />Μαγειρική</h2>
            <p><b>Name:</b> <span></span></p>
            <p><b>Title:</b> <span>Παραδοσιακή Ελληνική Μαγειρική</span></p>
        </li>
        <li>
            <h2><img src="http://acthol.bgmultimediaserver.net/category_icons/horsriding.jpg" alt="" />Ιππασία</h2>
            <p><b>Name:</b> <span></span></p>
            <p><b>Title:</b> <span>Ιππασία στην Αρκαδική εξοχή</span></p>
        </li>
    </ul>
    </body>
    </html>

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great as usual. Thanks a lot.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


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
  •