HTML Help

tsc1896 · Joined: 10 Nov 2008 Posts: 6

I pretty inexperienced with code. I put together this one with bits and pieces of other peoples coding. The problem I am having is everything works except I get boxes with little red X's in them for the pictures.

Does this look okay to you?

Code: <style type="text/css">

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

.thumbnail img {
border: 1px solid white;
margin: 3.5px;
width: 66px;
}

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

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

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

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
width: 550px;
height: 500px;
padding: 2px;
}

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

</style>
<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/CH-1.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/CH-1.JPG" /> </a>

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/IMG_2569.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/IMG_2569.JPG" /> </a>

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/IMG_2570.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/IMG_2570.JPG" /> </a>

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/IMG_2572.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/IMG_2572.JPG" /> </a>

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/IMG_2573.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/IMG_2573.JPG" /> </a>

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/IMG_2574.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/IMG_2574.JPG" /> </a>

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/IMG_2576.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/IMG_2576.JPG" /> </a>

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/IMG_2577.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/IMG_2577.JPG" /> </a>

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/IMG_2578.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/IMG_2578.JPG" /> </a>

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/IMG_2579.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/IMG_2579.JPG" /> </a>

<a class="thumbnail" href="#thumb"><img src="PhotoGalleryPage/Clubhouse/IMG_2580.JPG" width="100px" height="66px" border="0" /><img src="PhotoGalleryPage/Clubhouse/IMG_2580.JPG" /> </a>

 

</div> [/code]

sticks464 · Joined: 31 Dec 2006 Posts: 2311

View source on this page http://www.stunicholls.com/gallery/photo_click.html and see if it helps.

tsc1896 · Joined: 10 Nov 2008 Posts: 6

Sorry couldnt make heads or tails out of that. Any other advice?
Also I am using yahoo sitebuilder if that is relative information.

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Go to this site http://www.cssplay.co.uk/menu/ and look at the galleries listed on the left and see which one resembles closest to what you want. Then give us the url of that page and someone will give you the html and css to make it work

tsc1896 · Joined: 10 Nov 2008 Posts: 6

http://www.cssplay.co.uk/menu/gallery.html

sticks464 · Joined: 31 Dec 2006 Posts: 2311

The html for that gallery. Replace src="folder/image1.jpg" in each link with the path to your image.

Code: <div id="container">



<a class="gallery slidea" href="#nogo"><img src="folder/image1.jpg" alt="Warm to Cold" title="Warm to Cold" /> Warm to Cold</a>

<a class="gallery slideb" href="#nogo"><img src="folder/image2.jpg" alt="Wheels" title="Wheels" /> Wheels</a>

<a class="gallery slidec" href="#nogo"><img src="folder/image3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /> Urban Squirrel</a>

<a class="gallery slided" href="#nogo"><img src="folder/image4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /> Mother and Daughter</a>

<a class="gallery slidee" href="#nogo"><img src="folder/image5.jpg" alt="River Junk" title="River Junk" /> River Junk</a>

<a class="gallery slidef" href="#nogo"><img src="folder/image6.jpg" alt="Portrait One" title="Portrait One" /> Portrait One</a>

<a class="gallery slideg" href="#nogo"><img src="folder/image7.jpg" alt="Portrait Two" title="Portrait Two" /> Portrait Two</a>

<a class="gallery slideh" href="#nogo"><img src="folder/image8.jpg" alt="Portrait Three" title="Portrait Three" /> Portrait Three</a>

<a class="gallery slidei" href="#nogo"><img src="folder/image9.jpg" alt="Bow and Fiddle rock" title="Bow and Fiddle rock" /> Bow and Fiddle rock</a>

<a class="gallery slidej" href="#nogo"><img src="folder/image10.jpg" alt="The Pose" title="The Pose" /> The Pose</a>
</div>

css
Code: <style type="text/css">

.a, .a:visited {color:#000;}
#container {position:relative; width:600px; height:700px; background:#888; border:1px solid #000; margin:10px auto;}
#container b {font-weight:normal; width:600px; text-align:center; position:absolute; bottom:250px; left:0; color:#eee; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1;}

a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:75px; float:left; margin:7px 21px; position:relative; cursor:default;}

/*----- Thumbnails -----*/
a.slidea {background:url(thumbs/img1.jpg);}
a.slideb {background:url(thumbs/img2.jpg);}
a.slidec {background:url(thumbs/img3.jpg);}
a.slided {background:url(thumbs/img4.jpg);}
a.slidee {background:url(thumbs/img5.jpg);}
a.slidef {background:url(thumbs/img6.jpg);}
a.slideg {background:url(thumbs/img7.jpg);}
a.slideh {background:url(thumbs/img8.jpg);}
a.slidei {background:url(thumbs/img9.jpg);}
a.slidej {background:url(thumbs/img10.jpg);}
/*----- End Thumbnails -----*/

/*----- Large Image -----*/
a.gallery span {visibility:hidden; display:block; position:absolute; width:580px; height:500px; top:189px; left:9px; color:#000; background:#ccc; text-align:center; border:1px solid #fff; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;}

a.slidea span {left:-13px; top:180px;}
a.slideb span {left:-132px; top:180px;}
a.slidec span {left:-251px; top:180px;}
a.slided span {left:-370px; top:180px;}
a.slidee span {left:-489px; top:180px;}
a.slidef span {left:-13px; top:89px;}
a.slideg span {left:-132px; top:89px;}
a.slideh span {left:-251px; top:89px;}
a.slidei span {left:-370px; top:89px;}
a.slidej span {left:-489px; top:89px;}

a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}

a.gallery:hover span {visibility:visible; z-index:100;}

a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}

a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}

a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}

a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}
</style>

tsc1896 · Joined: 10 Nov 2008 Posts: 6

Thanks for all the effort so far.

Unfortunatly that didnt work so well. The images were to big in the thumbnails and to big in the "large image"

Is there anyway to fix the original code I sent?