Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    26
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Images Wrapping and Scrolling

    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...

    Code:
    .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%;}
    Code:
    <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
    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    To get it to scroll like you want try specifying the scrollbar on the x-axis like this:
    Code:
    .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%;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    26
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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:
    Code:
    .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!)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •