Results 1 to 2 of 2

Thread: CSS Image Gallery problems

  1. #1
    Join Date
    Mar 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Image Gallery problems

    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">

    <br><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><br>
    </div>


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


    <div class="gallerycontainer">

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

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

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

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

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

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

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

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

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

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

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

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


    <div class="gallerycontainer1">

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

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

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

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

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

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

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

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

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

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

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

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

    </div>


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

    </body>
    </html>
    Last edited by mrempel; 03-29-2007 at 08:01 PM. Reason: Missing info

  2. #2
    Join Date
    Mar 2007
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •