help with ccs

Post by **corpse** » Sun Dec 23, 2007 6:12 am

I have downloaded a .css file from a free site that says it is OK to modify code to suit individual needs. I will post the code and see if anyone can help.

I cannot get more than 12 images to show in each catagory. Image set#1, #2, etc.

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | A sliding list Gallery</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, opacity, layouts, navigation, menus, experiments,demonstrations, photo, photograph, gallery, slide, slideshow, picture, drop, down, pull, up, fly, out, free" />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" />
<meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0) gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<link rel="stylesheet" media="all" type="text/css" href="../css/css_play.css" />
<link rel="stylesheet" media="all" type="text/css" href="../css/demos.css" />

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/list_gallery.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* defaults required for IE6 */
a {color:#000;}
a:visited {color:#111;}
a:active {color:#222;}
a:hover {text-decoration:none;}

/* Gallery styling */

.photo {position:relative; width:732px; height:382px;}
.photo ul, .photo ul ul {padding:0; margin:0; border:0; list-style:none; width:215px;}
.photo ul ul {margin-left:-9999px; height:0; overflow:hidden;}
.photo ul li {width:215px; background:#ddd; float:left; background:#fff url(button/gallery_2.gif) no-repeat;}
.photo ul li a.set {display:block; text-align:center; height:30px; line-height:30px; background:#fff url(button/gallery_0.gif) no-repeat; font-family: verdana, arial, sans-serif; font-size:11px; text-decoration:none;}

.photo ul li table {border-collapse:collapse: margin:0; padding:0; display:none;}

.photo ul li a.set:hover {background:transparent;}
.photo ul li:hover a.set {background:transparent;}

.photo ul :hover b {display:block; width:480px; height:360px; background:#f8f8f8; border:1px solid #888; position:absolute; left:250px; top:0;}

.photo ul :hover table
{border-collapse:collapse: padding:0; margin-top:-2px; display:block; border:1px solid #888; border-width:0 1px 1px 1px;}

.photo ul :hover ul
{margin:0; width:207px; overflow:visible; height:207px; background:transparent;}

.photo ul :hover ul li
{float:left; display:inline; width:56px; margin:2px 6px; background:transparent;}

.photo ul :hover ul li a
{background:transparent;}

.photo ul :hover ul li a img.thumb
{margin:3px; display:block; border:0;}

.photo ul :hover ul li a img.full
{position:absolute; left:-9999px; top:0; border:0;}

.photo ul :hover ul li a:hover img.thumb
{margin:0; border:3px solid #fc0;}

.photo ul :hover ul li a:hover
{background:#000000;}

.photo ul :hover ul li a:hover img.full
{left:250px; z-index:0; border:1px solid #000;}

.photo .default {width:480px; height:360px; position:absolute; left:250px; top:0; border:1px solid #ddd;}

</style>

</head>

<body id="www-cssplay-co-uk" bgcolor="#000000">
<div id="showcase">

<div id="info">

<div class="photo"> <img class="default" src="images/f1.gif" alt="default image" title="" />
<ul class="topic">
<li><a class="set" href="#nogo">Club Pictures</a><b></b>
<ins><table><tr><td>
<ul>
<li><a href="#nogo"><img class="thumb" src="images/1a.gif" alt="" title="" /><img class="full" src="images/1.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/2a.gif" alt="" title="" /><img class="full" src="images/2.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/3a.gif" alt="" title="" /><img class="full" src="images/3.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/4a.gif" alt="" title="" /><img class="full" src="images/4.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/5a.gif" alt="" title="" /><img class="full" src="images/5.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/6a.gif" alt="" title="" /><img class="full" src="images/6.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/7a.gif" alt="" title="" /><img class="full" src="images/7.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/8a.gif" alt="" title="" /><img class="full" src="images/8.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/9a.gif" alt="" title="" /><img class="full" src="images/9.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/10a.gif" alt="" title="" /><img class="full" src="images/10.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/11a.gif" alt="" title="" /><img class="full" src="images/11.gif" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="images/12a.gif" alt="" title="" /><img class="full" src="images/12.gif" alt="" title="" /></a></li>
</ul>
</td></tr></table></ins>
</li>
<li><a class="set" href="#nogo">Image Set #2</a><b></b>
<ins><table><tr><td>
<ul>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape1b.jpg" alt="" title="" /><img class="full" src="lpics/landscape1.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape2b.jpg" alt="" title="" /><img class="full" src="lpics/landscape2.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape3b.jpg" alt="" title="" /><img class="full" src="lpics/landscape3.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape4b.jpg" alt="" title="" /><img class="full" src="lpics/landscape4.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape5b.jpg" alt="" title="" /><img class="full" src="lpics/landscape5.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape6b.jpg" alt="" title="" /><img class="full" src="lpics/landscape6.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape7b.jpg" alt="" title="" /><img class="full" src="lpics/landscape7.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape8b.jpg" alt="" title="" /><img class="full" src="lpics/landscape8.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape9b.jpg" alt="" title="" /><img class="full" src="lpics/landscape9.jpg" alt="" title="" /></a></li>
</ul>
</td></tr></table></ins>
</li>
<li><a class="set" href="#nogo">Image Set #3</a><b></b>
<ins><table><tr><td>
<ul>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape13b.jpg" alt="" title="" /><img class="full" src="lpics/landscape13.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape14b.jpg" alt="" title="" /><img class="full" src="lpics/landscape14.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape15b.jpg" alt="" title="" /><img class="full" src="lpics/landscape15.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape16b.jpg" alt="" title="" /><img class="full" src="lpics/landscape16.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape13b.jpg" alt="" title="" /><img class="full" src="lpics/landscape13.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape14b.jpg" alt="" title="" /><img class="full" src="lpics/landscape14.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape15b.jpg" alt="" title="" /><img class="full" src="lpics/landscape15.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape16b.jpg" alt="" title="" /><img class="full" src="lpics/landscape16.jpg" alt="" title="" /></a></li>
</ul>
</td></tr></table></ins>
</li>
<li><a class="set" href="#nogo">Image Set #4</a><b></b>
<ins><table><tr><td>
<ul>
<li><a href="#nogo"><img class="thumb" src="lpics/bird1b.jpg" alt="" title="" /><img class="full" src="lpics/bird1.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird2b.jpg" alt="" title="" /><img class="full" src="lpics/bird2.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird3b.jpg" alt="" title="" /><img class="full" src="lpics/bird3.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird4b.jpg" alt="" title="" /><img class="full" src="lpics/bird4.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird5b.jpg" alt="" title="" /><img class="full" src="lpics/bird5.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird6b.jpg" alt="" title="" /><img class="full" src="lpics/bird6.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird7b.jpg" alt="" title="" /><img class="full" src="lpics/bird7.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird8b.jpg" alt="" title="" /><img class="full" src="lpics/bird8.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait15b.jpg" alt="" title="" /><img class="full" src="lpics/portrait15.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape10b.jpg" alt="" title="" /><img class="full" src="lpics/landscape10.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape11b.jpg" alt="" title="" /><img class="full" src="lpics/landscape11.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/landscape12b.jpg" alt="" title="" /><img class="full" src="lpics/landscape12.jpg" alt="" title="" /></a></li>
</ul>
</td></tr></table></ins>
</li>
<li><a class="set" href="#nogo">Image Set #5</a><b></b>
<ins><table><tr><td>
<ul>
<li><a href="#nogo"><img class="thumb" src="lpics/bird9b.jpg" alt="" title="" /><img class="full" src="lpics/bird9.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird10b.jpg" alt="" title="" /><img class="full" src="lpics/bird10.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird11b.jpg" alt="" title="" /><img class="full" src="lpics/bird11.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird12b.jpg" alt="" title="" /><img class="full" src="lpics/bird12.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird13b.jpg" alt="" title="" /><img class="full" src="lpics/bird13.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird14b.jpg" alt="" title="" /><img class="full" src="lpics/bird14.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird15b.jpg" alt="" title="" /><img class="full" src="lpics/bird15.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/bird16b.jpg" alt="" title="" /><img class="full" src="lpics/bird16.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait16b.jpg" alt="" title="" /><img class="full" src="lpics/portrait16.jpg" alt="" title="" /></a></li>
</ul>
</td></tr></table></ins>
</li>
</ul>
<br class="clear" />
</div>
<p><br />
</p>
</div>
</div>
<div id="foot">

<p>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</p>
</div>
</body>
</html>

Post by **creep** » Sun Dec 23, 2007 6:25 am

I have no idea what level of expertise you have... so could you explain what you've tried for getting more than 12?

I'm afraid of just stating the obvious... that if you want more than 12 images to show up, you have to put more than 12 links to images in the html.

Post by **corpse** » Sun Dec 23, 2007 6:59 am

The obvious might be what I need.

Just below where the <body> starts, you will see where I have put the 1.gif, etc. images in the <LI>s

Well there are 12 of them. I tried simply adding 4 more <li> with different images, but the output only shows the first 12 images in full [thumbnail] and the 4 new ones are squished in the bottom, but you can't see them all.

help with ccs

help with ccs

Re: help with ccs

Re: help with ccs