This question already has answers here:
Is a see-through child div possible?
(5 answers)
How to show an animation that is hidden behind a colored div using a "reveal" div on the surface
(5 answers)
Closed 2 years ago.
I want to make a child element be able to see through its parent, so that the background image is visible inside the child but not the parent element, as in the picture below
Is that possible with CSS or with what else ?
As far as I know, you cant subtract one element from another to create this effect, you have to fake it. Consider the white strip as 3 elements sitting next to each other. The outer ones have a white fill, and the center is transparent. These 3 elements sit inside a wrapper that has a white border (to create the white edges). This effect is demonstrated in the example below.
img {
width: 100%;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
border: 5px solid white;
}
.row .col {
display: inline-block;
height: 100%;
background-color: white;
width: 100%;
}
.row .col.m {
background-color: transparent;
width: 500px;
}
.row .col span {
color: white;
text-align: center;
}
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSfz6VkKDw0b3AacQg2PhSq8BpHf1z8Ngg-iYt_1Qqu5cR6Q3_Z&usqp=CAU">
<div class="center row">
<div class="l col"></div>
<div class="m col">
<span class="center"> Welcome back, <br> user1! </span>
</div>
<div class="r col"></div>
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 months ago.
Im trying to center the div "input" below the div "InputBelow" by using "flex-direction: column".
However when I try to use it, it breaks the "justify-content; center".
I want to both center the main div "border" in the middle of the screen, while aligning the other 2 elements inside of it.
.border {
height: 300px;
width: 700px;
margin: auto;
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
border: 3px solid;
border-radius: 45px;
border-color: black;
display: flex;
justify-content: center;
flex-direction: column;
/* If I remove this, justify content works fine. If I add it, justify-content just stops working */
}
.calcText {
color: black;
font-size: 44px;
margin: 35px;
}
.value {
height: 10px;
width: 50px;
}
<div class="border">
<div class="calcText">Input Below</div>
<input class="value" type="text">
</div>
Thanks to Amaury for the solution. For some reason I thought aling-items was for vertical alignment and justify-content for horizontal alignment.
Turns out I had to remove justify content.
This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 1 year ago.
I have a text over many lines. Example:
Can the text be adapted to the div?
In this example, after the word "text" there is a space with color blue. In CSS there is a method to avoid the blue space after the word "text"?
If I have several texts with different lengths, is there a way to generalize this behavior?
.box {
border: 1px solid red;
width: 200px;
position: relative;
padding-top: 40px;
}
.label {
position: absolute;
top: -10px;
background-color: blue;
}
<h1>My First Heading</h1>
<div class="box">
I'm a box.
<div class="label">
I'm a label without a text wrapped.
</div>
</div>
To avoid space after text and align it property to both side, use text-align css property.
.box {
border: 1px solid red;
width: 200px;
position: relative;
padding-top: 40px;
}
.label {
position: absolute;
top: -10px;
background-color: blue;
text-align: justify;
}
<h1>My First Heading</h1>
<div class="box">
I'm a box.
<div class="label">
I'm a label without a text wrapped.
</div>
</div>
you could use a margin-right: <unit of measument>; in order to remove the excess blue though this would not be very responsive if the size of that box is going to change.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
I have this code:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
The div elements with text in them keep going to the bottom of the parent div. What is the reason for this?
Because for inline elements the default vertical alignment is baseline. Set it to something like top or middle instead:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
vertical-align:top;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
While I can't fully explain why the div elements with text drop to the bottom, I found that you can solve this by adding the property:
vertical-align: top;
to the .sibling class.
In order to understand why the divs go below, let's talk about the display property you have mentioned for the sibling.
.sibling {
display: inline-block;
}
From the name, we can understand that display:inline-block declaration shows properties of both block and inline level elements. In order words its an inline element who's width and height can be set or it's a block element which doesn't start off from a new line.
In your code, you have mentioned inline-block so they don't occupy a single block rather all div's are displayed on the same line somewhat similar to what happens when you apply float. Here, the div won't occupy the whole line so when we resize the browser, it tries to fits in all the div's which could be fit into that single line.
Hope this makes sense to you.
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 4 years ago.
When content in a box wraps, the width of that box extends to fill up all available space. Is there a way to have the width of the box be its "effective visible size"?
Here's code and a codepen to try:
div {
display: flex;
align-items: center;
justify-content: center;
width: 17rem;
}
span {
border-bottom: 1px solid #444;
text-align: center;
font-size:29px;
}
<div>
<span>
Helloworld this willwrap
</span>
</div>
https://codepen.io/rasteiner/pen/aXKwdZ?editors=1100#0
I'd like to have the border-bottom be only as wide as the widest text line.
Using a <br> tag is not an option.
I could set width: min-content on the span, but that would make the text wrap more than necessary.
In your js fiddle just give you span a width inside of the div.
<div>
<div class="myClass">
<span>
Hello world this will wrap
</span>
<div>
</div>
and here is the css
body {
font-size: 3rem;
}
.myClass {
height: 16rem;
width: 30%;
background-color: #dedede;
display: flex;
align-items: center;
justify-content: center;
margin: 2rem;
}
.myClass span {
width: 50%;
border-bottom: 1px solid #444;
text-align: center;
}
This question already has answers here:
Align DIV's to bottom or baseline
(11 answers)
Closed 3 years ago.
I'm trying to make a div contain inside another div using absolute however when I add a hundred percent height and width it does it the bodys size rather than 100% height and width of the div that its contained in, therefor I can't position the div at the bottom of the div it's contained in.
Does anybody know a solution for the problem I'm facing here.
.row {
width: 80%;
max-width: 1425px;
margin: 0 auto;
padding: 50px 0px;
display: flex;
}
.column {
flex: 1;
}
.halves {
display: flex;
justify-content: space-between;
}
.halves .column {
width: 50%;
}
.p1 {
height: 600px;
}
.sand {
background-color: #e4c8b8
}
img {
max-width: 100%;
max-height: 100%;
}
.info {
position: absoulute;
width: 100%;
height: 100;
bottom: 10px;
right: 10px
}
<div class="row halves">
<div class="column sand p1">
<img src="https://imgur.com/kgbkNDy.png" />
<div class="info">
<h3>Project one</h3>
</div>
</div>
</div>
Add position: relative; to the element that you want to dictate the sizing.