HTML for scrolling horizontally

P

PearlJam

Expert Member
Joined
Jan 22, 2006
Messages
2,181
Reaction score
15
Location
Johannesburg
I am very new to this and are helping / struggling with a friend to get a set "box" (div tag) to remain on a fixed WxH and scroll horizontally inside a page. What function / code do we use to achieve this? This is for thumbnails, to ensure the main area of the page is always visible to see the enlarged picture. :confused:
 
I tried the CSS one in a div tag, but for some reason the box doesn't remain at my settings (WxH), it just expands. i'll look into the iFrame (don't know much about it)
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="testscroll.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="divScroll"><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /></div>
</body>
</html>


CSS:

#divScroll {
height: 70px;
width: 500px;
overflow: auto;
}
#divScroll img {
padding-top: 20px;
padding-left: 20px;
}

This is the code with a lot of img placeholders, i got it to scroll but only vertically not horizontally

Thanks
 
PearlJam:

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#divScroll {
height: 90px;
width: 500px;
overflow: auto;
}
#divScroll img {
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>

<body>
<div id="divScroll"><table><tr><td nowrap="nowrap">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /><img name="" src="" width="32" height="32" alt="" /></td></tr></table></div>
</body>
</html>

I've adjusted the size of your div - with the 20px padding it was always going to scroll in both directions. Note the table with the nowrap cells. this and the adjustment of the size of the div solved the problem.
 
BobbyMac said:
I've adjusted the size of your div - with the 20px padding it was always going to scroll in both directions. Note the table with the nowrap cells. this and the adjustment of the size of the div solved the problem.
Click to expand...

Thanks BobbyMac! :D
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X