Solved

How can i scroll images horizontally in a <div> layer?

Posted on 2009-07-08
7
577 Views
Last Modified: 2013-12-25
Hello, what i need to do is have a horizontally scrolling layer in my html that includes several images side by side with no vertical scrollbar.  the width of the horizontal scroll should probably be about 500 pixels and height about 120 pixels. basically, the same thing that youtube does vertically, i want to do horizontally.  the code below is an example of what i'm using but the images don't get placed side by side!  they are being placed one beneath the other, which is not what i want.

anyone have code that can achieve what i'm needing here?
thanks again!
<div style="border: 3px double #D2C8CA; overflow-x:scroll; overflow-y:hidden; width:150px; height:120px">
 

<a style="dislplay:inline" href="watch?v=19" title="test"><img src='http://www.mysite.com/test.jpg' border="0" style="dislplay:inline; border: 3px double #D2C8CA; padding-left: 0; padding-right: 0; padding-top: -10px; padding-bottom: -10px"></a>
 
 

<a style="dislplay:inline" href="watch?v=19" title="test"><img src='http://www.mysite.com/test.jpg' border="0" style="dislplay:inline; border: 3px double #D2C8CA; padding-left: 0; padding-right: 0; padding-top: -10px; padding-bottom: -10px"></a>
 

</div>

Open in new window

0
Comment
Question by:linuxrox
7 Comments
 
LVL 4

Accepted Solution

by:
eejones earned 500 total points
ID: 24804020
I noticed a typo in the word 'dislplay' in your code.

Using a table to hold the images works, if you are not opposed to using tables.

One thing to note: if you want the div to be tall enough to hold the images, you have to calculate in the height of the horizontal scrollbar which is about 25 pixels high (you can detect this exactly with JavaScript), and the width of any borders around the image (borders are added to the outside of the image).


<div style="border:solid 1px red; overflow-x:auto; overflow-y:hidden; width:500px; height:125px">

  <table border=1>

    <td><img src="1.gif" height=100 width=100 border=1 /></td>

      <td><img src="1.gif" height=100 width=100 border=1 /></td>

      <td><img src="1.gif" height=100 width=100 border=1 /></td>

      <td><img src="1.gif" height=100 width=100 border=1 /></td>

      <td><img src="1.gif" height=100 width=100 border=1 /></td>

      <td><img src="1.gif" height=100 width=100 border=1 /></td>

  </table>

</div>

Open in new window

0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24804031
I think you will have to do this with iframes, i tried to fix it but with only divs it's not working flawless. Why don't try a javascript carousel for this like this one, with this you can also animate it and more stuff: http://www.gmarwaha.com/jquery/jcarousellite/#demo 
0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 24804054
One solution would be to place the images in divs and set the "float: left" css style.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 4

Expert Comment

by:eejones
ID: 24804306
ChristoferDutz:

Before I posted earlier, II tried the float:left and it did not work. Can you see what is wrong with this attempt?

<div style="border:solid 1px blue; overflow-x:auto; overflow-y:hidden; height:125px; width:500px;">
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
</div>
0
 

Author Closing Comment

by:linuxrox
ID: 31601114
this i believe is the easiest and best option.
thanks again guys for the help and ideas.
0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 24804343
Well I would assume, that you shoul propably surround everything with a big div, widening the layout ragne for the floats ...

I just made the div quite a little larger to be sure everything fits in.
<div style="border:solid 1px blue; overflow-x:auto; overflow-y:hidden; height:125px; width:500px;"> 

<div style="height:110;width:500">

<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>

<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>

<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>

<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>

<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>

</div>

</div>

Open in new window

0
 
LVL 4

Expert Comment

by:eejones
ID: 24804401
ChristoferDutz:

That code did not work for me. I am using Chrome. Perhaps that is the problem. Chrome behaves more like Safari, quite often.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Where to define breakpoints for responsive CSS 2 30
Getting Column Height to Match Other Column 5 44
Error on Add method 1 37
Put shading on half of picture 8 21
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now