I currently have this code
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
What I want to achieve is below (image). As you can see, I would like the images to be closer to each other.
Below is my sad attempt of trying to achieve the result
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 140px;
position: relative;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
For specific reasons, I cannot crop the images
Here is the fiddle: https://jsfiddle.net/bhz3kLfj/
Use image as background like this.
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 150px;
height: 200px;
position: relative;
background-size: 200px auto;
background-repeat: no-repeat;
background-position: center;
}
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png')"></div>
<div class="shirt-container" style="background-image:url('http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png')"></div>
</div>
You can use object-fit: cover to crop the images from left and right at the width you want (there the images are 225px wide, so let's make them at a width of 170px to remove most of the blanks left and right)
See Fiddle
Here's my solution:
div {
background-color: indigo;
}
.shirt-container img {
height: 225px;
position: absolute;
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
}
.shirt-container {
width: 160px;
height: 225px;
position: relative;
overflow: hidden;
}
<div class="all-shirts-wrapper">
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png"></div>
<div class="shirt-container"><img src="http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png"></div>
</div>
You could try adding the images as a background to each div. That may allow you to eliminate the white space to the right and left of each image.
<div class="all-shirts-wrapper">
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-classic-short-sleeve-tee.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_adult-pullover-hoodie.png)"></div>
<div class="shirt-container" style="background-image: url(http://awsdevelopment.tzilla.com/artwork/merged/efda3758-f8b5-4d71-8a91-5240dd64aef6-out_womens-premium-semi-fitted-v-neck.png)"></div>
</div>
div {
background-color: indigo;
}
.shirt-container {background-size:contain; background-repeat: no-repeat;}
.shirt-container img {
height: 225px;
position: relative;
z-index: 3;
}
.all-shirts-wrapper {
display: flex;
/* width: 41px; */
height: 200px;
}
.shirt-container {
width: 140px;
position: relative;
}
https://jsfiddle.net/uxwnkets/
Related
I have a problem with the following snippet: I need to make it work in Internet Explorer 11. In Chrome, Firefox and Edge it looks like it should.
There are 3 elements (red, yellow, green), beneeth each other. Another blue element with 50% of the height is on top of the others.
This is how it should look like:
However Internet Explorer 11 puts the blue element on the right side beneeth the others and not on top of them. Can you guys help me with that problem?
This is how it looks in IE11 - it should not look like this
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
height: 30%;
align-self: center;
position: absolute;
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
The problem
The issue is that you are positioning .inner absolutely but not giving it a specific position. This means that where the browser first renders it is where it will output on screen. It seems IE handles this differently to other browsers which is why you are getting the discrepancy.
The solution
The following modifications would be required:
Add left: 0; to .inner to align it to the left of .flex-wrapper
Add top: 50%; to .inner to move it down 50% of .flex-wrapper and transform: translateY(-50%); to move it back up by 50% of its height
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
height: 30%;
align-self: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
I would made some changes.
First:
- Position .inner
- Make it full height thanks to its position
- Make it display: flex
.inner {
position: absolute;
top: 0; bottom: 0; left: 0;
display: flex;
}
Second:
- Give a height to .inner-element
- Center it
.inner-element {
height: 30%;
align-self: center;
}
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
/*height: 30%; No need for that anymore */
/*align-self: center; No need for that anymore */
position: absolute;
top: 0;
bottom: 0;
left: 0; /* Now it's in the right position */
display: flex; /* To be able to align the inner-element */
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
.inner-element {
height: 30%; /* Make it the right height */
align-self: center; /* Center it */
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
I'm trying to create a specific layout in which:
Two images have to be one to the side of the other, filling all the width
Images height must adapt to create a squared image
In the middle of both images, an icon or text will be placed, as linking the images
The external container doesn't have a fixed height nor width
This is a representation of what I'm looking for:
Side to side images with one overlapping in the center
This is what I've managed to do, but it has the following problems:
Depending on the size of the images, the squares take a different size
The middle icon doesn't go to the middle...
.main_container_1 {
position: absolute;
width: 100%;
height: 600px;
background-color:lime;
margin: 10px;
padding: 10px;
}
.row {
width: 100%;
background-color: yellow;
display:flex
}
.image_cell {
width:50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.image_cell img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
.text-cell {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background:white;
}
.inner {
width: 50px;
height: 50px;
background-color:red;
}
<div class="main_container_1">
<div class="row">
<div class="image_cell">
<img src="http://placehold.it/450x200">
</div>
<div class="image_cell">
<img src="http://placehold.it/200x200">
</div>
<div class="text-cell">
<div class="inner">
text
</div>
</div>
</div>
You basically need to make your .row's height to be half its width (that would give you space for two squares). To do that you need to use the padding trick.
.row {
width: 100%;
padding-top: 50%;
background-color: yellow;
position: relative;
}
and then you'll need to position your images absolutely since you're faking their parent's height with padding.
.image_cell {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
.image_cell:nth-child(1) {
left: 0;
}
.image_cell:nth-child(2) {
right: 0;
}
and finally you can position your .text-cell in the center using transform like this (you must make sure to put position: relative to the parent container you want to position it relative to, which is .row in this case):
.text-cell {
position: absolute;
background: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Here's the final result:
.main_container_1 {
position: absolute;
width: 100%;
height: 600px;
background-color: lime;
margin: 10px;
padding: 10px;
}
.row {
width: 100%;
padding-top: 50%;
background-color: yellow;
position: relative;
}
.image_cell {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
.image_cell:nth-child(1) {
left: 0;
}
.image_cell:nth-child(2) {
right: 0;
}
.image_cell img {
width: 100%;
height: 100%
}
.text-cell {
position: absolute;
background: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.inner {
width: 50px;
height: 50px;
background-color: red;
}
<div class="main_container_1">
<div class="row">
<div class="image_cell">
<img src="http://placehold.it/450x200">
</div>
<div class="image_cell">
<img src="http://placehold.it/200x200">
</div>
<div class="text-cell">
<div class="inner">
text
</div>
</div>
</div>
One more thing: you probably want to look into using background images instead to maintain aspect ratio.
In order to solve this, I've added a .square class to maintain the aspect ratio. The other thing I did is use justify-content and align-items on the div surrounding the cells in order to center the text cell.
* {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
color: #fff;
padding: 10px;
background-color: #333;
display: inline-block;
}
.container .cells {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container .cells .image {
flex: 0 0 50%;
background: linear-gradient(
135deg,
rgb(252, 223, 138) 0%,
rgb(243, 131, 129) 100%
);
}
.container .cells .image img {
width: 100%;
height: 100%;
}
.container .cells .text {
position: absolute;
width: 60px;
line-height: 60px;
background-color: #5e2563;
text-align: center;
}
.container p {
margin-top: 10px;
}
.square {
position: relative;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.square .content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="container">
<div class="cells">
<div class="image square">
<div class="content"></div>
</div>
<div class="image square">
<div class="content"></div>
</div>
<div class="text">
middle
</div>
</div>
<p>This is a variable width and height container</p>
</div>
another newbie question here. Learning CSS. I am trying to do something that I thought would be very simple, but have not managed to find the way to do it, or a suitable answer to the question.
I have a simple project with a header, some content and a footer. The content has a div with a white border and an image inside it. I would like the div to be as wide as the image and no wider. I have provisionally set the width to 430px, but I would like to know the code to set the width to whatever the width of the image is.
Code
html
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
border: 1px solid white;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Add display: inline-block; to your .imagewrap without setting it's width.
.imagewrap {
display: inline-block;
}
If you want a div with an image to be centered, add another div around them with:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
But do you really need that div around an image? The border might be added to an image itself without additional div.
If you want a border on the image, add it there
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
/*border: 1px solid white;
width: 430px;
display: inline-block;
line-height: 0;
margin: 0 auto;*/
top: 50%;
transform: translateY(-50%);
text-align: center; /*center image horizontally*/
}
#imagewrap img {
border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://unsplash.it/100/100" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Check out this fidde:
https://jsfiddle.net/56myv9g2/1/
#imagewrap img{
display:block;
}
#imagewrap{
position: relative;
border: 1px solid white;
display: inline-block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#container {
height: 80%;
width: 100vw;
text-align:center;
background-color: red;
}
Also, you could just give the border to the image tag all along without the div
If you set display: inline-block, then you need to add text-align: center to container
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
text-align: center;
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: relative;
border: 1px solid white;
width: 430px;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
I am trying to achieve this
Image 1 and 3 would be slightly hidden behind image 2.
I have this html
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
Simple setup, single containing div with three sub divs each holding an image (identical native size).
Current CSS
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
So what I have done is aligned the images along the x axis using flex. I have then given the center image a position of absolute so that the z-index is taken into account. However this is where I run into the issue and the images are not laying out like the above example.
Here is a example if it helps
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;
}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
I feel like I may be close and will keep trying but any help will be great!
Thanks
Tom
Did you think about something like this:
.imageBanner {
display: block;
position: relative;
margin: 0 auto;
width:100%;
max-width: 1024px;
}
.imageLeft {
width: 40%;
display: block;
position: absolute;
left: 0;
top: 30px;
z-index: -1;
}
.imageCentre {
width: 60%;
display: block;
position: relative;
z-index: 1;
margin: 0 auto;
}
.imageRight {
width: 40%;
display: block;
position: absolute;
right: 0;
top: 30px;
z-index: -1;
}
img {
width: 100%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
Left image's left indent you can set by change left: attribute, and right image's right indent change right:
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
img {
border: 5px solid red;
width: 100%;
height: auto;
}
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
img {
border: 5px solid red;
width: 100%;
height: auto;
}
.imageCentre {
width: 100%;
z-index: 900;
}
.imageLeft {
position: relative;
left: 5%;
}
.imageRight {
position: relative;
right: 5%;
}
.imageCentre {
width: 100%;
}
as shown in the fiddle: https://jsfiddle.net/fce2n85s/1/
nothing change in your code just add this css in your css code. if it's works answer me !
.imageBanner img {
border:solid 5px #000
}
.imageLeft {
text-align:right;
margin-right:-5px
}
Divs inside Div (id="icons") not starting new line (like Windows 7 icons)
I want the divs inside div with id="icons" don't start a new line it flows vertically. Why not start new line?
JsFiddle
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
body {
margin:0;
padding:0;
}
#icons {
position: fixed;
background: red;
width: 100%;
height: 100%;
overflow: auto;
}
#icons1 {
position: relative;
background: blue;
width: 20%;
height: 25%;
}
#icons2 {
position: relative;
background: yellow;
width: 20%;
height: 25%;
}
#icons3 {
position: relative;
background: lime;
width: 20%;
height: 25%;
}
#icons4 {
position: relative;
background: pink;
width: 20%;
height: 25%;
}
#icons5 {
position: relative;
background: purple;
width: 20%;
height: 25%;
}
#icons6 {
position: relative;
background: blue;
width: 20%;
height: 25%;
}
#icons7 {
position: relative;
background: yellow;
width: 20%;
height: 25%;
}
#icons8 {
position: relative;
background: lime;
width: 20%;
height: 25%;
}
#icons9 {
position: relative;
background: pink;
width: 20%;
height: 25%;
}
#icons10 {
position: relative;
background: purple;
width: 20%;
height: 25%;
}
<div id="desktop">
<div id="icons">
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
</div>
</div>
A DIV by default is a display type of 'block' and therefore forces in the line break.
You can get around this by using display: inline-block; in your CSS like so:
#icons1 {
position: relative;
background: blue;
width: 20%;
height: 25%;
display: inline-block;
}
#icons2 {
position: relative;
background: blue;
width: 20%;
height: 25%;
display: inline-block;
}
/* etc */
You can add this in at the higher level (Icons) but if you're trying to do Windows style then you probably want more control over what and where breaks occur.
(hopefully I interpreted your question correctly!)
Change the display type on those icon divs.
#icons div {
display:inline-block;
margin:5px;
}
http://jsfiddle.net/0y7ktkd2/1/