I assume this has been posted before and I apologize in advance, I'm afraid I didn't find the solution.
My issue: I have a design with two divs, one must be transparent on top of the other. I was able to achieve that with div 1: position relative and div 2: position absolute, z-index: 1. However the page must be responsive and I cannot change the size of the absolute div.
Somehow, I need to find a way to make the transparent absolute div responsive with media query.
Basically, this is the desired design:
.main {
display: flex;
}
.content {
height: 200px;
padding-left: 36px;
padding-right: 100px;
position: relative;
flex: 1;
background-color: lightblue;
}
.visual {
width: 200px;
height: 300px;
position: absolute;
z-index: 1;
right: 24px;
background-color:rgba(106, 132, 226, 0.1);
<div class="main">
<div class="content">
<h1 id="header">title</h1>
</header>
<div class="description">
<h3 id="description-text">Text</h3>
</div>
</div>
<div class="visual">
<h3>Transparent div</h3>
</div>
</div>
</div>
change width to percent instead of px
and for media query, you must set width for each query.
* {
border: 1px solid red;
}
.main {
display: flex;
}
.content {
height: 200px;
padding-left: 36px;
padding-right: 100px;
position: relative;
flex: 1;
background-color: lightblue;
}
.visual {
width: 700px;
height: 300px;
position: absolute;
z-index: 1;
right: 24px;
background-color:rgba(106, 132, 226, 0.1);
}
#media only screen and (max-width: 600px) {
.visual {
width: 400px;
}
}
<div class="main">
<div class="content">
<h1 id="header">title</h1>
</header>
<div class="description">
<h3 id="description-text">Text</h3>
</div>
<div class="visual">
<h3>Transparent div</h3>
</div>
</div>
Related
I want to recreate the following structure:
With black is div container and inside the container on the left there will be text and on the right i need an image bigger than the container.
I tried to do this by grids but things got funky real quick.
As it seems to be important that the containing div maintains the dimensions (as shown by its border), this snippet adds in the actual image as a background on a pseudo element that is absolutely positioned.
That way the protruding bit of image does not alter the container div dimensions.
Here's a simple snippet using a grid to position the left and right sides. Of course you will want to alter proportions to suit your particular case, add styling to the leftside and so on:
.container {
display: grid;
grid-template-columns: 3fr 2fr;
width: 50vw;
height: auto;
margin-top: 10vh;
border: solid 2px black;
}
.leftside {
padding: 1vw;
}
.rightside {
position: relative;
width: 100%;
height: 100%;
}
.rightside::before {
content: '';
background-color: pink;
background-image: url(https://picsum.photos/id/1015/500/200);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 50%;
height: 140%;
bottom: 0;
left: 25%;
position: absolute;
}
<div class="container">
<div class="leftside">
<h2>Heading</h2>
<div>text1</div>
<div>text2</div>
</div>
<div class="rightside"></div>
</div>
go with the flexbox.
.main-container{
display:flex;
display: flex;
justify-content: space-evenly;
border:1px solid black;
margin:30px;
height:300px;
padding:10px;
}
.image{
width:50vw;
position:relative;
}
img{
width:100%;
height:150%;
width: 100%;
height: 150%;
top: -50%;
position: absolute;
}
.text{
display:flex;
align-items:center;
}
<div class="main-container">
<div class="text">
<p>Somthing Somthing</p>
</div>
<div class="image">
<img src="https://loremflickr.com/640/360" />
</div>
</div>
Here you go:
.background {
padding: 25px;
display: flex;
border: 1px solid black;
height: 150px;
position: relative;
margin-top: 50px;
}
.text {
border: 1px solid green;
width: 50%;
padding: 10px;
}
.img {
text-align: center;
width: 50%;
display: flex;
justify-content: center;
}
.img>div {
border: 1px solid blue;
width: fit-content;
padding: 10px;
height: 200px;
position: absolute;
bottom: 25px;
}
<div class="background">
<div class="text">
<p>
text1
</p>
<p>
text2
</p>
<button>
Click me
</button>
</div>
<div class="img">
<div>
me img
</div>
</div>
</div>
Hope this helps
I want to set an image as the border of my div's
The main rule is: border should be outside the box and not increasing the size of a box. Also note that div's (items) have the same width, but not the same height.
The result i want to see: https://dc579.4shared.com/img/JjmymoBWiq/s23/17d090e2630/result
Border image: https://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1
.container {
display: flex;
justify-content: space-around;
}
.product1 {
width: 200px;
height: 500px;
background-color: blue;
}
.product2 {
width: 200px;
height: 550px;
background-color: green;
}
.product3 {
width: 200px;
height: 520px;
background-color: red;
}
.item {
border: 20px;
border-image: url("https://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1")
}
<div class="container">
<div class="product1 item">
123
</div>
<div class="product2 item">
123
</div>
<div class="product3 item">
123
</div>
</div>
I think you have to specifiy the color and mode as well:
.item{
border: 20px solid #555;
...
}
Might work might not, I'm not not a web developer but have played with it and this might solve it
Probably, the border-image is not ideal for you in this case.
I created an alternative way to achieve the look you want.
Essentially, I added a <span>NEW</span> element with absolute positioning inside each .item element. If you need to move around the span, modify the top and right css attributes.
.container {
display: flex;
justify-content: space-around;
}
.product1 {
width: 200px;
height: 500px;
background-color: blue;
}
.product2 {
width: 200px;
height: 550px;
background-color: green;
}
.product3 {
width: 200px;
height: 520px;
background-color: red;
}
.item {
border: 10px solid rgb(255, 107, 107);
position: relative;
}
.item span {
position: absolute;
top: -20px;
right: -25px;
background-color: red;
padding: 5px;
border-radius: 5px;
color: white;
z-index: 10;
}
<div class="container">
<div class="product1 item">
<span>NEW</span>
123
</div>
<div class="product2 item">
<span>NEW</span>
123
</div>
<div class="product3 item">
<span>NEW</span>
123
</div>
</div>
For a project I have a page where everything is in a wrapper and I scale that wrapper as the screen size gets bigger. Imagine each box being a section.
The middle section bleeds to the right but keeps the same margin to the left as the wrapper does. I don't know the exact width of the the section + the margin on the right and if I do, when it scales it will change. I want the left side to scale inline with the other sections as the browser changes like it does in a regular wrapper.
https://codepen.io/seandaniel/pen/oNvKjop
.wrapper {
width: 60rem;
margin: 0 auto;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
}
.section-2 {
background-color: blue;
/* this width is just to show what I want it to look like */
width: 1224px;
height: 200px;
margin-left: auto;
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
</div>
<section class="section-2">
</section>
<div class="wrapper">
<section class="section-3">
</section>
</div>
</main>
Is this what you want to happen?
The wrapper will stay the same distance from the left no matter what.
Although I'm not sure if you want your wrapper in the center center (x,y) at all times.
CSS
.wrapper {
border: 1px solid green;
width: 100%;
position: absolute;
left: 45px;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
position: relative;
}
.section-2 {
background-color: blue;
width: 125%;
height: 200px;
margin-left: auto;
position: relative;
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
position: relative;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
<section class="section-2">
</section>
<section class="section-3">
</section>
</div>
</main>
In your .section-2 class add the following css rule margin-right: calc(50% - 50vw);
You will also need to nest your <section class="section-2"></section> into the same <div class="wrapper"></div> as your other sections to have the same left alignment.
If you want it to bleed to the left, use margin-left: calc(50% - 50vw); instead of margin-right, or have both to be full width.
This page has a lot of good information about manipulating margins within a container.
Full Width Containers in Limited Width Parents
.wrapper {
width: 60rem;
margin: 0 auto;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
}
.section-2 {
background-color: blue;
height: 200px;
margin-right: calc(50% - 50vw);
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
</div>
<div class="wrapper">
<section class="section-2">
</section>
</div>
<div class="wrapper">
<section class="section-3">
</section>
</div>
</main>
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>
I have a design using some bootstrap styling which has a white column on the right. The height should be 100%, but it isn't rendering at 100%. It renders at 100% of the initial screen height, but when you scroll down it's no longer white.
I've looked at several other CSS solutions on this site. I've tried making all parent elements 100% height. I've tried making it a flexbox column. I've tried putting "position: relative;" in the body. Nothing has worked yet. I'd prefer not to use JS to achieve this.
Simplified version of my HTML:
<body>
<div class="container">
<div class="main">
<h1>This is the main content area</h1>
</div>
<div class="right pull-right">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
</body>
The CSS:
body,html {
height: 100%;
background-color: #aaa;
}
body {
position: relative;
}
.main {
display: inline-block;
}
.container {
height: 100%;
}
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: 100%;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
.content {
height: 300px;
min-height: 300px;
margin: 10px 10px;
background-color: #ccc;
border: 1px solid #000;
}
Change your .right class to have height: auto;
It will size itself to fit with its content.
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: auto;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
http://codepen.io/smlariviere/pen/WrWgxQ