Run the snippet below:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: min-content;
}
.container2 {
position: relative;
margin-left: 20px;
width: min-content;
}
.container2::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 30px red;
}
.inner {
width: 200px;
height: 100px;
background: yellow;
}
.text {
width: 200px;
height: 100px;
}
<div class="container">
<div class="container1">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
</div>
Is there a way to rewrite the code for the container1's red box shadow to be above the yellow background (or in general any background including a picture)?
One way to do it, which resolves the issue, is utilising pseudo-elements (so, the rendered container2 is how it intended to be), but I don't particularly like this solution and hope there is a way to do the same without introducing new dom elements (just utilising css).
As you mentioned container2 to show the intended structure, I removed that from my code. here is how I do this task with the help of position CSS property:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: 200px;
height: 200px;
position: relative;
}
.inner {
width: 200px;
height: 100px;
background: yellow;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.text {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
<!--
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
-->
</div>
</body>
</html>
Without setting width and height:
If you don't want to set width and height you could use display:flex on .container1 element as follow:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: 35%;
display: flex;
flex-direction: column;
}
.inner {
background: yellow;
width: 100%;
z-index: -1;
}
.inner img {
width: 100%;
}
.text {
color: #1415FF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque id temporibus cumque, magnam blanditiis voluptate vel nisi. Fugit itaque quod inventore, optio dolor magnam ipsa, temporibus rerum qui error deserunt?
<!-- <img src="birthday.png" alt=""> -->
</div>
<div class="text">Some text some text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto quo assumenda veniam voluptatum beatae impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rerum ullam hic mollitia quia! impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rer</div>
</div>
<!--
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
-->
</div>
</body>
</html>
I used width: 35% in .container1 just because of we usually set a relative width for elements but you can remove it. You could also put img tag inside .inner class and I think that works correctly.
Related
I am new at HTML and want to know how to fix the position of my elements in a window because every time I try to minimize the window everything becomes messy. I am about to make a website and this is my first try so bear with errors. Here's my code:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header .choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="LB21.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
</header>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
The image below shows the issues I'm having:
body,
html {
background-color: #cc9966;
max-height: 100%;
max-width: 100%;
}
.Container {
width: 100%;
min-width: 700px;
max-height: 1000px;
margin: auto;
position: relative;
}
.title {
font-family: Lucida handwriting;
font-size:calc(34px + 2.2vw);
text-align: center;
color: white;
text-shadow: 1rem 1rem 5rem black;
}
header {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
margin-left: 3rem;
cursor: pointer;
border-radius: 1rem;
position: relative;
}.choice {
display: flex;
justify-content: space-evenly;
max-width: 900px
}
.choice a {
padding: .8rem;
font-family: Arial;
font-size: 1rem;
border: solid rgba(57, 38, 19);
background: #f9f2ec;
color: black;
cursor: pointer;
border-radius: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title> WEBSITE OF LB21 </title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Container">
<div class=title>
<h2> LUSCIOUS BITES </h2>
</div>
<center>
<p class="choice">
HOME
SPECIALITY
POPULAR
GALLERY
REVIEW
ORDER
</p>
</center>
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
order now
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div>
</section>
</div>
</body>
Goal:
When scrolling down through a website, an image will follow along and change depending on how far you have scrolled.
My Plan:
Place images on top of each other and let them be sticky. Run animation depending on scroll position.
My Problem:
I have three images that I needs to be sticky. However, they also need to be absolute to be placed on top of each other, which is obviously contradictory. Am I approaching the problem from the wrong direction?
Don't think too much about the animation stuff, I will figure that out. For now I just need help placing images on top of each other while also being sticky.
Current code: https://codepen.io/alsb/pen/oNwZYQw
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css"href="style.css">
<title>Document</title>
</head>
<body>
<h1>Hello to Sticky World</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Numquam et blanditiis repellendus voluptas iusto recusandae quis
quos iure quod eos possimus ad corrupti, nam asperiores,
minima quisquam praesentium neque ratione?
</p>
<div class="container">
<img class="item" src="https://picsum.photos/300/200" />
<img class="item" src="https://picsum.photos/300/200" />
<img class="item" src="https://picsum.photos/300/200" />
</div>
<p>...</p>
</body>
</html>
.sticky-container {
height: 100%;
}
img.sticky {
position: -webkit-sticky;
position: sticky;
top: 50px;
width: 200px;
}
.container {
display: flex;
justify-content: space-around;
align-items: flex-start;
border: 2px dashed rgba(114, 186, 94, 0.35);
height: 400px;
background: rgba(114, 186, 94, 0.05);
}
.item {
position: sticky;
top: 1rem;
}
The solution was to not use <img>. The inner-most div will be sticky, wrapped in an absolute div.
<div class="wrapper">
<div class="container">
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
</div>
</div>
.wrapper {
position: relative;
width: 50vw;
}
.container {
display: flex;
position: absolute;
justify-content: space-around;
align-items: flex-start;
border: 2px dashed rgba(114, 186, 94, 0.35);
height: 900px;
background: rgba(114, 186, 94, 0.05);
}
.item {
position: sticky;
top: 1rem;
background-image: url("https://picsum.photos/500/300");
}
I want to create a CSS-Card
On the left side should be a image and on the ride side a headline and paragraph.
Furthermore, in the lower section of the right side there should be a profile picture, name and date of the post.
So my question is
How can I prevent the content in the container-article from overlapping the container-card?
My Current State with the CSS-Card
----------
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="Ufuk Can Varol" />
<meta name="description" content="Article Card v3" />
<!-- CSS -->
<link rel="stylesheet" href="css/index.css" />
<!-- Font-Family [Manrope]-->
<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght#500;700&display=swap"
rel="stylesheet"
/>
<!-- Favicon -->
<link
rel="shortcut icon"
type="image/png"
href="assets/images/favicon-32x32.png"
/>
<title>Article</title>
</head>
<body>
<div id="container">
<div class="container-card">
<div class="container-image"></div>
<div class="container-article">
<div class="article-header">
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatum, officia.
</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum,
vel suscipit impedit accusantium nihil minima asperiores,
exercitationem sapiente ad expedita fugiat. Veritatis sit
voluptatem qui est unde, aspernatur nemo impedit!
</p>
</div>
<div class="article-footer">
<div class="article-footer-author">
<div class="author-image"></div>
<p>
Savannah Garrett <br />
28 Jun 2020
</p>
</div>
<div></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
background-color: aliceblue;
}
#container {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
justify-content: center;
align-items: center;
justify-items: center;
align-items: center;
background-color: antiquewhite;
}
.container-card {
width: 800px;
height: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 2fr 3fr;
background-color: aqua;
}
.container-image {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: azure;
}
.container-article {
width: 100%;
height: 100%;
margin: 0;
padding: 40px;
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
background-color: aquamarine;
}
.article-header {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: bisque;
}
.article-footer {
width: 100%;
height: 100%;
background-color: blueviolet;
}
Remove height: 300px from .container-card. If you set a fixed height it won't expand to fit its child elements.
I want to add an addition div to info-img. If I changed to <div class="box-img"><div class="info-img"></div>......</div>,the image is gone. What happened to this situaiton? How to I modify CSS code to show the image correctly? __
* {
box-sizing: border-box;
}
#home-info {
height: 300px;
}
#home-info .info-img {
float: left;
width: 50%;
background: url('https://images.pexels.com/photos/573552/pexels-photo-573552.jpeg') no-repeat center center/cover;
height: 100%;
}
#home-info .info-content {
float:right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="home-info">
<!-- <div class="box-img"> -->
<div class="info-img"></div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
<!-- </div> -->
</section>
</body>
</html>
You missed the closing in your css and the info-img div contains empty. You have to add any image or text to visible the div. I have updated the code. Hope this solution will be helpful.
#home-info {
height: 400px;
width:800px;
}
#home-info .info-img img {
max-width: 100%;
width: 100%;
}
#home-info .box-img {
display: flex;
}
#home-info .info-img {
width: 50%;
background: #ccc;
min-height: 100%;
}
#home-info .info-content {
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<section id="home-info">
<div class="box-img">
<div class="info-img">
<img src="https://via.placeholder.com/200">
</div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
</div>
</section>
You can check below code snippet , As some closing bracket is missing in your css code.Hope below code will help you !
#home-info {
height: 400px;
width:800px;
}
#home-info .box-data{
width:100%;
float:left;
}
#home-info .info-img {
float: left;
width: 50%;
background: #ccc;
}
#home-info .info-img img{
width:100%;
height:auto;
}
#home-info .info-content {
float:right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
box-sizing:border-box;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="home-info">
<div class="box-data">
<div class="info-img">
<img alt="image" height="auto" width="100%" src="https://images.unsplash.com/photo-1531361171768-37170e369163?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1875&q=80"/>
</div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
</div>
</section>
</body>
</html>
Finally I solved the problem by changing the code.
#home-info .box-img {
height: 300px;
}
* {
box-sizing: border-box;
}
#home-info .box-img {
height: 300px;
}
#home-info .info-img {
float: left;
width: 50%;
background: url('https://images.pexels.com/photos/573552/pexels-photo-573552.jpeg') no-repeat center center/cover;
height: 100%;
}
#home-info .info-content {
float:right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
}
#home-info .info-content p {
padding-bottom: 30px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="home-info">
<div class="box-img">
<div class="info-img"></div>
<div class="info-content">
<h2>The History of Our Hotel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis saepe minima dolorum. Voluptatibus, recusandae. Alias nobis dolorem fugit iusto quis.</p>
</div>
</div>
</section>
</body>
</html>
Link to project
I've have finally managed to get the header layout I want but one thing I can't get done and that is the alignment of the text (h2 and h3) in the left sidebar. I have tried to do it with a fixed proportie but it get side-effects and I think it has something to do with the rotated text.
The main title should be in left bottom, on one line and the date should be on the right of the main title also on one line. Those combined must align at center of the side-main text aligned to the left.
Edit: Link to layout
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header {
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .2);
}
.side-main {
display: flex;
flex-direction: column;
height: calc(100vh - 60px);
margin-top: 60px;
width: 70px;
border-right: 1px rgba(255, 255, 255, .2) solid;
}
.agenda-text {
width: 100%;
color: #FFF;
transform: rotate(-90deg);
text-transform: uppercase;
}
.header-main {
display: flex;
height: calc(100vh - 60px);
margin-top: 60px;
}
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
Many thanks in advance!
Hope you can help me out.
Regards,
Jason
This doesn't look super polished as a whole yet, but I believe it does solve your issue with the rotation of the side-main.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main-wrapper">
<div class="side-main">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
Css:
*{
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header{
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav{
position: fixed;
width: 100%;
height: 60px;
background: rgba(255,255,255,.2);
}
.side-main-wrapper {
transform: rotate(-90deg);
margin-top: 60px;
}
.side-main{
display: flex;
flex-direction: column;
height: 70px;
width: calc(100vh - 60px);
border-bottom: 1px rgba(255,255,255,.2) solid;
}
.agenda-text{
color: #FFF;
text-transform: uppercase;
}
.header-main{
height: calc(100vh - 60px);
margin-top: 60px;
}
Rather than rotating the entries of the flex column, I wrapped the side-main in a side-main-wrapper and rotated that. Then I just treated the side-main as a regular flex column, and it started behaving.
I added flex: 1; and some margin-left to .agenda-text and then opened up the .side-main width a bit. Hope this is something like what you are looking for, but just guessing since you didn't specify
Edit: Looks wack in preview and fullscreen... but works in the actual edit jsfiddle screen... maybe this is not a good answer
Edit Took out flex: 1 and margin-left. I've made it look how you described, but with an issue. I think a big step forward is adding a container around the .agenda-texts and then rotate that instead of the text. The problem with my approach is that the flex positioning is based on the width of the sidebar, before everything gets turned sideways. So with a left bar width like 300px it works but with a smaller width like you are looking for probably not. Can't imagine making this fully responsive without doing the whole thing over
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header {
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .2);
}
.side-main {
height: calc(100vh - 60px);
margin-top: 60px;
width: 300px;
border-right: 1px rgba(255, 255, 255, .2) solid;
}
.side-main-title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
transform: rotate(-90deg);
}
.agenda-text {
color: #FFF;
text-transform: uppercase;
}
.header-main {
display: flex;
height: calc(100vh - 60px);
margin-top: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main">
<div class="side-main-title">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>