List output

**donboe** · Apr 20, 2011 01:54

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.

**guido2004** · Apr 20, 2011 02:11

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.

**Paul O'B** · Apr 20, 2011 02:37

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>

**donboe** · Apr 28, 2011 12:50

Great example Paul, that works great thanks a lot!

**donboe** · Apr 28, 2011 21:54

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.

**Paul O'B** · Apr 29, 2011 02:27

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>

**donboe** · Apr 29, 2011 03:10

Works great as usual. Thanks a lot.

User Tag List

Thread: List output

Thread Tools

Display

List output

Bookmarks

Bookmarks

Posting Permissions