Tue, 2015-05-12 00:37
I have pasted some code and added the appropriate files to my site-in-progress...trying to add a photo gallery with thumbnails on top and the main photo displaying underneath. I cannot get the thumbnails to display in a horizontal line; they insist in stacking vertically. Can anyone help??
http://studio-108.com/staging/Clio/gallery/index.html#
Thanks so much!
Jenn
Tue, 2015-05-12 04:07
#1
Remove the width property
Remove the width property from the ul. Set the display property on li to inline-block.
Remove the inlined style attributes to an external stylesheet. Inlined styles are a bad practice. You do not want to hear my opinion of grid systems.
cheers,
gary
Wed, 2015-05-13 02:25
#2
Thanks for your reply! I'm
Thanks for your reply! I'm not using any inline styles, though...they appear to be thrown in there from a .js file, maybe? Please see the code below...I'm still having a problem with this.
I had a quick job to do so purchased a template that uses grids...I thought that would make my life easier but it seems to have done nothing but give me a headache!!
Thanks so much for your help!!
<div class="content"> <div id="rg-gallery" class="rg-gallery"> <div class="rg-thumbs"> <!-- Elastislide Carousel Thumbnail Viewer --> <div class="es-carousel-wrapper"> <div class="es-nav"> <span class="es-nav-prev">Previous</span> <span class="es-nav-next">Next</span> </div> <div class="es-carousel"> <ul> <li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/3.jpg" data-large="images/3.jpg" alt="image03" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/4.jpg" data-large="images/4.jpg" alt="image04" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/5.jpg" data-large="images/5.jpg" alt="image05" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/6.jpg" data-large="images/6.jpg" alt="image06" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/7.jpg" data-large="images/7.jpg" alt="image07" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/8.jpg" data-large="images/8.jpg" alt="image08" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/9.jpg" data-large="images/9.jpg" alt="image09" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/10.jpg" data-large="images/10.jpg" alt="image10" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/11.jpg" data-large="images/11.jpg" alt="image11" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/12.jpg" data-large="images/12.jpg" alt="image12" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/13.jpg" data-large="images/13.jpg" alt="image13" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/14.jpg" data-large="images/14.jpg" alt="image14" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/15.jpg" data-large="images/15.jpg" alt="image15" data-description="" /></a></li> <li><a href="#"><img src="images/thumbs/16.jpg" data-large="images/16.jpg" alt="image16" data-description="" /></a></li> </ul> </div> </div> <!-- End Elastislide Carousel Thumbnail Viewer --> </div><!-- rg-thumbs --> </div><!-- rg-gallery --> </div> </div> </div> </div>
Fri, 2015-05-15 04:46
#3
I didn't consider having
I didn't consider having javascript generate inlined style attributes. I guess you're stuck with them unless you bite the bullet and fix the page. As far as I'm concerned, those who market generic templates are simply scam artists. Templates based on a grid system are the worst of them.
You should be able to set the display property for LI in the file called style.css, and at least get your list running horizontally. You can center the list and its overflow by setting UL {text-align: center;}.
cheers,
gary