1

I was trying to create a html page with a <div> to simulate an iframe. I decided on using this example online. Basically, I have about 30 images with varying height and length not greater than 750px width and 500 px height. I was looking at having only a horizontal scrollbar.

http://www.websitecodetutorials.com/code/photo-galleries/css-horizontal-scroller4-demo.php

I was facing an issue with three things in this tutorial

  1. The images seem to be top aligned. I want them to be middle aligned and not top aligned horizontally.

  2. I was unable to increase the gap between the horizontal images. I wanted to make it 200px. but the whole set of images moves down. Looks like it adds the 100px to the top also?

  3. In mobile safari, I dont see a scrollbar. Is there any feature I can use to show the scrollbar?

#scroll {
width:665px;
height:530px;
margin:0px auto;
background:#ffffff;
overflow-y:hidden

}
#scroll ul {
float:left;
margin-right:-999em;
white-space:nowrap;
list-style:none;
}
#scroll li {
margin:15px;
text-align:center;
float:left;
display:inline;           
}
#scroll img {
border:0;
display:block;
margin:0px auto;
}

#scroll span {
padding:100px 0 0;
display:block;

}

<div id="scroll">
    <ul>
    <li><a href="#"><img src="../images/img1.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img2.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img3.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img4.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img5.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img6.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img7.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img8.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/img9.jpg" alt=""><span>Image Name</span></a></li>
    </ul>
</div>
Ryan
  • 37
  • 1
  • 1
  • 5
  • and why you thinks images has text-align attribute ? – user1956570 Dec 17 '13 at 14:38
  • you should create a fiddle at http://jsfiddle.net – Zword Dec 17 '13 at 14:39
  • @Ryan : hi, welcome to SO, we appreciate any code that you have done, so we can find a solution to your problem...else, spoon feeding is not an option here!! :) – NoobEditor Dec 17 '13 at 14:48
  • Hi Everyone, Basically, that link page source is exactly what I am using. Could someone please help with how to paste code here? I tried pasting it in edit mode and then selecting that portion of text and doing a "CTRL+K" to add 4 spaces as mentioned in the help. But it does not show as code in the grey box. Maybe I am missing something? Can I just append something like before and after? – Ryan Dec 17 '13 at 16:34
  • Okay, managed to figure that out.So I am basically using the same code. But I am unable to increase the space between images without causing the images to move up/down.If I increase #scroll li { margin:15px; to 150px, the images get pushed down. Secondly, I also wanted control on the space between first and last image. Finally, the images are all top aligned. and not middle. Also, if there is any workaround for mobile safari scroll bar visibility? – Ryan Dec 17 '13 at 16:42
  • 1
    I want to help you, but I can't condone forcing horizontal scrolling only. If I visited your site on anything but a mobile browser (and you'd need touch events enabled) I would send you [phone spiders](http://www.youtube.com/watch?v=zLaQnrJSp9g) through the internet. – Metagrapher Dec 17 '13 at 16:47
  • ^LOL, thanks @Metagrapher, needed a laugh. Love that episode! – APAD1 Dec 17 '13 at 17:10
  • haha..Can someone please help now ;) I tried something like display:table-cell; vertical-align: middle; But did not work – Ryan Dec 17 '13 at 17:17

2 Answers2

3

You can use a table layout to achieve this.

#scroll ul {
    margin:0; 
    padding:0;
    display:table;
    list-style:none;
}
#scroll li {
    min-width:500px; /* < Add a min-width if needed */
    padding:10px 100px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    border:1px solid #eee;
}

http://jsfiddle.net/jM3yQ/1/ or http://jsfiddle.net/jM3yQ/2/ (min-width on li)

As for the scrollbars in mobile safari: this answer may be useful but you could make it more obvious to the user that the content is scrollable by ensuring that the content doesn't fit cleanly - thus leaving the next image partially visible.

In response to your comments, you can use :first-child and :last-child pseudo-selectors to change the padding of the first and last items:

#scroll li:first-child {
    padding-left:200px;
}
#scroll li:last-child {
    padding-right:200px;
}

eg http://jsfiddle.net/jM3yQ/3/

Community
  • 1
  • 1
Moob
  • 14,420
  • 1
  • 34
  • 47
  • Thanks a ton Moob! That worked. I had one query. Is there a way I can control the space between the first image and the last image? Right now the padding between images is perfect, but since its a small frame, the first image might have to be moved a little closer to be placed in the center, similarly for the last image. Basically, want to reduce the left padding of the first image and then right padding of the last image. – Ryan Dec 17 '13 at 17:27
  • Also, just to confirm, is there a way to enable scroll bars in mobile safari? Or that is not currently possible? – Ryan Dec 17 '13 at 17:30
  • Thanks @Moob! That was helpful. Just one more thing, I am not very familiar with CSS, what would the min-width:500 do? I was hoping to control the first images left padding and the last images right padding. Not sure if I am missing something. Thank You! – Ryan Dec 17 '13 at 17:49
0

This is what worked for me, I replaced the ul>li with div tag.

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 200px;
  height: 70px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-flow: row;
  overflow-x: scroll; 
}

#main div {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
}
</style>
</head>
<body>

<h1>The Title</h1>

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>

Instead of A, B, C, etc you can add whatever you like.

Swapnil Ingle
  • 128
  • 8