snake
23 Dec 2007, 02:58 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.
This is the part just below the <body> where I have images 1.gif 1a.gif etc.
If I put more than 12 images or <li> in they become squished at the bottom.
<!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<!--[if gte IE 7]><!--></a><!--<![endif]--><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><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="set" href="#nogo">Image Set #2<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b>
<ins><table><tr><td>
<ul>
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><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="set" href="#nogo">Image Set #4<!--[if gte IE 7]><!--></a><!--<![endif]--><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><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="set" href="#nogo">Image Set #5<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b>
<ins><table><tr><td>
<ul>
</ul>
<br class="clear" />
</div>
<p><br />
</p>
</div>
</div>
<div id="foot">
<p>
<!-- end of wrapper -->
<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>
I cannot get more than 12 images to show in each catagory. Image set#1, #2, etc.
This is the part just below the <body> where I have images 1.gif 1a.gif etc.
If I put more than 12 images or <li> in they become squished at the bottom.
<!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<!--[if gte IE 7]><!--></a><!--<![endif]--><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><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="set" href="#nogo">Image Set #2<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b>
<ins><table><tr><td>
<ul>
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><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="set" href="#nogo">Image Set #4<!--[if gte IE 7]><!--></a><!--<![endif]--><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><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="set" href="#nogo">Image Set #5<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b>
<ins><table><tr><td>
<ul>
</ul>
<br class="clear" />
</div>
<p><br />
</p>
</div>
</div>
<div id="foot">
<p>
<!-- end of wrapper -->
<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>