I have been trying to develop a product page for my website and I have three angles for my product images so I wanted to create a image gallery when you go to the page. The layout I am going with and the code I have so far is at this link https://jsfiddle.net/b1g2f8dh/ . My issue is I want this to be responsive so I want the .main-image img width to shrink with the page as it collapses until it gets to a min-width in which case the .angle-images div i want to shift below the main-image div and with the thumbnails laid out horizontally. My first issue is I cannot get the main image to resize despite i have width 100%. I would have thought it would scale it down as the parent container gets smaller. The second issue is I cannot figure out how to shift the second images beneath. I am getting my positions all mixed up that nothing seems to work! I plan to figure out some javascript so when you click the thumbnail it makes it the main image but thats a problem for another day ha! Any help would be appreciated. The full implementation of my code can be found here in case that helps https://www.printperry.com/home/product-page/index.php
<div class="product-images">
<div class="angle-images">
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
</div>
<div class="main-image">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</div>
</div>
.product-images{
max-height: 700px;
max-width: 700px;
width: 100%;
display: block;
}
.angle-images{
padding:5px 0px;
width: 120px;
display: inline-block;
float:left;
max-height: 700px;
}
.main-image{
width: 80%;
height: 600px;
float: left;
margin: 10px;
}
.angle-images li{
list-style: none;
padding-top: 50px;
}
.angle-images img {
width: 100px;
float: right;
margin:5px 10px;
}
.main-image img {
width: auto;
height:700px;
}
There a couple of issues with your CSS preventing it from working as you desire. The height, width, max-width, values you have are working against each other in ways that aren't immediately apparent.
It works after making the modifications below.
Using flexbox for the layout mode makes it easy to switch between column and row layouts based on a media query.
.product-images{
max-height: 700px;
max-width: 700px;
width: 100%;
display: flex;
flex-flow: column nowrap;
flex-direction: column-reverse;
}
#media (min-width: 768px) {
.product-images {
flex-flow: row nowrap;
}
}
.angle-images{
padding:5px 0px;
width: 120px;
max-height: 700px;
display: flex;
}
#media (min-width: 768px) {
.angle-images {
flex-flow: column nowrap;
}
}
.main-image{
width: 80%;
height: 600px;
margin: 10px;
}
.angle-images li{
list-style: none;
padding-top: 50px;
}
.angle-images img {
width: 100px;
margin:5px 10px;
}
.main-image img {
max-width: 100%;
}
Like Dan mentioned in his post, there were conflicting values. One of the issue I saw, was the size of the parent container, and the child container.
I am also learning as well, and one tip I would give you is try to use border-style to help you see visually, it makes problem solving more direct and easy.It really helps when you're working with multiple div container. Then play around with what you know, and try to see how to make it fit. I decided to give a stab at this, and came up with this version. You would have to use Flex unfortunately, it just made problem solving easier. The angle and main are responsive together for now unless you were trying to make just the main responsive only, please let me know so I can take some more time later and see if I further assist you, but for now this is what I have. I hope this leads you to the right path of whatever it is you're trying to achieve.
<div class="product-images">
<div class="angle-images">
<ul class="angle-ul">
<li class="angle-li angle-li-1">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li class="angle-li angle-li-2">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li class=" angle-li angle-li-3">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
</ul>
</div>
<div class="main-Image">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</div>
</div>
* {
margin: 0;
padding: 0;
}
.product-images {
height: 700px;
max-width: 700px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: warp;
border-style: dotted;
}
.angle-images {
width: 100px;
border-style: dotted;
}
.angle-ul {
}
.angle-li img {
width: 100%;
}
.main-Image img {
height: 100%;
width: 100%;
}
Related
Im a looking to make four pic side by side yet unsuccessul. Two on top two on the bottom. I want to make sure that they stay the same with all browser size except mobile.
Here is my attempt so far
#imageone{
position: absolute;
top:0px;
width: 50%;
padding:0px;
}
#imagetwo{
position: absolute;
width: 50%;
left:50%;
}
#imagefour{
position: absolute;
width:50%;
top:1000px;
}
#imagethree{
position: absolute;
width:50%;
left: 50%;
top:1200px;
}
<div id="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/600px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" id="imageone"/>
<img src="https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?ixlib=rb-0.3.5&s=abfa7882ea0fca1fab6a6c2a7d76c0c9&auto=format&fit=crop&w=933&q=80" id="imagetwo"/>
<img src="https://images.unsplash.com/photo-1497445462247-4330a224fdb1?ixlib=rb-0.3.5&s=246fd0d0ce33fcb5901efece89d14c49&auto=format&fit=crop&w=934&q=80" id="imagethree"/>
<img src="https://images.unsplash.com/photo-1518063319789-7217e6706b04?ixlib=rb-0.3.5&s=9cb9c66926a12de24fbc525f0504bf2d&auto=format&fit=crop&w=934&q=80" id="imagefour"/>
<div>
Here it is hosted on codepen link
here is visual description : link Note: without the padding and margin and borderline (of course!)
You can try this:
#image {
font-size: 0; /* remove space after inline element */
}
#image img {
display: inline-block;
vertical-align: top; /* remove extra pixels under inline element */
width: 50%;
}
div {
font-size: 0; /* remove space after inline element */
}
img {
display: inline-block;
vertical-align: top; /* remove extra pixels under inline element */
width: 50%;
}
<div id="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/600px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" id="imageone"/>
<img src="https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?ixlib=rb-0.3.5&s=abfa7882ea0fca1fab6a6c2a7d76c0c9&auto=format&fit=crop&w=933&q=80" id="imagetwo"/>
<img src="https://images.unsplash.com/photo-1497445462247-4330a224fdb1?ixlib=rb-0.3.5&s=246fd0d0ce33fcb5901efece89d14c49&auto=format&fit=crop&w=934&q=80" id="imagethree"/>
<img src="https://images.unsplash.com/photo-1518063319789-7217e6706b04?ixlib=rb-0.3.5&s=9cb9c66926a12de24fbc525f0504bf2d&auto=format&fit=crop&w=934&q=80" id="imagefour"/>
<div>
remove your code and use below code
#image{
line-height: 1px;
}
#image img{
float: left;
width: 50%;
height: 50vh;
}
I would use CSS Grid to sort that out.
#image {
display: grid;
grid-gap: 10px;
}
img {
/*Let image take full width of the division of space*/
max-width: 100%;
height: auto;
}
/*For screen larger than mobile*/
#media screen and (min-width: 520px) {
#image {
grid-template-columns: 1fr 1fr;
}
}
<div id="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/600px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" id="imageone"/>
<img src="https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?ixlib=rb-0.3.5&s=abfa7882ea0fca1fab6a6c2a7d76c0c9&auto=format&fit=crop&w=933&q=80" id="imagetwo"/>
<img src="https://images.unsplash.com/photo-1497445462247-4330a224fdb1?ixlib=rb-0.3.5&s=246fd0d0ce33fcb5901efece89d14c49&auto=format&fit=crop&w=934&q=80" id="imagethree"/>
<img src="https://images.unsplash.com/photo-1518063319789-7217e6706b04?ixlib=rb-0.3.5&s=9cb9c66926a12de24fbc525f0504bf2d&auto=format&fit=crop&w=934&q=80" id="imagefour"/>
<div>
I have a div-container, which has one main image and optional multiple smaller images: http://jsfiddle.net/h5kc8ybm/
The multiple smaller images are generated dynamically, so there can be just 1 or 10 of them. On my JFiddle you can see, that the images are just displayed in one single row.
What I want to achieve is, that there are filled up 'by colomns':
First image on top next to the main image (like shown in this example)
Second image below that (not right of it, like in the example)
Third image right of first image (top)
Fourth image below third image
...and so on.
Is it possible to do that just with CSS?
Update
To avoid misunderstanding: All smaller images should be positioned right of the main image. But these small images should be displayed in two rows, filled up from first row to second row.
The main div-element will never change its height, but only its width.
Example
HTML
<div class="tnwrapper">
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
</div>
LESS
.tnwrapper {
background-color: #f5f5f5;
padding: 5px 5px 5px 9px;
border-radius: 4px;
display: inline-block;
.tn {
display: inline-block;
vertical-align:top;
position: relative;
margin-right: 5px;
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail.child {
width: 40px;
}
}
}
I was able to do this with the following steps:
wrap the smaller children in a div and make it position:relative
apply position:absolute on even items and reposition them
float them left
http://jsfiddle.net/0neukb08/
The downside of this approach is that it hardcodes the image's size in the "reposition" step
Additionally, the reason I chose not to use flex-box here was this issue with growing its width (I also didn't like the highest voted answer), but flexbox is a good option if you know the container's width in advance.
You probably can do this by
Rotate the container -90deg and reflect it:
.tnwrapper {
...
transform: rotate(-90deg) scaleX(-1);
}
then apply the reverse transformation for the thumbnails:
.tnwrapper .tn {
...
transform: rotate(90deg) scaleX(-1);
}
JSFiddle: http://jsfiddle.net/h5kc8ybm/1/
Note though that the height limit of the container is now width, not height (because it was rotated -90deg.
CSS flexbox styling should do the trick:
.tnwrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
.tn:first-child {
height: 192px;
width: 192px;
}
<div class="tnwrapper">
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
</div>
EDIT: Sorry, the above snippet doesn't quite answer the question after all. This snippet places each subsequent image in left-to-right then top-to-bottom order, rather than top-to-bottom then left-to-right order as the question asked. I think adding a div around the first image would be the cleanest way to accomplish what you want.
I'm not quite clear on the order of the thumbnails but I think you wanta column format for those.
I that case wrap the main image and the thumbnails in separate divs and then flexbox can do the rest.
.wrap {
display: flex;
margin: 1em auto;
height: 280px;
}
.hero {
padding: 10px;
}
.sidekicks {
flex: 1;
padding: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
.sidekicks .item {
width: 96px;
height: 96px;
margin: 10px;
background: lightblue;
line-height: 96px;
text-align: center;
}
<div class="wrap">
<div class="hero">
<img src="http://lorempixel.com/image_output/city-h-c-240-250-5.jpg" alt="" />
</div>
<div class="sidekicks">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
</div>
</div>
Codepen Demo
This is solution with flexbox and since you said that height of main-div wont change this should work http://jsfiddle.net/h5kc8ybm/13/
CSS
.tnwrapper {
background-color: #000;
padding: 5px 5px 5px 9px;
border-radius: 4px;
display: -webkit-flex;
display: flex;
}
.child-images {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 10px;
height: 170px;
}
.tnwrapper .tn .thumbnail {
padding: 4px;
margin: 10px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.child-images .tn img {
width: 40px;
}
I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.
I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.
Maybe it's something to do with position relative and absolute, I don't understand it very well yet.
themeexp1.tumblr.com
Edit: It's not the 14px margin, it's a much bigger margin
Empty space: http://postimg.org/image/hiixhonoh/
HTML
<div id="content">
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="photo inner">
<a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a>
</div>
</div>
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
</nav>
</div>
CSS
#content{
margin: 0 auto;
position: relative;
}
.container{
margin-bottom: 14px;
}
.container-overlay{
width: 100%;
height: 100%;
opacity: 0;
position:absolute;
}
.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}
#pagination{
display: none;
position: absolute;
}
It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.
Example Fiddle
I am trying to figure out why my div is being overlapped by other div.
the markup looks like
<div class="headerCarrousel">
<img src="data/img/1_hero_carrousel/1.jpg" >
<img src="data/img/1_hero_carrousel/2.jpg" >
<img src="data/img/1_hero_carrousel/3.jpg" >
</div>
<div class="theStory">
<p>aaaa</p>
</div>
and my style I am using sass, that's why this code structure.
.headerCarrousel {
min-width: 1024px;
}
.headerCarrousel img{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.theStory{
margin: 0 auto;
text-align: center;
}
So the div "theStory" is underneath the div headerCarrousel for some reason, being overlapped. Note that I have to have the imagery as a fluid carrousel, that's why I am using width: 100%;
link to illustrate: http://marceloduende.com/tango/
Anybody has a solution for this problem? Thanks.
Problem solved.
To fix that I had to add my height dynamically with jquery.
$('.headerCarrousel')
.css('height', $('.headerCarrousel img').height());
Thank you all.
I want to have horizontal lists that can run as wide as possible but within a fixed width container. I am using jQuery to allow scrolling on the really wide list, and overflow:automatic for users without javascript.
I have code along the lines of this:
<div class="list">
<ul>
<li class="feed">
<section>
<h1><span class="name">Title</span></h1>
<div class="scroll_left"><a class="ir" href="#">Scroll Back</a></div>
<div class="article_list">
<ul class="article_list">
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<!-- variable number of li's, from 10s to 100s -->
</ul>
</div>
</section>
</li>
<!-- More of these lists -->
</ul>
</div>
I'll just give a subset of my css that I think is relevant:
.feed .article_list {
position: relative;
overflow: auto;
float: left;
width: 900px;
}
.feed .article_list ul {
position: relative;
width: 10000px; /** I want this to be wide, but not allow scrolling past the end*/
margin: 0;
background-color: #ffffff;
}
.feed .article_list li {
display: block;
width: 130px;
height: 150px;
position: relative;
float: left;
border-right: 2px solid #b5e8f4;
border-left: 2px solid #b5e8f4;
margin: 0 5px 0 0;
}
My javascript is:
$(document).ready(function() {
$('div.article_list').css({
'overflow' : 'hidden'
});
$('.scroll_left a').click(function() {
toScroll = $(this).parent().next();
toScroll.animate({scrollLeft: "-=135"});
return false;
});
$('.scroll_right a').click(function() {
toScroll = $(this).parent().prev();
toScroll.animate({scrollLeft: "+=135"});
return false;
});
});
So as it is, I either have to make the inner ul really wide, so users can scroll well beyond the list items, or I can restrict it but if I add too many items (dynamically, so I don't have a lot of control), then the layout breaks.
Can I somehow get that scrollable area to just be as wide as its floated contents?
Or is the only solution to set the width in javascript (less than ideal, but I can do that)?
Its the float: left on the .feed .article_list that you really don't want but I've removed it from all of them that I could.
I would move to an inline setup instead of floating:
.feed .article_list {
position: relative;
overflow: auto;
width: 100%; /* specify what ever width you want. I think 100% is proper. */
}
.feed .article_list ul {
position: relative;
overflow-x: scroll;
margin: 0;
background-color: #ffffff;
white-space: nowrap;
}
By making the overflow-x: scroll you have a permanent scroll bar (not totally necessary, it can be removed if you prefer). The white-space: nowrap Will keep the children on one line (instead of floating.)
.feed .article_list li {
display: inline-block;
// etc. etc. etc. ...
on the children display: inline-block; will let you specify height/width like a block element and keep them inline at the same time.
JsFiddle:- http://jsfiddle.net/GBtCb/
UPDATE :-
In an effort to make it cross-browser compatible make the following changes:
remove the overflow: auto from .feed .article_list
and add:
.feed
{
overflow: hidden;
}
.article_list
{
overflow: auto;
from quirksmode.com:
http://www.quirksmode.org/css/whitespace.html : white-space: nowrap is compatible IE7+.
-