This question already has answers here:
Making a div vertically scrollable using CSS
(10 answers)
Closed 7 years ago.
I made a horizontal scroll with a list of picture elements.. But when I made to scroll it vertically I failed to do it.
my code for the horizontal scroller is
<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
<div class="pic-row">
<div id="divd" style="width: 1680px;">
<img src="images/A.Png" />
<img src="images/B.Png" />
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />
<img src="images/I.Png" />
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.Png" />
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />
<img src="images/W.Png" />
<img src="images/X.Png" />
<img src="images/Y.Png" />
<img src="images/Z.Png" />
</div>
The css I used is as follows
.pic - container {
/* The width of mydocument */
width: 1350 px;
margin: 0 auto;
white - space: nowrap;
overflow - x: inherit;
overflow - y: hidden; -
ms - overflow - style: -ms - autohiding - scrollbar;
}
.pic - row {
/* As wide as it needs to be */
width: 1527 px;
}
Please Guide me to found a solution to make that horizontal scrolling div into vertical scrolling
Use the css below
.pic-container {
width: 50px;
height: 200px;
overflow-y: scroll;
overflow-x:hidden;
}
EDIT :- Added a '.' before the class name
see the fiddle link HERE
you have to set fix height of your main div for horizontal scroll and if your inside content height exceed height of main div then horizontal scroll will come.
.pic-container {
width: 1350px;
margin: 0 auto;
white-space: nowrap;
}
.pic-row {
/* As wide as it needs to be */
width: 1350px;
height: 400px;
overflow: auto;
}
.pic-row a {
clear: left;
display: block;
}
<div class="pic-container">
<div class="pic-row">
<img src="images/A.Png" />
<img src="images/B.Png" />
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />
<img src="images/I.Png" />
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.Png" />
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />
<img src="images/W.Png" />
<img src="images/X.Png" />
<img src="images/Y.Png" />
<img src="images/Z.Png" />
</div>
</div>
Try this:
index.html:
.pic-container {
width: 600px;
height: 600px;
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="pic-container">
<img src="images/A.png" />
<img src="images/B.png" />
<img src="images/C.png" />
<img src="images/D.png" />
<img src="images/E.png" />
</div>
</body>
</html>
Related
Scenario: I want to make a html page that has many image thumbnails (about 20).
I want to make it adaptive/responsive. It should have 4 thumbnails in a row (see Picture1) when it's on wider browser (such as PC browser - mozilla etc) (see Picture2)
Then, when the browser reduces it's size, it should decrease it's size.
And if the browser is too small, 1 thumbnail per row should appear (such as mobile browsers etc). (see Picture3)
It should have space in between photos (padding?)
I think this should be done using CSS?
I only have following code, which reduces thumbnail's size when browser's size is reducing.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>
</body>
</html>
P.S: EDIT, SEE THIS PHOTO FOR FURTHER CLARIFICATIONS.Thanks
you can achieve this using media queries
take a look at this snippet:
#container {
width: 100%;
max-width: 980px; /* updated - choose whatever width you prefer */
margin: auto /* updated */
}
#container > div {
width: 25%;
float: left;
}
#container img {
max-width: 100%;
display: block;
box-sizing: border-box;
padding: 5%
}
/*whatever width query you like for phones*/
#media screen and (max-width: 640px) {
#container > div {
width: 100%;
float: none
}
<div id="container">
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
</div>
I'm trying to make a horizontal image slider. Lets say there are 6 total images and 3 are displayed at a time. So the width of outer div should be width of 3 images and width of inner div is equal to 6 images so that it can be scrolled using JavaScript, but size of inner div is equal to outer div only.
HTML
<div class="image_slider">
<div class="image_wrapper">
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
</div>
</div>
CSS
.image_slider {
width: 100%;
position: relative;
height: 500px;
overflow: hidden;
}
.image_wrapper {
position: absolute;
height: 500px;
display: inline;
}
.image_wrapper > img {
width: 500px;
height: 500px;
}
fiddle
You should use width:auto,max-width:100%, and white-space:nowrap on .image_slider.
.image_wrapper should be set to width:auto and position:absolute
<style>
.image_slider {
white-space: nowrap;
width: auto;
max-width:100%;
position: relative;
height: 500px;
overflow: hidden;
}
.image_wrapper{
width:auto;
position:absolute;
}
.image_wrapper > img {
width: 500px;
height: 500px;
}
</style>
<div class="image_slider">
<div class="image_wrapper">
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
</div>
</div>
You can calculate the width of img wrapper dynamically with jquery and achieve what you want like below
var width = 0;
$('img').each(function() {
width += $(this).outerWidth();
});
$('.wrapper').width(width + 100);
div {
overflow:hidden;
background: red;
}
img {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="wrapper">
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
</div>
</div>
I have a large image split into many smaller images. I want them all to resize together if the browser window is resized. My code so far is:
<!DOCTYPE html>
<body>
<style>
.splitimage{
max-height:100%;
max-width:100%;
width:auto;
}
.keeptogether{
width:100%;
overflow:hidden;
white-space:nowrap;
line-height:0;
word-spacing:-4px;
}
</style>
<div class="keeptogether">
<div class="keeptogether">
<img class="splitimage" src="worldmap-0-0.jpeg" />
<img class="splitimage" src="worldmap-0-1.jpeg" />
<img class="splitimage" src="worldmap-0-2.jpeg" />
</div>
<br class="keeptogether">
<div class="keeptogether">
<img class="splitimage" src="worldmap-1-0.jpeg" />
<img class="splitimage" src="worldmap-1-1.jpeg" />
<img class="splitimage" src="worldmap-1-2.jpeg" />
</div><br class="keeptogether">
<div class="keeptogether">
<img class="splitimage" src="worldmap-2-0.jpeg" />
<img class="splitimage" src="worldmap-2-1.jpeg" />
<img class="splitimage" src="worldmap-2-2.jpeg" />
</div>
</div>
</body>
</html>
but the images do not resize when the browser window shrinks.
Here's the fiddle: https://jsfiddle.net/ntL9c5jt/
add width as 33.3%. to the cells .splitimage
set images width to 33.3333% - so, they will all together constitute to 100% of screen
.splitimage {
max-height: 100%;
max-width: 100%;
width: 33.3333%;
/* as there are 3 images in a line*/
}
.keeptogether {
width: 100%;
overflow: hidden;
white-space: nowrap;
line-height: 0;
word-spacing: -4px;
}
<body>
<div class="keeptogether">
<div class="keeptogether">
<img class="splitimage" src="http://fivebs.net/fiddle/worldmap-0-0.jpeg" />
<img class="splitimage" src="http://fivebs.net/fiddle/worldmap-0-1.jpeg" />
<img class="splitimage" src="http://fivebs.net/fiddle/worldmap-0-2.jpeg" />
</div>
<br class="keeptogether">
<div class="keeptogether">
<img class="splitimage" src="http://fivebs.net/fiddle/worldmap-1-0.jpeg" />
<img class="splitimage" src="http://fivebs.net/fiddle/worldmap-1-1.jpeg" />
<img class="splitimage" src="http://fivebs.net/fiddle/worldmap-1-2.jpeg" />
</div>
<br class="keeptogether">
<div class="keeptogether">
<img class="splitimage" src="http://fivebs.net/fiddle/worldmap-2-0.jpeg" />
<img class="splitimage" src="http://fivebs.net/fiddle/worldmap-2-1.jpeg" />
<img class="splitimage" src="http://fivebs.net/fiddle/worldmap-2-2.jpeg" />
</div>
</div>
</body>
i have some trouble finding a way to show some thumbs in the middle of the screen, especially if one resizes the window (-> responsive design).
A couple a images are displayed in the next line but then centerd...which is not a surprise at all...but how can i have the center effect (in regard to have the images displayed always in the center)
But have the last images float left so that they have an equal beginning with the above line?)
My HTML code so far looks like this (see also he fiddle : http://jsfiddle.net/Zw9Ug/)
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Template Gallery </title>
<meta name="description" content="This is the content">
</head>
<body>
<div id="wrapper">
<div id="inner">
<div id ="gallery_container">
<!-- // TODO - hurry -->
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
</div>
</div>
</div>
</body>
</html>
css:
#wrapper{
margin:0px auto;
width:90%;
text-align: center;
}
#inner{
margin-left: auto;
margin-right: auto;
}
#gallery_container{
width:auto;
float:left;
}
#gallery_container img{
min-height:90px;
max-height:170px;
}
body {
background-color: grey;
}
Thanks a lot!
Depending on your actual needs, you could either add this:
#gallery_container img{
float: left;
}
However, the space between the border and the outermost left / outermost right image won't be the same.
Or, if you do want to achieve that effect, you could add:
#wrapper{
text-align: justify;
}
But now the spacing between the images isn't exactly the same.
Having some trouble trying to put together a page where images are placed properly. Screen shot attached of what I currently have in place now. What I am trying to get to would look like the first row of images (1-5) all the way down the page with every other row opposite, if that makes sense. Images 1-8 are set up correctly but 9-10 are on row 3 rather than on row 2 where I would like them. Image 11 should be left side and 12-15 should be right side. And so on..
Current css –
#grid { float: left; width: 100%; overflow: hidden; }
#grid-inner { float: left; width: 890px; overflow: hidden; }
.item { float: left; margin: 0 0 10px 0; position: relative; }
.item span { display: none; position: absolute; padding: 0 0 0 0; color: #fff; background: transparent url('../images/back-work.png') 0 0 repeat; }
.item span a { color: #fff; display: block; height: 100%; width: 100%; }
.small { width: 210px; height: 125px; }
.large { width: 420px; height: 260px; }
.small span { width: 210px; height: 125px; padding: 0 0 0 0; }
.large span { width: 420px; height: 260px; padding: 0 0 0 0; }
#project { float: left; width: 100%; }
#project-content { float: left; width: 100%; border-top: 1px solid #ccc; margin: 0 0 0 0; padding: 0 0 0 0; }
#project-content-alpha { float: left; width: 200px; }
#project-content-beta { float: left; width: 410px; }
#project-content-gamma { float: right; width: 200px; text-align: right; }
#project-content-alpha span.light { color: #999; }
#project-images { float: left; width: 100%; }
#project-images img { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination-alpha { float: left; width: 200px; }
#project-pagination-beta { float: right; width: 200px; text-align: right; }
Current markup –
<div id="grid">
<div id="grid-inner">
<div class="item large">
<span>ONE</span>
<img src="" width="420" height="260" alt="ONE" />
</div>
<div class="item small">
<span>TWO</span>
<img src="" width="210" height="125" alt="TWO" />
</div>
<div class="item small">
<span>THREE</span>
<img src="" width="210" height="125" alt="THREE" />
</div>
<div class="item small">
<span>FOUR</span>
<img src="" width="210" height="125" alt="FOUR" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="FIVE" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="SIX" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="SEVEN" />
</div>
<div class="item large">
<span></span>
<img src="" width="420" height="260" alt="EIGHT" />
</div>
Any help or suggestions on this would be appreciated.
Thanks in advance!
CSS floats don't reposition the elements vertically. They only float horizontally.
If you want vertical "floats" (i.e. tiling), you will need to use JavaScript. I recommend the jQuery Masonry Plugin or Vanilla Masonry (jQuery Masonry minus the jQuery).
Check out the interface here. Let me know if you need revisions.
EXACTLY WHAT WAS ASKED FOR - http://jsfiddle.net/rxLTG/
HTML
<div class="wrap">
<div class="row">
<img class="lg" src="" alt="1" />
<img class="sm" src="" alt="2" />
<img class="sm" src="" alt="3" />
<img class="sm" src="" alt="4" />
<img class="sm" src="" alt="5" />
</div>
<div class="row">
<img class="sm" src="" alt="6" />
<img class="sm" src="" alt="7" />
<img class="lg" src="" alt="8" />
<img class="sm" src="" alt="9" />
<img class="sm" src="" alt="10" />
</div>
</div>
CSS
.wrap {width:650px;}
.wrap img {float:left; width:150px; height:100px;}
.wrap img.lg {width:350px; height:200px;}
.row.odd .lg, .row:nth-child(even) .lg {float:right;}
JS
$(function () {
$('.row:odd').addClass('odd');
});
A better way would be like this - http://jsfiddle.net/rxLTG/2/
HTML
<div class="wrap">
<img class="lg" src="" alt="1" />
<img class="sm" src="" alt="2" />
<img class="sm" src="" alt="3" />
<img class="sm" src="" alt="4" />
<img class="sm" src="" alt="5" />
<img class="lg2" src="" alt="6" />
<img class="sm" src="" alt="7" />
<img class="sm" src="" alt="8" />
<img class="sm" src="" alt="9" />
<img class="sm" src="" alt="10" />
<img class="lg" src="" alt="11" />
<img class="sm" src="" alt="12" />
<img class="sm" src="" alt="13" />
<img class="sm" src="" alt="14" />
<img class="sm" src="" alt="15" />
<img class="lg2" src="" alt="16" />
<img class="sm" src="" alt="17" />
<img class="sm" src="" alt="18" />
<img class="sm" src="" alt="19" />
<img class="sm" src="" alt="20" />
</div>
CSS
.wrap {width:500px;}
.wrap img {float:left; width:125px; height:100px;}
.wrap img.lg {width:250px; height:200px;}
.wrap img.lg2 {width:250px; height:200px;float:right;}
Theres no need to define each row inside a div, because they will automatically fit and wrap round.
Also, if you float the large image on each row first (left or right), then the other four will fit into place without any javascript needed.
Every fifth number will then be a large image, (1,6,11,16,21 etc). If you want it to work javascript free, then use this solution. If you want to keep your original numbering system, then use the solution above.
You can just look at it as a grid. More markup, but reusable and responsive too.
For the example, you can handle this grid layout with a single class that takes the half of it's container.
first row :
- 1 column of 1/2 : has 1 large image
- 1 column of 1/2 : has 4 columns (1/2 each, and each containing a small image)
Second row : just reverse the first 1/2 columns
Columns are floated, so the col 4 and 5 will stack under 1 and 2... Your images, have to be at the right aspect ratio too.
And finally, since you're floating elements, clearfix the group.
Hope it helps.
/* Micro clearfix for the wrapper */
.wrap:before,
.wrap:after {
content: '';
display: table
}
.wrap:after {
clear: both;
}
.wrap { width:650px; }
/* no need for size if you put the right images */
img {
width:100%;
height: auto;
vertical-align: middle; /* removes the gap beneth the image */
}
/* you can go further and create some other columns */
.col-1-2 {
float: left;
width: 50%;
}
/* demo purpose only */
img {
width: 100%;
height: 100px;
}
img.lg { height: 200px; }
<div class="wrap">
<!-- one half of the wrapper -->
<div class="col-1-2">
<img class="lg" src="" alt="1" />
</div>
<!-- one half of the wrapper -->
<div class="col-1-2">
<!-- one half of the columns :: 1/4 -->
<div class="col-1-2">
<img class="" src="" alt="2" />
</div>
<div class="col-1-2">
<img class="" src="" alt="3" />
</div>
<div class="col-1-2">
<img class="" src="" alt="4" />
</div>
<div class="col-1-2">
<img class="" src="" alt="5" />
</div>
</div>
<!-- then reverse -->
<div class="col-1-2">
<div class="col-1-2">
<img class="" src="" alt="6" />
</div>
<div class="col-1-2">
<img class="" src="" alt="7" />
</div>
<div class="col-1-2">
<img class="" src="" alt="8" />
</div>
<div class="col-1-2">
<img class="" src="" alt="9" />
</div>
</div>
<div class="col-1-2">
<img class="lg" src="" alt="10" />
</div>
</div>