Skip navigation
chartoonz
chartoonz
Currently Being Moderated

Horizontal Scroll with CSS ? ? ?

May 23, 2012 10:13 AM

Hi All: 

 

I did a search on the forum and cannot find what I am looking for so I am posting this question:  I built a phot gallerey based upon the Stu Nichols tutorial I found posted online.  It works fine and can be seen here:

 

http://www.chartoonz.com/test/imgGalleryTEST02Scroll.html

 

 

My problem is too many photo buttons.  I have 32 buttons for the photos but I don't want them all to show.  I just want to line them all up, horizontally and allow a user to scroll through the top line.  I would really like the scroll to stay put when they click a button and let them continue to scroll.  Is that possible?

 

I tried using "overflow-x:scroll;" in the ".gallery" style but I cannot restrict the height as of now; so it didn't work.  Not sure what's going wrong and I sure could use some help...

 

Thanks


ACC

653 Views   3 Replies   Latest reply: chartoonz, May 25, 2012 7:33 AM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    May 23, 2012 10:27 AM   in reply to chartoonz
    Report

    Presently, #album and .gallery widths are 450px.

    Change widths to 100% (full viewport width) or whatever value suits your goals.

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • chartoonz
    Currently Being Moderated
    2. chartoonz,
    May 24, 2012 7:26 PM   in reply to Nancy O.
    Report

    Hi Nancy,

     

    Thanks so much for your quick reply.  I want the #album to be 450 pix wide.  I just want the buttons (which are just list items) to be in one long horizontal line, that a user could scroll through.  I tried setting .galery to 100% but it doesn't seem to work...  I am pretty stumped at this point.


    ACC

     
    |
    Mark as:
  • chartoonz
    Currently Being Moderated
    3. chartoonz,
    May 25, 2012 7:33 AM   in reply to chartoonz
    Report

    Qusi success!

    I had to set .gallery's width up to 250% but I finally got the scroll I wanted hooray and thank you!  It can be seen at http://www.chartoonz.com/test/imgGalleryTEST05ScrollKeepingimagesInpla ce.html

     

    So thanks a LOT.

     

    However the results are not what I intended, the scroll shifts all the LI items when one scrolls which means that the images, scroll along with them and I was hoping to keep them stuck in one position.  I HAD thought that the

    .gallery li a img {

    position:absolute;

    top:-390px;

    left:80px;

     

    would do that but having researched absolute positioning I see the folly of my ways.  Is there a way with the css to decouple the image's  (.gallery li a img) from the positioning of the actual .gallery li a positioning?  Or am I barking up the worng tree.  It's frustrating to be 66.66% done.  If there was a way to get the scroll, to scroll, but the images to stay put DESPITE the fact that they are all part of the same unorderd list it wouyld be awesome.  I have looked through the forums but I cannot get any information that seems to be helpful.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points