horizontal scroll

[papercut]

hi there, i'm trying to make a horizontal scroll within a div but the display:inline; doesn't work as expected. can you help me please? i'm stuck. here's the code:

#scroll {width:850px; height:200px; overflow:auto; white-space:nowrap;}
#scroll ul {padding:0; margin:0; list-style-type:none;}
#scroll li {list-style-type:none; display:inline;}

<div id="scroll">
<ul>
<li><a href="">Title</a> words<p><a href=""><img src="" alt="" border="0"/></a></p></li>
<li><a href="">Title</a> words<p><a href=""><img src="" alt="" border="0"/></a></p></li>
<li><a href="">Title</a> words<p><a href=""><img src="" alt="" border="0"/></a></p></li>
<li><a href="">Title</a> words<p><a href=""><img src="" alt="" border="0"/></a></p></li></ul>
</div>

it seems i have to float #scroll li to the left. however i won't have horizontal but vertical scroll?!

[WebJoel]

#scroll {width:200px; height:100px; overflow-y:scroll; white-space:nowrap; border:3px double silver;}
#scroll ul {padding:0; margin:0;}
#scroll li {list-style-type:none; display:inline; text-align:center;}
#scroll li p {text-align:center;}and:<div id="scroll">
<ul>
<li><p><a href="">Title</a> words<a href=""><img align="absmiddle" src="" alt="" border="0"/></a></p></li>
<li><p><a href="">Title</a> words<a href=""><img align="absmiddle" src="" alt="" border="0"/></a></p></li>
<li><p><a href="">Title</a> words<a href=""><img align="absmiddle" src="" alt="" border="0"/></a></p></li>
<li><p><a href="">Title</a> words<a href=""><img align="absmiddle" src="" alt="" border="0"/></a></p></li></ul>
</div> You mean like this? I changed the width due to the absence of enough content to make it work, but you can make it whatever width you want. Or do you mean that you want the scroller to scroll 'horizontally'?

[papercut]

What I mean is title/words on one line, on the second line image - all this in a li that are displayed in one line one next to the other with a horizontal scroll underneath.

How do I get the content in my DIV to scroll horizontally rather than vertically? Thanks.

[Centauri]

Shouldn't be too hard - what is the size of the images?

[papercut]

Centaury, images are 235x115px but the problem is that if I make every li float to the left a vertical scroller appears; if I display every li inline then again a vertical scroller appears. How to force them to be all on the same one line and with a horizontal scroller beneath. If I have only image in the li and display inline everything is ok but with the title that should be on top of the image a vertical scroller appears and all li fall under each other.
I use <p> surrounding the <img> because I put a background image under the <img>

[Centauri]

Just referred back to your original post, and just want to clarify a couple of things. It would appear that ABOVE the image you want some text - a "title" that is maybe styled differently, bold etc? and text.. The way you have it in the first post, it looks like the heading is a link, the text not, and the graphic another separate link..... or do you want virtually the entire <li> to be a link to another page? Can you give an example of what a heading and text might be for one image?

Cheers
Graeme

[papercut]

Yes, that's exactly what I want referring to the original post and the code. "Title" is a heading styled differently from the "words". These are heading and short description. Former is a link and latter is not. Below is the image sitting in a background image. This is one block. I don't know how many I'll have and it's not important as long as all these blocks are sitting next to each other in a div which is scrolled horizontally.

[Centauri]

If the image is 235px wide, this doesn't allow much room for a heading and short description - do they have to be on one line? Can you give an example of what a heading and description could be? Also, is the image itself to be linked, and if so, is it a different link to the heading or the same destination?

Lots of questions ... :)

Cheers
Graeme

[papercut]

Actually I'll make every li 270px wide like the background image. I'll have 3 visible li in a 850px wide horizontally scrollable div. The other li will appear when you scroll. I have one and the same link for title and for image. See the attachment hope this clears things up :)

[Centauri]

Ok, I had a play with this. You said the background image was 270px wide, so keeping the same area around the 235 x 115px images, I used a background graphic 270 x 149px. As the height of the scrolling div is 200px, I set the height of the <ul> to 182px, allowing 18px for the scrollbar. I also added a space of 5px between each entry to improve appearance. To get this to work, you have to specify the width of the <ul> to prevent it wrapping, and in my example I used 8 entries at 270px wide +5px margin = 2200px.

As the link text and graphic share the same link url, they can be within the one <a> tag, and styled to give the visual separation. By setting the position of <li> to relative, the image can be positioned absolutely within it. As the image is out of the document flow, the description text will follow the link text. See if this fits the bill (a screenshot of this is also attached) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
}
#scroller {
width: 850px;
height: 200px;
overflow: auto;
background-color: #003366;
margin: 20px auto 0;
display: block;
border: 1px solid black;
position: relative;
}
#scroller ul {
height: 182px;
list-style: none;
width: 2200px;
}
#scroller li {
float: left;
width: 270px;
height: 182px;
background-image: url(images/scroll_back.jpg);
background-position: left bottom;
background-repeat: no-repeat;
position: relative;
margin-right: 5px;
line-height: 24px;
color: #FFFFFF;
font-size: 14px;
}
#scroller a {
color: #FF99CC;
font-size: 16px;
margin: 0 5px;
}
#scroller a:hover {
color: #FFFF99;
}
#scroller img {
position: absolute;
width: 235px;
height: 115px;
border: 0;
left: 17px;
top: 50px;
}
-->
</style>
</head>

<body>
<div id="scroller">
<ul>
<li><a href="#">Album1<img src="images/Image-01.JPG" alt=""></a> Description</li>
<li><a href="#">Album2<img src="images/Image-02.JPG" alt=""></a> Description</li>
<li><a href="#">Album3<img src="images/Image-03.JPG" alt=""></a> Description</li>
<li><a href="#">Album4<img src="images/Image-04.JPG" alt=""></a> Description</li>
<li><a href="#">Album5<img src="images/Image-05.JPG" alt=""></a> Description</li>
<li><a href="#">Album6<img src="images/Image-06.JPG" alt=""></a> Description</li>
<li><a href="#">Album7<img src="images/Image-07.JPG" alt=""></a> Description</li>
<li><a href="#">Album8<img src="images/Image-08.JPG" alt=""></a> Description</li>
</ul>
</div>
</body>
</html>


Cheers
Graeme

[papercut]

So there is no other way with the <ul> width right? I mean I have to calculate it accordingly? The problem is I don't know how many images I will have and this means I have to calculate the width every time I put more which is not good for dynamic content management unless I use javascript to calculate the width every time the page is rendered.
I've made it with display:table; for the <ul> and display:table-cell; for the <li> but as you know this is not working in IE :(
Anyway thank you very much and if something else comes to your mind I'll appreciate it.