SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot tconley79's Avatar
    Join Date
    Feb 2004
    Location
    Miami
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Image Gallery

    Hmm it seems most want their overflow divs with vertical scrollers and no horizontal ones;I need it the other way around. I have a series of thumbnails in a gallery and want the images to scroll in a single strip using CSS.

    Is this possible?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If the height of the div is big enough to hold the height of the image then if you set overflow:auto then only the horizontal scrollbar should appear when required.

    Is that what you meant?

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok -not as straight forward as I thought

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer{
    width:300px;
    overflow:auto;
    height:100px;
    border:1px solid #000;
    white-space:nowrap;
    }
    img {margin:5px}
     
    </style>
    </head>
    <body>
    <div id="outer">
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    <img src="k.gif" width="60" height="60" /> 
    </div>
    </body>
    </html>
    You need the whitespace: no-wrap otherwise the image drops to the next line and ruins the effect.

    Paul

  4. #4
    SitePoint Zealot tconley79's Avatar
    Join Date
    Feb 2004
    Location
    Miami
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, thanks.
    That seemed to the the trick...

    But to take it a step further...what if instead of just "img" tags in the div, I had serveral divs that contained "img" and "p" tags? Bascially, images with captions?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I was afraid you were going to ask that lol

    What I thought was a simple answer isn't as straight forward as it seems.The only solution I can think of for block level elements is something like this that uses a width (bigger than you'll ever need) to force horizontal scrolling. The inner element has a 3000px width but the outer element with the overflow is set to a short length, This keeps the scrolling horizontally (although the vertical scrollbar appears in ie but not in mozilla. ( you could hide ie's vertical scrollbar with ie's proprietary (invalid) overflow-y property.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer{
     width:330px;
     overflow:auto;
     height:110px;
     border:1px solid #000;
    }
    #inner{
     width:5000px;
     height:105px; 
    }
    img {margin:5px}
    #inner div {
     text-align:center;
     float:left;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="inner"> 
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
    	<div> <img src="k.gif" width="60" height="60" /><br />
    	  Caption </div>
      </div>
    </div>
    </body>
    </html>
    But its late and I may be missing the obvious solution

    Paul

  6. #6
    SitePoint Zealot tconley79's Avatar
    Join Date
    Feb 2004
    Location
    Miami
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,
    I was afraid you were going to ask that lol
    HA! Great minds think alike! LOL

    As you said, it's definitely more difficult than it appears, but at least now I have a basis to work with.

    As usual, you've been great.

    Thanks and go to sleep


Bookmarks

Posting Permissions

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