...

View Full Version : Images Wrapping and Scrolling



JFro
02-17-2009, 02:07 AM
I have two problems. Firstly, I have some sort of a navigation bar, which contains images. As I add more of these images (they will be links to photo galleries) I want to be able to scroll through them horizontally. However, both IE anf Firefox seem to give preference to vertical scrolling - so making it narrower makes the last image drop down to the line below, and a vertical scroll bar is displayed (when overflow:auto). I want to images to stay on the same line, and a horizontal scroll bar to be displayed. I have tried white-space:nowrap but cannot seem to get this to work for images. So how do I stop the image going on to the line below? The CSS/HTML is below...


.seasonsframe{overflow:scroll; width:800px; height:150px; margin-top:20px}
ul.seasons{list-style-type:none; text-align:center; float:left;}
li.season{float:left; padding-left:5%; padding-right:5%;}


<ul class="seasonsframe seasons padding4">
<li class="season">
<a href="#scrollto" onclick="java script:hideElement('summer', 'autumn', 'winter'); showElement('spring'); return false;">
<img src="pics/100_1137.jpg" width="80" height="80" /><br/> Spring 2008 </a>
</li>

**..............more of the same images................**

</ul>

____________________________________________________

Secondly, when I click on an image that's in one div, it displays another 3 images in another div below (horizontally). I want the page to scroll down to the bottom the the three images when the initial image is clicked. The HTML is as above, and I have inserted this code
<a name="scrollto" id="scrollto">Go Here!</a> at the bottom on the div containing the 3 images that are displayed. But it doesn't work in IE/Firefox (FF actually has no scroll bars at the moment to manually scroll either!).

If you need any more clarification let me know! :) thanks :)

Excavator
02-17-2009, 02:16 AM
To get it to scroll like you want try specifying the scrollbar on the x-axis like this:

.seasonsframe{overflow-x:scroll; width:800px; height:150px; margin-top:20px}
ul.seasons{list-style-type:none; text-align:center; float:left;}
li.season{float:left; padding-left:5%; padding-right:5%;}

JFro
02-19-2009, 02:14 AM
Thanks for the reply :)

Without something specified for the y-axis, it seems to revert to default, and still scrolls, so I have tried this:

.seasonsframe{overflow-x:scroll; overflow-y:hidden; width:800px; height:150px; margin-top:20px}

But then the extra image still drops down a line, as it is set to hidden, is clipped by the div. The horizontal x scroll bar is also always shown. It is an improvement though!!

(still nothing with the other problems, the FF scroll issue is quite annoying too actually!)

Excavator
02-19-2009, 02:53 AM
I looked at this a little closer and came up with a little demo. See it here - http://nopeople.com/CSS/scrollers/

View the source to see how it's done.
The horizontal one takes an extra div to hold the images.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum