I'm trying to create a <div> with a series of photos which are horizontally scrollable only.
It should look something like this LINK;
However the above is only achieved by specifying a width for the <div> which contains the photos (so they don't 'word-wrap'). If I don't put a width - it looks like this;LINK
What can I do using CSS to prevent putting in a fixed width as the images may vary.
Thanks
You can use display:inline-block with white-space:nowrap. Write like this:
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap;
}
.imageDiv img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 50px;
cursor: pointer;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
}
Check this http://jsfiddle.net/YbrX3/
Here's a solution with flexbox for images with variable width and height:
.container {
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
margin: 20px;
}
img {
flex: 0 0 auto;
width: auto;
height: 100px;
max-width: 100%;
margin-right: 10px;
}
<div class="container">
<img src="https://via.placeholder.com/100x100" />
<img src="https://via.placeholder.com/50x50" />
<img src="https://via.placeholder.com/5x50" />
<img src="https://via.placeholder.com/100x50" />
<img src="https://via.placeholder.com/50x100" />
<img src="https://via.placeholder.com/20x50" />
<img src="https://via.placeholder.com/50x30" />
<img src="https://via.placeholder.com/50x150" />
<img src="https://via.placeholder.com/250x50" />
<img src="https://via.placeholder.com/150x350" />
<img src="https://via.placeholder.com/50x350" />
<img src="https://via.placeholder.com/100x100" />
<img src="https://via.placeholder.com/50x50" />
<img src="https://via.placeholder.com/5x50" />
<img src="https://via.placeholder.com/100x50" />
<img src="https://via.placeholder.com/50x100" />
<img src="https://via.placeholder.com/20x50" />
<img src="https://via.placeholder.com/50x30" />
<img src="https://via.placeholder.com/50x150" />
<img src="https://via.placeholder.com/250x50" />
<img src="https://via.placeholder.com/150x350" />
<img src="https://via.placeholder.com/50x350" />
</div>
Use this code to generate horizontal scrolling blocks contents. I got this from here http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>
try using table structure, it's more back compatible.
Check this outHorizontal Scrolling using Tables
Related
How can I adjust the code so that there is no space between each image and also how to keep them from overlapping. I tried to add another image but one ended up overlapping it. I have tried looking it up but no matter what I try it just doesn't work.
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.text {
text-align: center;
}
<!--IMAGES-->
<div class="row">
<div class="column">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg" height="300px" width="300px" alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg" height="300px" width="300px" alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg" height="300px" width="300px" alt="" />
</div>
</div>
You could use flexbox
<div class="row_flex">
<div class="column_flex">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg"
height="300px" width="300px" alt="" />
</div>
<div class="column_flex">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg"
height="300px" width="300px" alt="" />
</div>
<div class="column_flex">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg"
height="300px" width="300px" alt="" />
</div>
And the CSS
.row_flex {
display: flex;
justify-content: center;
}
I have changed your class names by adding the word "flex" as it looks like you're using something like Zurb foundation or bootstrap, where you wouldn't want to change the properties of "row" and "column" as the rest of your site will likely depend on them.
If you want images to be a little repsonsive I would suggest the following:
.column {
padding: 5px;
/* flex: 1;
flex-basis: 33%; */
max-width: calc(33vw - 10px);
display: flex;
}
.column img {
max-width: inherit;
}
/* .row::after {
content:"";
// display: table;
clear: both;
} */
.text {
text-align: center;
}
.row {
display: flex;
justify-content: center;
}
<div id="app"></div>
<div class="row">
<div class="column">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg"
alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg"
alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg"
alt="" />
</div>
Depending on whether or not you want this to run for other people you could make your own image on paint where you combine all 3 of the other images and then create an indirect path by guiding it to your images file. There are better methods if you want to be able to give the code to other people or have it work for other people on a browser involving more difficult code but if this is just going to be displayed on your computer and will not go to the public, I think that this would be much easier than coding the solution. That is, unless you are using bootstrap or another adapter.
I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;
<div class="container">
<div class="card_left">
<p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
<p style="font-size:1.2em;">Long text</p>
</div>
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/>
<img src="../res/images/artikel1bild.PNG"/>
</div>
Use display: block so there will be no other images in the same line and margin: auto for centering the image
img {
display: block;
margin: auto;
width: 200px;
}
<div>
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
</div>
Just add <br /> after each image if you want to stick to HTML:
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/><br />
<img src="../res/images/artikel1bild.PNG"/><br />
</div>
Or the better way would be to make a separate CSS file and set display: block; for your img tags:
img {
display: block;
}
Example: https://jsfiddle.net/nk8fbr76/
try this
img {
margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
<div class="card_right">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
I am relatively new to coding and I am looking to re-create this http://prntscr.com/e73jze which I designed in Photoshop. Could anyone give me the simplest way to make this?
Many thanks
Based on your included photo, exactly matching the styling of this design will not have a simple answer. To make a simple <div> with horizontally scrollable content, you could do something like this:
#wrapper {
display:flex;
flex-wrap:none;
height:200px;
width:100%;
background-color:black;
overflow-x: scroll;
}
.photo-box {
flex:0 0 auto;
margin:25px;
background-color:white;
width:300px;
height:150px;
}
<div id='wrapper'>
<div class='photo-box'></div>
<div class='photo-box'></div>
<div class='photo-box'></div>
<div class='photo-box'></div>
<div class='photo-box'></div>
<div class='photo-box'></div>
<div class='photo-box'></div>
</div>
However styling things like the scrollbar are not as simple and would require a fair amount more mark-up.
Use a div with overflow:scroll as a starting place to get a scrolling box and you can find a jQuery plug-in for making custom scrollbars here.
Just insert your own images and style the scrollbar.
#scrollable {
width: 500px;
height: auto;
margin: 100px auto;
overflow: auto;
white-space: nowrap;
}
<div id="scrollable">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
</div>
This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 7 years ago.
I'm trying to build a simple image grid in CSS that shows images in 4 columns with no gaps under them and dynamic floating positions.
CSS:
.img-grid .img-grid-item-holder {
display: inline-block;
text-align: left;
width: 25%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
.img-grid img {
width: 100% !important;
height: auto !important;
}
HTML:
<div class="img-grid">
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/400/800/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/350/750/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/500/600/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/410/430/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/320/650/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/350/750/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/500/600/cats" />
</div>
</div>
Here is a JSfiddle showing the HTML and CSS I currently have. You can see there are spaces between the bottom right images.
I need it to look like this (or similar), and to allow the elements to sit neatly close to each other when I append new elements to img-grid div, while making sure the old elements keep their positions.
I tried to do this using CSS3 columns, but they don't play well with dynamically appending elements to the img-grid div making the old images change positions.
Thanks in advance.
It's a type of Masonry layout.
I just made it with http://masonry.desandro.com/
Check out the solution here
https://jsfiddle.net/41efz7ye/22/
$(document).ready(function(){
$('.img-grid').masonry({
// options
itemSelector: '.img-grid-item-holder',
columnWidth: 150
});
});
.img-grid .img-grid-item-holder {
width: 150px;
display: inline-block;
padding: 0px;
margin: 0px;
}
.img-grid img {
width: 100% !important;
height: auto !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
</script>
<div class="img-grid">
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/400/800/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/350/750/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/500/600/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/410/430/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/320/650/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/350/750/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/500/600/cats" />
</div>
</div>
Here is what my print page look like,
Here is my html glimpse,
<style>
.container{
float: left;
border: 1px solid Black;
width: 400px;
height: 350px;
margin: 10px;
padding: 10px;
page-break-inside: avoid;
}
.container img{
max-width: 200px;
max-height: 200px;
}
</style>
<div class="container">
<b>Name: </b>#Product.Name<br />
<b>Model: </b>#Product.ModelNumber<br />
<img src="#Product.ImagePath" /><br />
<span style="font-size: 20px">DetailedDescriptions</span><br />
#foreach(var attr in Product.DetailedDescriptions){
#attr.Header<br />
}
<span style="font-size: 20px">KeyAttributes</span><br />
#foreach(var attr in Product.KeyAttributes){
#attr.Name<br />
#attr.Value<br />
}
</div>
How to make sure that the page break after every 6 divs using css
You should encapsulate your divs and create a better structure of this type in HTML:
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<!-- keep adding more container-rows -->
</div>
</body>
Then in CSS take several things into account:
let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style
Here is a working jsFiddle
I have tried it outside of jsFiddle and I get this result:
You can use
div:nth-of-type(6n) {
page-break-after:always;
}
to insert a page-break after each 6. div, but I think this will not work with floats.
You could do it this way:
FIDDLE
.wrapper div:nth-child(6n)
{
margin-bottom: 300px;
}
Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.