<!-- Codes by Quackit.com -->
<img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br />
<img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" />
<p style="font-size:10px;"><a href="http://www.quackit.com/html/tutorial/">HTML lessons</a></p>
I'm able to buit up one horizontal scrollbar, but pictures are added 'in vertical' while I wish to add them in horizontal, side by side.
Which is the solution to add pictures (linked from Photobucket) in HORIZONTAL?
Hi, the browser wraps the content (images in this case) to fit the width of the container. It's just like the text in this paragraph is shown on multiple lines instead of running off the edge of its container.
If you want to prevent this, you can add white-space:nowrap to your container's style.
I made a basic example of images with horizontal scrolling using white-space:nowrap. You can test it out here:
It works, thanks a lot!
I take this opportunity to ask you two other suggestions :-)
The first one: how to make the scrollbars prettier, thinner, such as Google Maps that I show in the attached photo?
The second one: if I click on the photos (from Photobucket) I open Photobucket himself. I would like to avoid it, is it possible?
Thans a lot again, in advance!
As for clicking on the images, the reason it takes you to another page is because it's inside a link tag (which looks like this <a href='...'>...</a> ), and anything in this tag will act as a link. So to stop it going to a page when you click on it, get rid of the <a> tag and just leave the <img> tag.