display multiple lists HTML/CSS

A

admin

Administrator
Staff member
I'm a newbie and I want to know how to display multiple list. For example, I have many categories like Scuba diving, Zipline, Trekking, and Wall climbing. In each categories, it has pictures associated.

<h1><a href="http://jsfiddle.net/gyt6W/" rel="nofollow">jsfiddle</a></h1>

<strong>CSS:</strong>

<pre class="lang-css prettyprint-override">
Code: 
/* gallery display */
.photos {
    display: block;
}
.photos ul {
    list-style: none;
}
.photos ul li {
    width: 210px;
    height: 310px;
    background: #FFF;
    display: inline;
    list-style: none;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 5px 3px 10px 3px;
    ;
    text-align: left;
    color: #000;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.photos ul li p {
    color: #838181;
    font-size: 12px;
    padding: 0 5px 0 5px;
}
.photos ul li span {
    font-weight:bold;
    padding: 10px 5px 0 5px;
}
.sub-nav {
    font-size: 12px;
    background: #fff;
    margin: 0 0 15px 0;
    padding: 15px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.sub-nav ul {
    list-style:none;
    margin: 0 5px 0 5px;
    padding: 0;
}
.sub-nav li {
    display:inline;
}

<strong>HTML:</strong>

<pre class="lang-html prettyprint-override">
Code: 
&lt;ul class="sub-nav"&gt;
    &lt;li&gt;&lt;a href="#zipline"&gt;Zipline |&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Wall-Climbing |&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Trekking |&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Scuba Diving &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="photos" id="photos"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://www.explorekauai.com/Kauai%20Zipline%20001.jpg" width="200" height="150" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://sportslawnews.files.wordpress.com/2011/02/zip-line-photo-2.jpg" width="200" height="150" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://www.treetopasia.com/sites/default/files/bangkok-zip-line-tours.jpg?1323449807" width="200" height="150"  /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

But I'm confused where to put the photos for the remaining categories. How to hide them when a specific category (i.e. zipline) is active or selected by the user. Any ideas how to do that? Help is much appreciated. Thanks.
 
You must log in or register to reply here.