I'm currently working a lot with flexboxes and have some trouble regarding the code below:
Why isn't the image being treated like a flexbox item
Why are the text items on the right, which are in another flexbox, spanning over the height of their div
* {
font-size: 11pt;
}
.categories-area {
margin-top: 80px;
display: flex;
justify-content: space-between;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 83.59375%;
height: 218px;
}
.category {
position: relative;
width: 20vw;
min-width: 230px;
max-width: 282px;
height: 100%;
}
.category-title {
position: absolute;
width: 6vw;
min-width: 94px;
max-width: 106px;
height: 195px;
background-color: rgb(51, 112, 177);
z-index: -1;
}
.category-content {
display: flex;
align-items: center;
justify-content: space-around;
position: absolute;
top: 26px;
left: 2.943262411%;
width: 20vw;
min-width: 192px;
max-width: 273px;
height: 191px;
border: 1pt solid rgb(51, 51, 51);
background-color: rgb(255, 255, 255);
}
.text-content {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 125px;
}
<body>
<div class="categories-area">
<div class="category">
<div class="category-title">
<div class="wrapper" style="width: 100%; height: 26px; font-size: 12pt;">
<span>something</span>
</div>
</div>
<div class="category-content">
<div style="position: relative; width: 132px; height: 100%;">
<a href="librarymain.html" title="whatever">
<img src="resources/buchcover.jpg" style="width: 87.179487179%;" />
</a>
</div>
<div class="text-content">
<span>
<img src="resources/kleinerPfeil.svg" style=" height: 1em;"/>something
</span>
<br />
<span>
<img src="resources/kleinerPfeil.svg" style=" height: 1em;"/>something else
</span>
<br />
<span>
<img src="resources/kleinerPfeil.svg" style=" height: 1em;"/>even more
</span>
<br />
<span>
<img src="resources/kleinerPfeil.svg" style=" height: 1em;"/>a little more
</span>
<br />
<span>
<img src="resources/kleinerPfeil.svg" style=" height: 1em;"/>the last bit
</span>
</div>
</div>
</div>
</div>
</body>
The images in front of the text are irrelevant, the buchcover.jpg is supposed to be a bookcover but for testing purposes anything should work.
Thanks in advance
What are you trying to accomplish here?
Your image is inside anchor tag and you the parent is displayed flex you need to target the <a ... >img</a> not the image.
The text is spanning because the hight is set to number so where the content suppose to wrap while the parent .text-content is setup to column without wrap even. I changed that to flex-flow: row wrap; change that to column and see the difference. You need to fix all your width and hight numbers.
Check My code:
body {
font-size: 11pt;
}
img {
display: block;
}
.categories-area {
margin-top: 80px;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 83.59375%;
height: 218px;
}
.category {
display: flex;
flex-flow: row;
justify-content: space-between;
position: relative;
width: 20vw;
min-width: 230px;
max-width: 282px;
height: 100%;
}
.category-title {
position: absolute;
width: 6vw;
min-width: 94px;
max-width: 106px;
height: 195px;
background-color: rgb(51, 112, 177);
z-index: -1;
}
.category-content {
display: flex;
align-items: center;
justify-content: space-around;
position: absolute;
top: 26px;
left: 2.943262411%;
width: 20vw;
min-width: 192px;
max-width: 273px;
height: 191px;
border: 1pt solid rgb(51, 51, 51);
background-color: rgb(255, 255, 255);
}
.text-content {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
height: 125px;
}
.text-content>span {
flex-basis: 100%;
}
<div class="categories-area">
<div class="category">
<div class="category-title">
<div class="wrapper" style="width: 100%; height: 26px; font-size: 12pt;">
<span>something</span>
</div>
</div>
<div class="category-content">
<div style="position: relative; width: 132px; height: 100%;">
<a href="librarymain.html" title="whatever">
<img src="http://via.placeholder.com/80/0f0" style="width: 87.179487179%;" />
</a>
</div>
<div class="text-content">
<span>
<img src="http://via.placeholder.com/10/0f0" style="height: 1em;"/>something
</span>
<span>
<img src="http://via.placeholder.com/10/0f0" style="height: 1em;"/>something else
</span>
<span>
<img src="http://via.placeholder.com/10/0f0" style="height: 1em;"/>even more
</span>
<span>
<img src="http://via.placeholder.com/10/0f0" style="height: 1em;"/>a little more
</span>
<span>
<img src="http://via.placeholder.com/10/0f0" style="height: 1em;"/>the last bit
</span>
</div>
</div>
</div>
</div>
Related
I have a circuit block like a diagram as a background image.
And I am in the need to place separate images over the respective places.
Current Result:
.container {
background-image: url('https://i.stack.imgur.com/AfygH.png');
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.coil, .evaporator, .compressor {
display: flex;
align-items: center;
justify-content: center;
}
.evaporator {
width: 80px;
height: 80px;
margin-top: 70px;
margin-left: 90px;
}
.coil {
width: 150px;
height: 150px;
}
.compressor {
width: 80px;
height: 80px;
margin-bottom: 40px;
}
<div class="container">
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
Expected Result:
The expected result would be like,
The code that tried,
.coil {
position: absolute;
left: 25%;
top: 55%;
}
But it doesn't give the exact expected result. Using of position:absolute doesn't give responsive design.
Could you please help me in achieving the result in dynamic way like using grid or flexbox in CSS? Thanks in advance.
Try this:
.container {
background-image: url('https://i.stack.imgur.com/AfygH.png');
height: 400px;
background-position: center;
background-size: contain;
width: 700px;
}
.coil {
position: absolute;
top: 204px;
left: 180px;
zoom: 101%; }
.evaporator {
position: absolute;
top: 26px;
left: 320px;
zoom: 121%;
}
.compressor {
position: absolute;
top: 220px;
left: 422px;
zoom: 100%;
}
<div class="container">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>;
As an option. But, keep in mind, this is a construction with hard-coded coordinates. When you change the size of the container with the background image, you will also need to change the positions of the nested elements.
<style>
.container {
background-image: url("https://i.stack.imgur.com/AfygH.png");
width: 500px;
height: 500px;
background-position: center;
background-size: cover;
border: 2px solid crimson;
margin: auto;
position: relative;
}
.container div {
border: 2px solid orange;
position: absolute;
}
.coil {
top: 256px;
left: 36px;
}
.evaporator {
top: 40px;
left: 296px;
}
.compressor {
top: 272px;
left: 333px;
}
</style>
<div class="container">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
Maybe so?
<style>
.container {
background-image: url("https://i.stack.imgur.com/AfygH.png");
width: 500px;
height: 500px;
background-position: center;
background-size: cover;
border: 2px solid crimson;
margin: auto;
display: flex;
align-items: center;
/* position: relative; */
}
.container div {
border: 2px solid orange;
/* position: absolute; */
}
.coil {
margin-top: 111px;
margin-left: 33px;
}
.evaporator {
margin-top: -343px;
margin-left: 140px;
}
.compressor {
margin-top: 170px;
margin-left: -49px;
}
</style>
<div class="container">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
Here is the solution on flexbox instead of making it position:absolute as requested.
.container {
background-image: url('https://i.stack.imgur.com/AfygH.png');
height: 400px;
background-position: center;
background-size: contain;
width: 700px;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.coil, .evaporator, .compressor {
display: flex;
align-items: center;
justify-content: center;
}
.evaporator {
width: 80px;
height: 80px;
margin-top: 23px;
margin-left: 140px
}
.coil {
width: 150px;
height: 150px;
margin-top: 60px;
margin-right: 231px;
}
.compressor {
width: 80px;
height: 80px;
margin-bottom: 88px;
margin-left: 218px;
margin-top: -90px;
}
<div class="container">
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
Because it's bitmap image, I would suggest to go back to the real size of each element, and to position them regarding their real size. All that in pixels. If really needs resizing outer container, more or less same can be done taking percentage of each element regarding the big one and their position left top same kind of calculation...
.container {}
.circuit {
position: relative;
width: 100%;
height: 100%;
}
.circuit>img {
/* 688 x 401 */
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 688px;
height: 401px;
}
.coil {
/* 120 x 90 */
position: absolute;
z-index: 1;
width: 120px;
height: 90px;
left: 150px;
top: 199px;
}
.evaporator {
/* 80 x 70 */
position: absolute;
z-index: 1;
left: 375px;
top: 25px;
width: 80px;
height: 70px;
}
.compressor {
/* 90 x 120 */
position: absolute;
z-index: 1;
left: 405px;
top: 213px;
width: 90px;
height: 120px;
}
<div class="container">
<div class="circuit">
<img src="https://i.stack.imgur.com/AfygH.png" alt="circuit" />
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
</div>
I don't understand where I made a mistake, I want this round logo on the right. and I want the header below, but where's my fault?
If we briefly summarize the event, as shown in the pictures ..
<div class="video-clip mb-5">
<div class="clip-pic">
<img src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" alt="" width="">
</div>
<div class="clip-detail mt-2">
<div class="clip-logo">
<img src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" alt="" class="img-circle">
</div>
<div class="clip-desc">
<div class="clip-category">Category Title</div>
<div class="clip-title">Clip Title</div>
</div>
</div>
</div>
.video-clip {
width: 305px;
height: 265px;
}
.clip-pic img {
width: 305px;
height: 180px;
}
.clip-detail {
background-color: black;
display: flex;
margin: 0;
padding: 0;
}
.clip-logo {
width: 80px;
height: 80px;
overflow: hidden;
border: 5px solid #0b75c9;
position: relative;
top: -50px;
max-width: 100%;
max-height: 100%;
border-radius: 50%;
}
.clip-desc {
flex: 1;
min-width: 1px;
position: relative;
}
the image i want
i created
I made a quick remake. I hope this can help you.
.card {
width: 300px;
display: flex;
flex-direction: column;
}
.card-pic img {
width: 100%;
height: 100%;
max-height: 350px;
object-fit: cover;
}
.card-info-logo {
position: absolute;
right: 22px;
top: -22px;
}
.card-info-logo img {
width: 40px;
border-radius: 50%;
border: 4px solid gray;
}
.card-info {
position: relative;
background-color: black;
height: 100px;
padding: 15px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .title {
color: lightgray;
font-size: 14px;
}
.card-info .subtitle {
color: lightgray;
font-size: 18px;
padding-bottom: 10px;
}
.card-info-bottom {
border-top: solid 1px white;
padding-top: 10px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views{
color: lightgray;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: lightgray;
font-size: 12px;
}
<div class="card">
<div class="card-pic">
<img src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" alt="">
</div>
<div class="card-info">
<div class="card-info-logo">
<img src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg">
</div>
<div class="card-info-top">
<div class="title">This is a title</div>
<div class="subtitle">This is a subtitle</div>
</div>
<div class="card-info-bottom">
<div class="views">
VIEWS 10K
</div>
<div class="date">
yesterday
</div>
</div>
</div>
</div>
I am trying to build a simple page where I was wondering how do I make the circle with the paragraph comes on top of the rectangle so that the rectangle and the text will appear in the front(on the top)? thank you so much for your help,
.dot {
height: 200px;
width: 200px;
background-color: lightgrey;
border-radius: 50%;
display: inline-block;
margin-bottom: -5rem;
}
.rectangle {
height: 200px;
width: 850px;
background-color: #555;
}
.rectangle-vertical-1 {
height: 180px;
width: 120px;
background-color: lightgrey;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-2 {
height: 180px;
width: 120px;
background-color: #a3a3a3;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-3 {
height: 180px;
width: 120px;
background-color: #4d4c4c;
display: inline-block;
margin: 6%;
}
.rectangle-vertical-container {
position: relative;
margin-top: -9rem;
"}
<div class="container">
<div style="position: relative;">
<div style="text-align:center">
<div class="dot">
<h4>Melrose</h4>
<p>abc</p>
</div>
<div>
<div style="text-align:center">
<div class="rectangle">
<img class="img" src="https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg" alt=""> </div>
<div class="rectangle-vertical-container">
<span class="rectangle-vertical-1"></span>
</div>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/eze5x9t9/
HTML:
<div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;">
<div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
<span style="font-size: 35px;display: table-cell;vertical-align: middle;">My Name</span>
</div>
<div style="width: 40%; overflow: hidden; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
<span style="font-size: 20px;display: table-cell;vertical-align: middle;">My Job</span>
</div>
</div>
Screenshot:
Why is there a green space at the end? The fiddle was done in Chrome.
It's a common BUG for the WebKit browsers, no fixing actually.
reference:
https://lists.webkit.org/pipermail/webkit-unassigned/2006-January/002684.html
https://css-tricks.com/percentage-bugs-in-webkit/
http://www.screenr.com/pvB8
Somehow in Chrome the outer div is exactly one pixel wider than the contained divs.
You could however solve that by not using display: table; and display: table-cell; (if you only did that to make the vertical centering work) like so:
<div style="width: 100%; height: 65px; background: #00CC00;">
<div style="width: 60%; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center;">
<span style="font-size: 35px; line-height: 65px;">My Name</span>
</div>
<div style="width: 40%; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center;">
<span style="font-size: 20px; line-height: 65px;">My Job</span>
</div>
</div>
Edit: A second code snippet showcasing the standard method for vertical centering using absolute positioning and transform: translate:
.outer {
height: 65px;
background-color: #00cc00;
display: flex;
}
.inner {
width: 60%;
float: left;
background: #3074A3;
color: #EDEDED;
height: 65px;
text-align: center;
font-size: 35px;
position: relative;
}
.inner + .inner {
width: 40%;
background: #266996;
font-size: 20px;
}
.inner > span {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<span>My Name</span>
</div>
<div class="inner">
<span>My Job<br />Good job!</span>
</div>
</div>
For some reason, attribute vertical-align: middle; is not applied to span tag. Here is the code:
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle">
50%
</span>
</div>
</div>
Since you know the height of the outer div is 60px, you can set the line-height of the span to match it:
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle;line-height: 60px;">
50%
</span>
</div>
</div>
You could use line-height to center your text vertically, in this case use line-height: 60px
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; line-height: 60px;">
50%
</span>
</div>
</div>