Firstly id like to thank anyone who is reading this and hope you can help me figure this CSS code out.
im fairly new to CSS coding as i learned the old HTML coding only in school and haven't worked with web designing in years but my boss wants me to see what i can do to this website.
i have copied CSSPlay gallery click code and done a few modifications to it to suite our company and the way my boss wants it to work slightly with 1 little glitch.
The Gallery Coding is as follows
/* common styling for all galleries */
a.gallery, a.gallery:visited {display:block; display:inline-block; color#cc9900; text-decoration:none; border:1px solid #000; width:95px; height:65px; float:left; margin:4px; z-index:50;}
a.slidea {background:url(Display_home/Lowrez/1.jpg);}
a.slideb {background:url(Display_home/Lowrez/2.jpg);}
a.slidec {background:url(Display_home/Lowrez/3.jpg);}
a.slided {background:url(Display_home/Lowrez/4.jpg);}
a.slidee {background:url(Display_home/Lowrez/5.jpg);}
a.slidef {background:url(Display_home/Lowrez/6.jpg);}
a.slideg {background:url(Display_home/Lowrez/7.jpg);}
a.slideh {background:url(Display_home/Lowrez/8.jpg);}
a.slidei {background:url(Display_home/Lowrez/9.jpg);}
a.slidej {background:url(Display_home/Lowrez/10.jpg);}
a.slidek {background:url(Display_home/Lowrez/11.jpg);}
a.slidel {background:url(Display_home/Lowrez/12.jpg);}
a.slidem {background:url(Display_home/Lowrez/13.jpg);}
a.sliden {background:url(Display_home/Lowrez/14.jpg);}
a.slideo {background:url(Display_home/Lowrez/15.jpg);}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #CC9900;}
/* styling for RIGHT gallery */
#container_right {position:relative; width:885px; height:375px; background:#CC9900; border:1px solid #CC9900; margin:1em auto;}
#container_right img {border:0;}
#container_right .thumbs {width:350px; position:absolute; right:-50px; top:0;}
#container_right a.gallery:hover span {display:block; position:absolute; width:600px; height:50px; top:265px; left:-630px; padding:5px; font-style:italic; color:#CC9900; z-index:100;}
#container_right a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
#container_right a.gallery:active, #container_right a.gallery:focus {border:1px solid #000;}
#container_right a.gallery:active em, #container_right a.gallery:focus em {display:block; position:absolute; width:600px; height:375px; top:0px; left:-625px; padding:0px; color:#CC9900; border:1px solid #CC9900; z-index:50;}
#container_right h1 {clear:both; margin:0; padding-top:80px; padding-left:50px; width:300px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#CC9900;}
#container_right h1 em {font-size:0.6em; color:#000;}; z-index:50;}
and the coding for the thumb clicking images is
<div id="container_right">
<div class="thumbs">
<a class="gallery slidea" href="#1"><em><img src="Display_home/1.jpg" alt="Pic1" width="600" height="375" /></em></a>
<a class="gallery slideb" href="#2"><em><img src="Display_home/2.jpg" alt="Pic2" width="600" height="375" /></em></a>
<a class="gallery slidec" href="#3"><em><img src="Display_home/3.jpg" alt="Pic3" width="600" height="375" /></em></a>
<a class="gallery slided" href="#4"><em><img src="Display_home/4.jpg" alt="Pic4" width="600" height="375" /></em></a>
<a class="gallery slidee" href="#5"><em><img src="Display_home/5.jpg" alt="Pic5" width="600" height="375" /></em></a>
<a class="gallery slidef" href="#6"><em><img src="Display_home/6.jpg" alt="Pic6" width="600" height="375" /></em></a>
<a class="gallery slideg" href="#7"><em><img src="Display_home/7.jpg" alt="Pic7" width="600" height="375" /></em></a>
<a class="gallery slideh" href="#8"><em><img src="Display_home/8.jpg" alt="Pic8" width="600" height="375" /></em></a>
<a class="gallery slidei" href="#9"><em><img src="Display_home/9.jpg" alt="Pic9" width="600" height="375" /></em></a>
<a class="gallery slidej" href="#10"><em><img src="Display_home/10.jpg" alt="Pic10" width="600" height="375" /></em></a>
<a class="gallery slidek" href="#11"><em><img src="Display_home/11.jpg" alt="Pic10" width="600" height="375" /></em></a>
<a class="gallery slidel" href="#12"><em><img src="Display_home/12.jpg" alt="Pic10" width="600" height="375" /></em></a>
<a class="gallery slidem" href="#13"><em><img src="Display_home/13.jpg" alt="Pic10" width="600" height="375" /></em></a>
<a class="gallery sliden" href="#14"><em><img src="Display_home/14.jpg" alt="Pic10" width="600" height="375" /></em></a>
<a class="gallery slideo" href="#15"><em><img src="Display_home/15.jpg" alt="Pic10" width="600" height="375" /></em></a>
</div><h1>
<img src"display_home/1jpg" src="Display_home/1.JPG" width="600" height="375"></h1>
</div>
</div>
</div>
The problem is for some reason or rather the image which is meant to stay in the background while the user hasn't clicked on a thumbnail isn't lining up with the ones when you click so you can see overlap of images and looks a bit funny.
Was wondering if anyone can take a quick look at the code and see if they can work out a way to make a Image appear when the page loads up or even once you have choose a thumbnail and then click off the image screens it doesn't disappear.
I have tried changing the CSS code various times/ways and i cant seem to get it to work at all. If anyone can work out either way it would be greatly appreciated
(hope i posted the codes ok :S )
