SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    belgium
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horizontal scroll 'only' (no vscrolll) in CSS ??

    When you create an overflow : scroll ; you 'always' get the vertical scrollbar.
    I want to create a box with a horizontal scroll only (for a photogallery)
    Is that possible in css??
    And if so, is there a tutorial somewhere?

    Thank you very much
    Johan

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you use overflow:auto then you only get the scroll bar on the side that is overflowing. (you can use proprietary styles (not valid css) for setting one or the other scrollbar but the problem in your case will be that you don't actually want to hide content so overflow:auto would seem the best bet).

    In the case of an image gallery you would need to force the element wide using white-space:nowrap and then make sure that your height is greater than that of the images otherwise a vertical scroll bar will appear.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer{
     width:300px;
     height:380px;
     overflow:auto;
     background:#ffffcc;
     white-space:nowrap
    }
    </style>
    </head>
    <body>
    <div id="outer">
    <img src="images/gif2.gif" width="147" height="342" /> 
    <img src="images/gif3.gif" width="147" height="342" /> 
    <img src="images/gif4.gif" width="147" height="342" /> 
    <img src="images/gif5.gif" width="147" height="342" /> 
    <img src="images/gif6.gif" width="147" height="342" /> 
    <img src="images/gif7.gif" width="147" height="342" /> 
    </div>
    </body>
    </html>
    The above will work in most modern browsers but not in ie5. (ie5.5. and ie6 are ok - ie5 will scroll vertically only but is still usable).

    Hope that helps,

    Paul

  3. #3
    SitePoint Member
    Join Date
    Jan 2005
    Location
    belgium
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul you're a genius !!!

    It surely helps me.
    "white-space:nowrap" was the thing I wasn't aware of.

    Have a nice weekend,
    Johan


Bookmarks

Posting Permissions

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