dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: scrollbar/iWeb

  1. #1
    Join Date
    Dec 2011
    Posts
    3

    scrollbar/iWeb

    Hello Folks!
    trough this code

    <!-- Codes by Quackit.com -->
    <div style="height:221px;width:330px;overflow-x:scroll;overflow-y:hidden;">
    <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" />
    </div>
    <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?
    Thanks. Paolo

  2. #2
    Join Date
    Nov 2010
    Posts
    86
    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:

    http://pagefabricator.com?page=image_scroller

    Also you need to get rid of the <br> between your images as that forces a newline.

    You probably don't need the height property in your scrolling container, because it will automatically size its height according to its contents, unless told to do otherwise.

  3. #3
    Join Date
    Dec 2011
    Posts
    3
    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!





    <a href="http://s251.photobucket.com/albums/gg292/jarulex/?action=view&amp;current=scrollbars.jpg" target="_blank"><img src="http://i251.photobucket.com/albums/gg292/jarulex/scrollbars.jpg" border="0" alt="Photobucket"></a>

  4. #4
    Join Date
    Nov 2010
    Posts
    86
    I don't think there's any standard way to style scrollbars. You could make one yourself by making an element that looks like a scrollbar, and using javascript to make it draggable, and use its position to set the scroll offset of the desired container, but I don't think you can just style the regular scrollbar in a cross browser way.

    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.

  5. #5
    Join Date
    Dec 2011
    Posts
    3
    You're a Wizard! Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles