3 replies [Last post]
jmsee99
jmsee99's picture
Offline
newbie
MA
Last seen: 3 years 28 weeks ago
MA
Timezone: GMT-4
Joined: 2007-05-15
Posts: 5
Points: 8

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 5 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jmsee99
jmsee99's picture
Offline
newbie
MA
Last seen: 3 years 28 weeks ago
MA
Timezone: GMT-4
Joined: 2007-05-15
Posts: 5
Points: 8

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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 5 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.