Solved

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

Posted on 2009-07-08
7
575 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 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