CODEWITHSUNDEEP
csshtml
Ryan
Ryan

Reputation: 37

Horizontal scrolling of images with horizontal image alignment and spacing

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>

Upvotes: 1

Views: 12016

Answers (2)

Swapnil Ingle
Swapnil Ingle

Reputation: 128

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.

Upvotes: 0

Moob
Moob

Reputation: 16184

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/

Upvotes: 3

Related Questions