So I'm trying to make some bar signals to signify different components. I want to make the bar so that it covers the whole height of the text, no matter how many lines there are. How can I make so that the bar extends from the top to the bottom of the div?
Divider with a set height:
.divider {
display: inline-block;
height: 20px;
width: 3px;
position: relative;
border-radius: 30px;
background: #0099ff;
margin-left: 35px;
}
p {
margin-left: 5px;
font-size: 20px;
color: var(--font-color);
}
<div style="display: flex; align-items: center; ">
<div class="divider"></div><p>Messages</p>
</div>
<div style="display: flex; align-items: center; margin-top: -20px; ">
<div class="divider"></div><p>Messages <br> Test</p>
</div>
Divider with height set at 100%:
.divider {
display: inline-block;
height: 100%;
width: 3px;
position: relative;
border-radius: 30px;
background: #0099ff;
margin-left: 35px;
}
p {
margin-left: 5px;
font-size: 20px;
color: var(--font-color);
}
<div style="display: flex; align-items: center; ">
<div class="divider"></div><p>Messages</p>
</div>
<div style="display: flex; align-items: center; margin-top: -20px; ">
<div class="divider"></div><p>Messages <br> google</p>
</div>
Why not just use border-left on the p itself?
p {
border-left:6px solid #0099ff;
padding-left: 15px;
margin-left: 5px;
font-size: 20px;
color: var(--font-color);
}
p {
border-left:6px solid #0099ff;
padding-left: 15px;
margin-left: 5px;
font-size: 20px;
color: var(--font-color);
}
<div style="display: flex; align-items: center; ">
<div class="divider"></div><p>Messages</p>
</div>
<div style="display: flex; align-items: center; margin-top: -20px; ">
<div class="divider"></div><p>Messages <br> Testd
asd
as<br>dsadasdas
as<br>dsadasdas
as<br>dsadasdas
as<br>dsadasdas
</p>
</div>
you should set 'divider' to <p> tag and set its class to height '100%'.
<p class="divider2">Messages <br> Test</p>
.divider2 {
height:100%;
width: 3px;
position: relative;
border-radius: 30px;
background: #0099ff;
margin-left: 35px;
}
enter link description here
Thank you.
use min-height:100% instead of height:100% in .divider
Related
I made a list to test the overflow of a div. The problem is, the overflow dont works correct:
Instead of using the overflow scroll, it goes invisible through the div?
This is my html:
<div class="modelSamples">
<div id="samplesTitle">
SAMPLES
</div>
<div class="sampleList">
<div id="samples" *ngFor="let tape of sampeList">
<div id="sampleName"> {{tape.name}} </div>
<div id="samplePlay">
<mat-icon> play_circle </mat-icon>
</div>
</div>
</div>
</div>
</div>
CSS:
.modelSamples{
overflow-y: auto;
margin-top: 10px;
margin-left: 10px;
width: 30%;
height: 60%;
background-color: rgb(191 126 235 / 29%);
z-index: 1;
border-radius: 30px;
}
#samplesTitle{
display: flex;
font-family: Oswald;
width: 100%;
justify-content: center;
margin-top: 20px;
color: white;
font-size: 2rem;
padding-bottom: 15px;
}
#samples{
display: flex;
flex-direction: row;
font-family: Oswald;
color: white;
font-size: 20px;
margin-left: 20px;
justify-content: space-between;
}
#sampleName, #samplePlay{
padding-bottom: 10px;
}
#samplePlay{
padding-right: 30px;
}
I also tried it with using max-height for .sampleList but that also dont work
I really don't know what I'm doing wrong here. I want the image inside the box to stay centered when the window shrinks. Furthermore, I would have thought that align-items: center; would work, but apparently not. The colors are only relevant for me, so I understand what's going on. I don't know if there is a solution for this either, but I hope so. And please ignore the naming and order of the individual classes, I couldn't do better ...:)
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<h20>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</h20>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
h4 and h20 are empty
You're pretty close to getting the image vertically aligned as you wanted. Try this out, and see if this works the way you would like:
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
display: flex;
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
I saw you used align-items: center; in the .insideleft CSS selector which is for aligning a container's children to the center like you want, you'll just want to make this a flexbox to make this work. To do this, simply add display: flex; to the .insideleft selector like in the example. I also removed the <h20> tag from the HTML as this is not valid or necessary.
As for the image shrinking down when the screen width is shrinked - this is because you're using percentages for the widths for all the containers and the image. If you want the image to stop shrinking after a certain point, you can add min-width: 80px; /* (this can be any number of pixels) */ to your .picture selector to make the image stop shrinking once it gets to a certain width of pixels.
Flexbox is super useful for position elements in CSS and I'd recommend looking into this more to have a better understanding. Check out this link here if you'd like an overview of the different flexbox CSS properties.
I am not 100% sure on your intent - Here I changed the class names a bit for clarity and adjusted the markup for a left-middle-right
Not a huge fan of % for padding and margin sizing myself (em feels more clear since it is based on the current font size)
Not strictly needed but I added the containing element class in a few places in CSS for clarity example: .left-pane .picture-container
.page-container {
max-width: 1600px;
text-align: center;
}
.container-box {
display: flex;
align-content: space-between;
}
.container-box .left-pane {
width: 20em;
display: flex;
align-items: center;
justify-content: center;
background-color: #FF0000;
border: 2px solid gray;
}
.left-pane .picture-container {
width: 30%;
background-color: yellow;
align-items: center; /* vertical */
align-content: center; /* horizontal */
}
.left-pane .picture-container .picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.container-box .middle-pane {
width: 70em;
background-color: #FFDDDD;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 1%;
border-left: 2px ridge #ffa54f;
}
.middle-pane .headline {
color: rgb(0, 153, 158);
font-size: 1.5em;
font-family: sans-serif;
margin-bottom: 1em;
background-color: #eeeeee;
}
.middle-pane .textpart {
margin-bottom: 0.5em;
}
.container-box .right-pane {
height: 20px;
border: 2px solid gray;
}
<div class="page-container">
<div class="container-box">
<div class="left-pane">
<div class="picture-container">
<div>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
</div>
</div>
<div class="middle-pane">
<div class="headline">Headline</div>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right-pane">
wawaeaweew
</div>
</div>
</div>
I have a problem. In my angular project I have the following code:
.portfolio-summary-container {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
}
.portfolio-summary {
display: inline-flex;
position: relative;
width: 100%;
height: 100%;
}
.portfolio-summary .section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
border: #c2c2c2 solid 1px;
}
.portfolio-summary .section-operator {
position: absolute;
left: calc(25% - 17px);
margin-top: 23px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 35px;
height: 35px;
border-radius: 50%;
border: #b9b9b9 solid 1px;
color: #808080;
font-size: 1.8rem;
background-color: white;
}
.portfolio-summary .section .price {
font-size: 1.3rem;
font-weight: bold;
}
.portfolio-summary .section .description {
font-size: 1rem;
color: #808080
}
<div class="portfolio-summary-container">
<div class="portfolio-summary" *ngIf="portfolio">
<div class="section">
<div class="price">$10.00</div>
<div class="description">AVAILABLE</div>
</div>
<div class="section-operator">+</div>
<div class="section">
<div class="price">$12.31</div>
<div class="description">TOTAL ALLOCATED </div>
</div>
<div class="section-operator">+</div>
<div class="section">
<div class="price">$0.73</div>
<div class="description">PROFIT</div>
</div>
<div class="section-operator">=</div>
<div class="section">
<div class="price">$23.04</div>
<div class="description">EQUITY</div>
</div>
</div>
</div>
But I am trying to put the <div class="section-operator">+</div> between every section, so it would look like this:
I read that I need to give the parent: position: relative;, so thats why I created the portfolio-summary-container. The container is sticking to the bottom and the inner div has the position: relative; property, but this isn't working for some reason??? How can I get the result from the photo?
You can position each operator separately. I added z-index for the operators to be in the foreground.
.portfolio-summary {
display: inline-flex;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
}
.portfolio-summary .section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
border: #c2c2c2 solid 1px;
}
.portfolio-summary .section-operator {
position: absolute;
margin-top: 23px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 35px;
height: 35px;
border-radius: 50%;
border: #b9b9b9 solid 1px;
color: #808080;
font-size: 1.8rem;
background-color: white;
z-index: 2;
}
.portfolio-summary .section .price {
font-size: 1.3rem;
font-weight: bold;
}
.portfolio-summary .section .description {
font-size: 1rem;
color: #808080
}
#op1 {
left: calc(25% - 17px);
}
#op2 {
left: calc(50% - 17px);
}
#op3 {
left: calc(75% - 17px);
}
<div class="portfolio-summary" *ngIf="portfolio">
<div class="section">
<div class="price">$10.00</div>
<div class="description">AVAILABLE</div>
</div>
<div class="section-operator" id="op1">+</div>
<div class="section">
<div class="price">$12.31</div>
<div class="description">TOTAL ALLOCATED </div>
</div>
<div class="section-operator" id="op2">+</div>
<div class="section">
<div class="price">$0.73</div>
<div class="description">PROFIT</div>
</div>
<div class="section-operator" id="op3">=</div>
<div class="section">
<div class="price">$23.04</div>
<div class="description">EQUITY</div>
</div>
</div>
I have tried to simplify my problem into the below snippet - my real project is using React but this should demonstrate the issue:
.page-container {
margin-left: 3rem;
}
.heading-tab {
height: 72px;
width: 294px;
border-top: 1px solid lightgrey;
}
.heading-text {
padding-top: 22px;
padding-bottom: 22px;
padding-left: 32px;
margin-bottom: 0px;
font-size: 16px;
font-weight: bold;
}
.row-group {
display: flex;
border-bottom: 1px solid;
justify-content: space-between;
padding-top: 0.8rem;
padding-bottom: 0.4rem;
}
.row-content {
padding: 0.25rem;
padding-right: 24px;
min-width: 200px;
width: 200px;
}
<div class="page-container">
<div class="heading-tab">
<p class="heading-text">
Heading 1
</p>
<div>
<div class="row-group">
<div class="row-content">My name is CTS and my alignment is all wrong!</div>
</div>
</div>
What I want to do is display my row-group (and it's contents) horizontally level with the heading-tab - as you can see it currently sits below but I need it to set just at the end of my heading-tab div?
Flexbox on the heading tab should work.
.page-container {
margin-left: 3rem;
}
.heading-tab {
height: 72px;
display:flex;
justify-content: space-between;
align-items:flex-start;
border-top: 1px solid lightgrey;
}
.heading-text {
padding-top: 22px;
padding-bottom: 22px;
padding-left: 32px;
margin-bottom: 0px;
font-size: 16px;
font-weight: bold;
}
.row-group {
display: flex;
border-bottom: 1px solid;
justify-content: space-between;
padding-top: 0.8rem;
padding-bottom: 0.4rem;
}
.row-content {
padding: 0.25rem;
padding-right: 24px;
min-width: 200px;
width: 200px;
}
<div class="page-container">
<div class="heading-tab">
<p class="heading-text">
Heading 1
</p>
<div>
<div class="row-group">
<div class="row-content">My name is CTS and my alignment is all wrong!</div>
</div>
</div>
I want to display images inside a container that has a colored background.
I want the background of the container is rounded, and the image is placed at the center.
Also, there is space between the border of the background and the image.
This is the goal:
img
The code so far:
.circle{
border-radius: 50%;
background: #2e374f;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
display: table-cell;
vertical-align: middle;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}
<div class="circle">
<img src="https://www.fillmurray.com/50/50" class="mx-auto d-block">
<div class="title">
TITLE
</div>
</div>
this is what I achieved so far:
img
you need to remove display: table-cell rule and additionaly you can shrink the image.
.circle{
border-radius: 50%;
background: #2e374f;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 150px;
width: 150px;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}
.img {
max-width: 50%;
max-height: 50%;
}
<div class="circle">
<img src="https://picsum.photos/100/100?grayscale" class="mx-auto d-block img">
<div class="title">
TITLE
</div>
</div>
Please check.
.container-box {
width: 400px;
height: 400px;
background-color: black;
}
.container-circle {
display:inline-block;
margin: 50px;
width: 300px;
height: 300px;
border-radius: 150px;
background-color: gray;
}
.image {
background: url(https://upload.wikimedia.org/wikipedia/commons/c/ce/Font_Awesome_5_solid_arrow-circle-right.svg);
width: 100px;
height: 100px;
display: inline-block;
margin: 100px;
}
<div class="container-box">
<div class="container-circle">
<div class="image">
</div>
</div>
</div>
`
If I see correctly you want the image to be round and not the container. In this case this should help you out:
.circle img {
border-radius: 50%;
max-width: 100%;
}
.circle{
background: #2e374f;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
height:100px;
width: 100px;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}
<div class="circle">
<img src="https://www.fillmurray.com/50/50" class="mx-auto d-block">
<div class="title">
TITLE
</div>
</div>