CSS Image Gallery problems

**mrempel** · 03-29-2007, 07:49 PM

Hey, I have been putting together a website for the youth group I work with. I want a spot to put pictures of different events and such and have found the CSS Image Gallery on here and want to use it as it has a nice layout and everything. The only problem is that when I load it to the server the pictures do not show. It comes up as skinny little columns going down the page. When you move your mouse of them, the large image shows up where I want it but once again, its a tiny little column type thing. I checked and rechecked the file path to the images and they are right so I can only conclude it is in the CSS I have or something.

The website where you can see this is www.nanaimoalliance.com under "Youth Web Site" on the bottom of the left menu. Then click on "Pictures" in the menu, then "Clipper's Game."

I would rather have it where you can just go to that part of the site but the main guy doing this wants it this way.

The place on the site where I got this is http://www.dynamicdrive.com/style/cs...-gallery/P130/

And here is the CSS and HTML I am using for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>Hockey Pics</title>

<style type="text/css">
@import "all.css"; /* just some basic formatting, no layout stuff */

body {
margin:20px 20px 0px 20px;
background: #000
}

#main {
border:1px solid #000;
background-image: url('Common/bg.gif');
background-repeat: no-repeat;
background-position: 8px -3px;
background-color: black
}

/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */

#main #menu {
border-left:1px solid #000;
border-bottom:1px solid #000;
float:right;
width:200px;
background-image: url('Common/Smoke.jpg');
background-repeat: no-repeat;
margin:0px 0px 10px 10px;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

h1 {
font-size:14px;
padding-top:10px;
}

#menu p { font-size:10px}

h1 { color:blue; font-size:40px; font-family:"comic sans ms";}
h2 { color:#00087F; font-size:20px; font-family:"comic sans ms";}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0px 5px 5px 0px;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: none;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: none;
padding: none;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 335px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

.gallerycontainer1{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail1 img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail1:hover{
background-color: transparent;
}

.thumbnail1:hover img{
border: 1px solid blue;
}

.thumbnail1 span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: none;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail1 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: none;
}

.thumbnail1:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 335px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
</head><body>

<div id="main">
<div id="menu">

 <img name="menu0" src="menu.jpg" width="150" height="266" hspace="25" border="0" usemap="#menu" alt="" />

<map name="menu">
<area shape="rect" coords="0,0,150,47" href="index.htm" alt="">
<area shape="rect" coords="0,47,150,83" href="news.html" alt="">
<area shape="rect" coords="0,83,150,119" href="calendar.html" alt="">
<area shape="rect" coords="0,119,150,154" href="pictures.html" alt="">
<area shape="rect" coords="0,155,150,188" href="forms.html" alt="">
<area shape="rect" coords="0,188,150,224" href="http://www.nanaimoalliance.com" alt="">
<area shape="rect" coords="0,224,150,266" href="contact.html" alt="">
</map> 
</div>

<center><img src="Common/youth3.gif" ALT="NAC youth" width="700" height="100" vspace="8"></center>
 

<div class="gallerycontainer">

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/1.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/1.jpg" alt="" /> </a>

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/2.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/2.jpg" alt="" /> </a>

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/3.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/3.jpg" alt="" /> </a> 

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/4.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/4.jpg" alt="" /> </a>

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/5.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/5.jpg" alt="" /> </a>

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/6.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/6.jpg" alt="" /> </a> 

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/7.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/7.jpg" alt="" /> </a>

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/8.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/8.jpg" alt="" /> </a>

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/10.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/10.jpg" alt="" /> </a> 

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/11.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/11.jpg" alt="" /> </a>

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/12.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/12.jpg" alt="" /> </a>

<a class="thumbnail" href="#thumbs"><img src="Pictures/hockey/13.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/13.jpg" alt="" /> </a> </div>

<div class="gallerycontainer1">

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/14.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/14.jpg" alt="" /> </a>

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/15.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/15.jpg" alt="" /> </a>

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/16.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/16.jpg" alt="" /> </a> 

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/17.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/17.jpg" alt="" /> </a>

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/18.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/18.jpg" alt="" /> </a>

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/19.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/19.jpg" alt="" /> </a> 

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/20.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/20.jpg" alt="" /> </a>

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/21.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/21.jpg" alt="" /> </a>

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/22.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/22.jpg" alt="" /> </a> 

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/23.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/23.jpg" alt="" /> </a>

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/24.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/24.jpg" alt="" /> </a>

<a class="thumbnail1" href="#thumbs"><img src="Pictures/hockey/25.jpg"
width="100" height="89" alt="" /><img src="Pictures/hockey/25.jpg" alt="" /> </a>

</div>

 <img src="Common/aylogo1.jpg"> 
</div>

</body>
</html>

**bernie** · 03-30-2007, 04:31 PM

Your problem appears to be with the URL reference to the images.

If you copy-and-paste an image link into a blank page, the image should appear unless security has been invoked.

i.e.

http://www3.telus.net/public/sigpain.../hockey/16.jpg

does not return the image on a blank page.

It could be the way your PC is mapped to the server or you have not published the pictures to the Internet server.

To explain what I am talking about you can try this link

HTML Code:

http://www.lbk.co.za/Comp/images/DDR.jpg

It returns the image void of the page it is published in

Bernie

Thread: CSS Image Gallery problems

Thread Tools

Search Thread

CSS Image Gallery problems

Bookmarks

Bookmarks

Posting Permissions