12 replies [Last post]
foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 38 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

I'm trying to create a left to right scroll on a DIV. Basically I have about 20 thumbnails I want to put in my DIV and instead of a vertical scroll - I want to create a horizontal scroll on the div so you can scroll left or right to look through the thumbnails in my div.

I tried this code, the horizontal scroll appears however the thumbnails aren't being pushed to the right - therefore the horizontal scrolled isn't functional. How can I push my content to the right instead of breaking where the Div's 500px width ends???

#gallery{
width: 500px;
background-color: #CCCCCC;
overflow-x: scroll;
overflow-y: hidden;

}

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 4 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

I would try

I would try {overflow:auto;}. If the content in your 500px div is wider than 500px, then you should get a horizontal scrollbar.

This is my big chance . . . yep, I blew it . . .

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 38 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Vertical scroll, but I wanted a horitzontal scroll.

When I turn on {overflow: auto} I get a vertical scroll. I wanted a horizontal scroll though.

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 4 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

Do you have a link we can

Do you have a link we can look at?

This is my big chance . . . yep, I blew it . . .

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 38 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

The original code I posted

The original code I posted produced this DIV (see attached JPG).

There's about 20 more thumbnails in that DIV - however they aren't forcing the DIV to scroll left & right - they are breaking down to the next line. Thus when I turned on {overflow: auto} I got a vertical scrollbar.

How can I force them to stay on the same line and produce a horizontal scrollbar???

AttachmentSize
horizontal-bar.jpg 21.8 KB
n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 4 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

How about that original code?

How about that original code?

AttachmentSize
horizontal-bar.jpg 14.59 KB

This is my big chance . . . yep, I blew it . . .

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 38 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Here's the link

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 38 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

PS - If you look at the code

PS - If you look at the code I just posted - the images are breaking down to the new line - I want the images to continue horizontally so that the horizontal scrollbar will turn on and you can scroll right to see the thumbnails.

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 4 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

In #gallery you have a list

In #gallery you have a list of images, so your images belong in a list. Next you give your unordered list a width that equals the width of all your images inline. Then you display your list items inline. Finally you use {overflow:auto;} for #gallery.

This is my big chance . . . yep, I blew it . . .

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 38 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

I'm not sure how to give my

I'm not sure how to give my unordered list a width. Do I need to put my graphics in a <ul> tag and then apply a width to that tag via css?

I tried this with no luck:

#gallery{
	width: 500px;
	height: 140px;
	border: 2px solid #aebdc8;
	padding: 5px 0px 5px 5px;
	margin-bottom: 20px;
	background-color: #CCCCCC;
	overflow: auto;
}

#gallery ul {
	display: inline;
	width: 1000px;
}

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 4 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

The list items should be

The list items should be inline.

#gallery ul { width: 1000px; }

#gallery ul li {
display:inline;
}

  • alt text
  • alt text
  • alt text

This is my big chance . . . yep, I blew it . . .

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 38 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

This worked. Thank you for

This worked. Thank you for your help n8gz4ez!

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 4 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

No problem, good job!

No problem, good job! :thumbsup:

This is my big chance . . . yep, I blew it . . .