donboe
April 20, 2011, 8:54am
1
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:
<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.
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.
PaulOB
April 20, 2011, 9:37am
3
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.
<!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
April 28, 2011, 7:50pm
4
Great example Paul, that works great thanks a lot!
donboe
April 29, 2011, 4:54am
5
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.
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.
Title: This is span from which the text is longer than the
available width.
Thank you in advance.
PaulOB
April 29, 2011, 9:27am
6
You could do this:
<!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
April 29, 2011, 10:10am
7
Works great as usual. Thanks a lot.