Horizontal Image Gallery

**tconley79** · Sep 24, 2004 15:56

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?

**Paul O'B** · Sep 24, 2004 16:34

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

**Paul O'B** · Sep 24, 2004 16:41

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

**tconley79** · Sep 24, 2004 16:56

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?

**Paul O'B** · Sep 24, 2004 17:36

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

**tconley79** · Sep 24, 2004 17:44

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

User Tag List

Thread: Horizontal Image Gallery

Thread Tools

Display

Horizontal Image Gallery

Bookmarks

Bookmarks

Posting Permissions