SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal scrolling gallery

    Hi everyone,

    I'm trying to achieve the following:
    A portion of the site that has a maximum width, although it can be smaller if the browser shrink.
    In this portion there is a row of images, that could each be any height or width, they should display next to each other, horizontally.
    If they don't fit within the viewable size a horizontal scroll bar should appear to allow them to be seen.

    The following code does exactly what I want when in firefox (using a bit of a table bodge, if anyone knows how to do it without tables let me know), but not in IE. In IE if the images don't fit then it expands the size of the portion beyond the maximum width, in this case leaving a horizontal scroll bar at the bottom of the page.

    Can anyone think of a good method (or a bodge) to get this working in both browsers?

    Code:
    <html>
    <head>
    <style>
    #scroller
    {
    	width:100%;
    	overflow:auto;
    }
    </style>
    </head>
    <body>
    	<table border="1">
    		<tr>
    			<td width="450">
    				This table should resize to fit the content inside it to a maximum of 450px.
    				The images should scroll horizontally if they don't fit within the 450px.
    				<div id="scroller">
    					<table border="0"><tr><td nowrap>
    						<img src="" width="150" height="70">
    						<img src="" width="150" height="70">
    					</td></tr></table>
    				</div>
    			</td>
    		</tr>
    	</table>
    
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Jan 2005
    Location
    belgium
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    is this what you are looking for

    http://www.divinglisa.be/scroll2.html
    the css code is included in the html

    greetings
    johan

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, I've had a look and it's not quite what I wanted, and I can't modify it to get it working either.

    The example is great until the browser is shrunk down in size to be less than 545px, then a horizontal scroll bar appears on the browser. I want the top div to shrink with the browser. I can get this working if I set the width of galleryS to be 100%, but then it expands to the viewport size, rather than a maximum width.

  4. #4
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone else?

    All I'm really trying to do is get a horizontally scrolling div that fills the width of a table cell. How hard can it be?


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
  •