Welcome to WebmasterWorld Guest from 54.81.220.239

Forum Moderators: not2easy

Message Too Old, No Replies

Scroll list items horizontally in container

     
4:53 pm on Dec 11, 2014 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


Not sure how to go about this. I have a containing div that is a set width and height. Within that div I have a list of blocks that I need to scroll horizontally within the containing div. There could be 1 block or there could be 20. There's no telling. At the moment the only way I can do this is by giving the UL a width but the problem with that there's obviously a lot of white space to scroll when you only have a few blocks. I would like to give that "auto" so the scroll bar either appears or doesn't and only scrolls the actual amount of blocks. The code might make more sense!


<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.container {
width: 200px;
overflow-y: scroll;
height: auto;
}

ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 2000px;
}

ul li {
width: 50px;
height: 50px;
float: left;
margin: 1px;
padding: 5px;
background: #555;
color: #fff;
}
</style>
</head>
<body class="">
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>


Any ideas or help would be greatly appreciated.
6:12 pm on Dec 11, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4344
votes: 292


Your test document appears to be html5 and things like marquee and scroll are deprecated for that doctype. I'm offering the information link to CSS Animations for css3 here: [dev.w3.org...] but hoping you can get better help from a member using this type of implementation. If the images were static images that you set up, maybe css sprites might be helpful, but for an unknown number of images that won't solve it.
6:25 pm on Dec 11, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15698
votes: 810


scroll horizontally within the containing div
<snip>
overflow-y: scroll;

The prose only mentions horizontal (x) scrolling but the CSS only mentions vertical (y) scrolling. What happens if you comment-out all references to scrolling and width except the one for width of the container (which is obviously crucial to the whole thing)?
10:11 pm on Dec 11, 2014 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


Figured it out, with help from the internet!


<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
ul {
width: 300px;
height: auto;
overflow: auto;
overflow-y: hidden;
white-space: nowrap;
list-style-type: none;
margin: 0;
padding: 0;
}

ul li {
width: 50px;
height: 50px;
margin: 1px;
padding: 5px;
display: inline-block;
background: red;
}
</style>
</head>
<body class="">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>