Im new to code,
I gave the image element(the bee), position: absolute and bottom: 0px, in order to make the element stick to the bottom of the body i.e. the bottom of the page. However, if I dont give the body position: relative, it doesnt work! Based on what I learnt, if there is no any parent that has position that is not static it automatically set itself in relation to the body, so it doesnt work in that case?
HTML
<body>
<img src="https://media.npr.org/assets/img/2018/06/07/gettyimages-200415242-001_slide-d26f3af782b697f15ceebe2f7c380c0e545dd47b.jpg" alt="" class="test-bee">
<div class="container">
<div class="main">
<div class="info">
<h1>10,000+ of our users love our products.</h1>
<p>We only provide great products combined with excellent customer service.
See what our satisfied customers are saying about our services.</p>
</div>
<div class="rates">
<div class="rate-container">
<div class="star-container">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
</div>
<p class="review">Rated 5 Stars in Reviews</p>
</div>
<div class="rate-container">
<div class="star-container">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
</div>
<p class="review">Rated 5 Stars in Report Guru</p>
</div>
<div class="rate-container">
<div class="star-container">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
<img src="./images/icon-star.svg" alt="">
</div>
<p class="review">Rated 5 Stars in BestTech</p>
</div>
</div>
</div>
<section class="testemonies">
<div class="testemony-card">
<div class="user-info">
<div class="img-container">
<img src="./images/image-colton.jpg" alt="">
</div>
<div class="user-name-status">
<p class="user-name">colton smith </p>
<p class="status"><span>verified buyer</span></p>
</div>
</div>
<p class="testimony">"We needed the same printed design as the one we had ordered a week prior.
Not only did they find the original order, but we also received it in time.
Excellent!"</p>
</div>
<div class="testemony-card">
<div class="user-info">
<div class="img-container">
<img src="./images/image-irene.jpg" alt="">
</div>
<div class="user-name-status">
<p class="user-name">irene roberts </p>
<p class="status"><span>verified buyer</span></p>
</div>
</div>
<p class="testimony">
"Customer service is always excellent and very quick turn around. Completely
delighted with the simplicity of the purchase and the speed of delivery."</p>
</div>
<div class="testemony-card">
<div class="user-info">
<div class="img-container">
<img src="./images/image-anne.jpg" alt="">
</div>
<div class="user-name-status">
<p class="user-name">anne wallace </p>
<p class="status"><span>verified buyer</span></p>
</div>
</div>
<p class="testimony">
"Put an order with this company and can only praise them for the very high
standard. Will definitely use them again and recommend them to everyone!"</p>
</div>
</section>
</div>
</body>
CSS
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
:root {
--Very-Dark-Magenta: hsl(300, 43%, 22%);
--Soft-Pink: hsl(333, 80%, 67%);
--Dark-Grayish-Magenta: hsl(303, 10%, 53%);
--Light-Grayish-Magenta: hsl(300, 24%, 96%);
--White: hsl(0, 0%, 100%);
}
body {
width: 100%;
min-height: 100vh;
font-family: 'League Spartan', sans-serif;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
/* border: 5px solid red; */
padding: 1em;
position: relative; /*why do i need this relative? the bottom image should stick to the bottom by default cause the body is the first one that had position relative, but without it it doesnt stick*/
}
.pattern {
display: none;
}
.test-bee {
width: 200px;
position: absolute;
bottom: 0px;
}
.bottom-mobile, .top-mobile {
display: block;
position: absolute;
}
.top-mobile {
top:0px;
}
.bottom-mobile {
bottom: 0px;
}
.container {
height: 100%;
/* border: 5px solid green; */
margin: 3em 0px;
}
.main {
text-align: center;
margin-bottom: 3em;
}
.info h1 {
margin: 0px auto;
line-height: 0.8em;
margin-bottom: 1em;
margin: 1em 2em;
color: var(--Very-Dark-Magenta)
}
.info {
line-height: 1.3em;
margin-bottom: 2.5em;
}
.rate-container {
background-color: var(--Light-Grayish-Magenta);
padding: 1em 2em;
margin-bottom: 1em;
border-radius: 0.4em;
display: flex;
flex-direction: column;
gap: 0.5em;
color: var(--Very-Dark-Magenta);
font-weight: bold;
}
.testemonies {
display: flex;
flex-direction: column;
gap: 1em;
}
.testemony-card {
background-color: var(--Very-Dark-Magenta);
border-radius: 0.4em;
color: white;
padding: 2em;
line-height: 1.2em;
}
.img-container {
width: 30px;
height: 30px;
border-radius: 50px;
overflow: hidden;
}
.img-container img {
height: 100%;
width: 100%;
}
.user-info {
display: flex;
align-items: center;
gap: 1em;
text-transform: capitalize;
margin-bottom: 1em;
}
.user-name-status p span{
color:var(--Soft-Pink)
}
I fix it by adding the body position: relative, but it should go like that
Related
There is a div that covers one part of my page in my project. I wanna set its height to cover all of the objects that are located inside of it, so i put fit-content as its height property. But, for some reason its height is 0, although there is a header and grid in it. I tried to change to different positions and set max-content, nothing changed. Also I tried to change line-height in almost-header h1, but it seems like nothing actually works. Something similar is with grid-container, that's height is not covering the last grid-item completely, if you drop the padding. This is the code for the snippet I'm struggling with:
body{
font: normal 100% "Sathu", sans-serif;
background: #181818;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.secondary{
position: absolute;
top: 0;
left: 0;
height: fit-content;
width: 100%;
padding: 0;
margin: 0;
background-color: #FFFFFF;
}
.almost-header{
position: absolute;
background-color: #181818;
height: 20%;
width: 100%;
left: 0;
top: 0;
right: 0;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.almost-header h1{
position: absolute;
left: 5%;
margin: 0;
padding: 0;
font-size: 4em; /* 64px/16px*/
line-height: 1;
/*width: fit-content;*/
/*max-width: 60%;*/
color: #FFFFFF;
width: 90%;
border-bottom: #FFFFFF 1px solid;
}
/*#break-line{*/
/* position: absolute;*/
/* width: calc(100% - 2*70px);*/
/* height: 5px;*/
/* left: 70px;*/
/* top: 9vh;*/
/* background: #FFFFFF;*/
/*}*/
.grid-container{
box-sizing: border-box;
position: absolute;
padding-right: 5%;
padding-left: 5%;
padding-bottom: 15%;
padding-top: 0%;
display: grid;
column-gap: 1%;
row-gap: 1%;
width: 100%;
height: fit-content;
margin: 0;
top: 20%;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
border-bottom: white 1px solid;
}
.grid-item{
width: 100%;
height: 100%;
transition: .5s;
}
.grid-item:hover{
box-shadow: grey 0 5px 8px, grey 0 -5px 8px, grey 5px 0 8px, grey -5px 0 8px;
}
.grid-item-image{
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
.grid-item-image img{
object-fit: cover;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
flex-shrink: 0;
}
.grid-item-footer{
box-sizing: border-box;
padding: 5px;
top: 0;
margin: 0;
height: 15%;
background-color: #E6E6E6;
}
.grid-item-footer p{
color: #333333;
line-height: 1;
}
.footer-city{
margin: 0;
margin-bottom: 10px;
font-style: normal;
font-weight: 800;
font-size: 2em;
line-height: 38px;
color: #333333;
/*margin-bottom: 5px;*/
}
.footer-author-date{
margin: 0;
font-family: 'Barlow', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1.125em;
line-height: 22px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href= "styles.css">
</head>
<body>
<div class="secondary">
<div class="almost-header">
<h1 id="save-cities">
Check this out:
</h1>
</div>
<div class="grid-container">
<div class="grid-item" id="grid-item0">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item1">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item2">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item3">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item4">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item5">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item6">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item7">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
</div>
</div>
</body>
</html>
Here is some refactoring. Less CSS is always more 🙂
Your gap of 1% was causing the height issue, I don't know grid well enough to explain why.
* {
box-sizing: border-box;
}
body {
background: #181818;
}
header {
background-color: #181818;
min-height: 20%;
display: grid;
place-content: center;
}
h1 {
font-size: 4em;
margin: 0;
color: white;
border-bottom: white 1px solid;
}
main {
padding: 5%;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
border-bottom: white 1px solid;
}
.grid-item:hover {
box-shadow: grey 0 5px 8px, grey 0 -5px 8px, grey 5px 0 8px, grey -5px 0 8px;
}
.grid-item img {
display: block;
width: 100%;
}
.grid-item footer {
padding: 5px;
color: #333333;
background-color: #E6E6E6;
}
.footer-city {
margin-bottom: .6em;
font-weight: 800;
font-size: 2em;
}
.footer-author-date {
font-weight: 500;
font-size: 1.125em;
}
<header>
<h1 id="save-cities">
Check this out:
</h1>
</header>
<main>
<article class="grid-item" id="grid-item0">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item1">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item2">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item3">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item4">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item5">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item6">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item7">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
</main>
With a colleague of mine, we wanted to run a behavioural experiment that involve a fake purchase of virtual goods on a shop webpage. We designed the experiment on OTree (so on Python), but we needed Django and especially some html/css code to correctly place the images and texts on the webpage.
We managed to place the images and text as we wanted, to get something like that (the blue squares are just placeholders for the images):
The problem is that as soon as we change the window size, all the images and text just move on their own.
Here's a part of the code (not including everything because for now, we're just trying to get first the text in place and to understand the logic of it).
Here's the CSS:
<style>
body {
background-image: url('https://i.imgur.com/lVtlHWx.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
and the HTML:
<div style="top: 99px; left: 99px;position: absolute; z-index: 1;visibility: visible;">
<h1 style="position: relative; color: #f0f0f0; font-family: Papyrus,monospace;">Welcome to the shop</h1>
<h3 style="position: relative;color: #f0f0f0; font-family: Papyrus,monospace;">Round 1/10</h3>
<p style="position: relative;top:9.5cm; left:6.5cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">5 Rubis</p>
<p style="position: relative;top:9.5cm; left:18cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">15 Rubis</p>
<p style="position: relative;top:9.5cm; left:29.5cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">25 Rubis</p>
<p style="position: relative;top:9.5cm; left:41cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">50 Rubis</p>
<p style="position: relative;top:16cm; left:6.5cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">5 Rubis</p>
<p style="position: relative;top:9.5cm; left:18cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">15 Rubis</p>
<p style="position: relative;top:9.5cm; left:29.5cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">25 Rubis</p>
<p style="position: relative;top:9.5cm; left:41cm; color: #f0f0f0; font-family: Papyrus,monospace;font-size:25px;">50 Rubis</p>
We're complete beginners in HTML/CSS and I think we bite more than we could chew. I followed and tried some answers but nothing really helped to resize every element with respect to the window size. Perhaps it is due to positioning the text? I still struggle to really understand how css places elements when their position are absolute or relative. We are in dire need of help on this matter, and would be immensely grateful if someone could solve our issue.
This is a typical case where using a table or better, CSS grid positioning would save you a lot of headaches.
Positioning according to measurements on your background image gives the following:
:root {
--display-scale: .5;
}
body {
padding: 10px;
background: black;
overflow: hidden; /* disable scrolling */
}
.wrapper {
transform: scale(var(--display-scale));
-webkit-transform: scale(var(--display-scale));
transform-origin: 0 0;
width: 1884px;
height: 1076px;
background: url('https://i.imgur.com/lVtlHWx.png') no-repeat;
position: relative;
font-family: Papyrus, monospace;
color: #f0f0f0;
}
.wrapper * {
box-sizing: border-box;
}
.wrapper h1 {
position: absolute;
padding: 0;
top: 10px;
left: 10px;
font-size: 48px;
}
.wrapper h3 {
position: absolute;
padding: 0;
top: 10px;
right: 10px;
font-size: 36px;
}
.wrapper .wallet {
position: absolute;
top: 42px;
height: 46px;
left: 720px;
right: 682px;
font-size: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper .my-grid {
position: absolute;
/*background: #ff000055;*/
top: 228px;
left: 110px;
right: 82px;
bottom: 82px;
padding: 0;
column-gap: 38px;
display: grid;
grid-template-columns: 384px 402px 406px 1fr;
grid-template-rows: 196px 50px 202px 50px 202px 50px;
grid-auto-flow: column;
}
.my-grid .prod-image {
/*background: #00ff0055;*/
display: flex;
align-items: center;
justify-content: center;
}
.my-grid img {
display: block;
width: 180px;
height: 130px;
background: #5555ff;
outline: 5px solid black;
}
.my-grid .price {
/*background: #0000ff55;*/
font-size: 24px;
margin 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<h1>Welcome to the shop</h1>
<h3>Round 1/10</h3>
<p class="wallet">You have 1000 tokens</p>
<div class="my-grid">
<div class="prod-image"><img class="pic" /></div>
<p class="price">5 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">15 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">25 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">5 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">15 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">25 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
<div class="prod-image"><img class="pic" /></div>
<p class="price">50 Rubis</p>
</div>
</div>
Use the --display-scale: .5 variable to adjust display size
You can achieve your desired results with css Grid and Flexbox.
This page content:
<body>
<div id="head">
<h1>Welcome to the shop</h1>
<h3>Round 1/10</h3>
</div>
<div id="labels_container">
<div class="item"><p class="label">5 Rubis</p></div>
<div class="item"><p class="label">15 Rubis</p></div>
<div class="item"><p class="label">25 Rubis</p></div>
<div class="item"><p class="label">50 Rubis</p></div>
<div class="item"><p class="label">5 Rubis</p></div>
<div class="item"><p class="label">15 Rubis</p></div>
<div class="item"><p class="label">25 Rubis</p></div>
<div class="item"><p class="label">50 Rubis</p></div>
<div class="item"><p class="label">5 Rubis</p></div>
<div class="item"><p class="label">15 Rubis</p></div>
<div class="item"><p class="label">25 Rubis</p></div>
<div class="item"><p class="label">50 Rubis</p></div>
</div>
</body>
With this css styling:
body {
background-image: url('./lVtlHWx.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
display: grid;
grid-template-rows: [gstart]1fr[gmid] 5fr[gend];
height: 100vh;
width: 100vw;
}
#head {
grid-row: gstart / gmid;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#head * {
margin: 0;
}
#labels_container {
grid-row: gmid / gend;
margin-top: 3vh;
margin-left: 5vw;
margin-right: 7vw;
margin-bottom: 9.5vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 2.5%;
}
.item .label {
margin: 0;
margin-bottom: 1vh;
}
* {
color: #f0f0f0;
font-family: Papyrus, monospace;
}
h1, h3 {
position: relative;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.label {
font-size: 25px;
}
should do what you want.
Note: You might also find it beneficial to make the interface a div in your page with a constant aspect ratio, because you have an image as the backdrop for the entire interface. Having this image deform makes styling the page awkward. That being said, the styles above should work with your current setup.
I couldn't resist, here is what you should really do: abandon your backdrop that constrains layout, and use a real HTML layout instead, with textures to help achieving the effect you want.
This snippet should be viewed in full page mode
:root {
--iron-texture: url('https://www.outworldz.com/SeamlessTextures/master/Metal/iron_diffuse.png');
--wood-texture: url('https://images.designtrends.com/wp-content/uploads/2015/12/22092207/Seamless-Wooden-Floor-Texture.jpg?width=600');
}
html { padding: 0; margin: 0; height: 100%;}
body {
box-sizing: border-box;
padding: 1rem;
margin: 0;
min-height: 100%;
background: black;
color: white;
font-family: Papyrus, monospace;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.shop {
box-sizing: border-box;
width: 100%;
max-width: 1200px;
background: var(--wood-texture);
background-size: 30%;
color: #ccc;
padding: 1rem;
}
.shop header {
position: relative;
display: flex;
flex-direction: column;
gap: 1em;
}
.shop h1,
.shop p {
padding: 0;
margin: 0;
}
.shop h1 {
font-size: 32px;
}
.shop .round {
position: absolute;
top: 0;
right: 0;
font-size: 28px;
}
.iron-style {
background: var(--iron-texture);
border: 4px solid #1a1a1a;
border-top-color: #2a2a2a;
border-right-color: #2a2a2a;
}
.shop .wallet {
font-size: 20px;
font-weight: bold;
box-sizing: border-box;
width: 20em;
align-self: center;
text-align: center;
padding: .5em;
border-radius: 1.5em;
}
.shop main {
margin-top: 1rem;
padding-bottom: 1rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem 1rem;
border: 1rem solid #222;
border-image: var(--iron-texture);
border-image-repeat: round;
border-image-slice: 20;
box-shadow: inset -3px 3px 3px #111,
inset 3px -3px 5px #333;
}
.product {
display: flex;
flex-direction: column;
}
.pic-layout {
height: 100px;
min-width: 150px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.pic-layout img {
max-width: 150px;
max-height: 100px;
background: #aaf;
outline: 5px solid #333;
}
.price {
width: 6em;
padding: .3em 1em;
border-radius: .5em;
align-self: center;
text-align: center;
}
#media screen and (max-width: 1000px) {
.shop main {
grid-template-columns: repeat(3, 1fr);
}
}
#media screen and (max-width: 700px) {
.shop main {
grid-template-columns: repeat(2, 1fr);
}
.shop .round {
position: static;
align-self: flex-end;
}
}
<section class="shop">
<header>
<h1>Welcome to the Shop</h1>
<p class="round">Round 1/10</p>
<p class="wallet iron-style">You have 1000 tokens</p>
</header>
<main>
<div class="product" id="product-1">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods1/150/100" />
</div>
<div class="price iron-style">5 Rubis</div>
</div>
<div class="product" id="product-2">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods2/150/100" />
</div>
<div class="price iron-style">25 Rubis</div>
</div>
<div class="product" id="product-3">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods3/150/100" />
</div>
<div class="price iron-style">15 Rubis</div>
</div>
<div class="product" id="product-4">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods4/150/100" />
</div>
<div class="price iron-style">42 Rubis</div>
</div>
<div class="product" id="product-5">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods5/150/100" />
</div>
<div class="price iron-style">120 Rubis</div>
</div>
<div class="product" id="product-6">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods6/150/100" />
</div>
<div class="price iron-style">33 Rubis</div>
</div>
<div class="product" id="product-7">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods7/150/100" />
</div>
<div class="price iron-style">6 Rubis</div>
</div>
<div class="product" id="product-8">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods8/150/100" />
</div>
<div class="price iron-style">44 Rubis</div>
</div>
<div class="product" id="product-9">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods9/150/100" />
</div>
<div class="price iron-style">99 Rubis</div>
</div>
<div class="product" id="product-10">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods10/150/100" />
</div>
<div class="price iron-style">1 Rubis</div>
</div>
<div class="product" id="product-11">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods11/150/100" />
</div>
<div class="price iron-style">23 Rubis</div>
</div>
<div class="product" id="product-12">
<div class="pic-layout">
<img src="https://picsum.photos/seed/prods12/150/100" />
</div>
<div class="price iron-style">16 Rubis</div>
</div>
</main>
</section>
This time I structured the shop with one wrapper div per product, but I could have avoided that using the same kind of grid as in my previous answer.
There are no vertical separators as CSS grid does not allow for inner borders (yet). If this is a requirement, the <main> element should be replaced with a <table>, which allows for all kinds of borders.
grid has the advantage of offering responsive layout using #media queries. That's why you can see all products on only 2 columns in the sample above, unless you enlarge it to full page.
Whenever I'm trying to change .tea to display: block; all the images change their position from being horizontal, to being vertical
How to position it the correct way so the images keep being horizontally aligned and the text will be underneath
.tea {
display: inline-flex;
margin-left: 225px;
padding: 20px;
justify-content: center;
}
.tea h4 {
display: inline-block;
position: relative;
text-align: center;
}
.tea2 {
display: inline-flex;
margin-left: 385px;
}
.tea img {
width: 300px;
height: 200px;
padding: 25px;
border-radius: 15px;
}
.tea2 img {
width: 300px;
height: 200px;
padding: 30px;
}
<div class="tea">
<img class="1" src="https://via.placeholder.com/150">
<h4>Myrtle Ave</h4>
<img class="2" src="https://via.placeholder.com/150">
<h4>Spiced rum</h4>
<img class="3" src="https://via.placeholder.com/150">
<h4>Berry Blitz</h4>
</div>
<div class="tea2">
<img class="1" src="https://via.placeholder.com/150">
<img class="2" src="https://via.placeholder.com/150">
</div>
You should do it like this
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#gallery {
display: flex;
flex-wrap: wrap;
}
#gallery .image-container {
width: 25%;
background-color: lightgreen;
border-radius: 5px;
padding: 5px;
box-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
}
#gallery img {
width: 100%;
}
#gallery .title {
font: bold 24px monospace;
text-align: center;
color: white;
margin: 2%;
}
<div id="gallery">
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 1</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 2</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 3</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 4</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 5</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 6</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 7</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 8</p>
</div>
</div>
You need to change you HTML to support what you want. Use a container wrapper around the image and image text.
Example: https://jsfiddle.net/Lqupmf5s/
<div class="tea">
<div class="img-container">
<img class="1" src="32131">
<h4>Myrtle Ave</h4>
</div>
<div class="img-container">
<img class="2" src="3213">
<h4>Spiced rum</h4>
</div>
<div class="img-container">
<img class="3" src="3213">
<h4>Berry Blitz</h4>
</div>
</div>
.tea {
display: inline-flex;
/* margin-left: 225px; */
padding: 20px;
justify-content: center; }
.tea h4{
display: inline-block;
position: relative;
text-align: center; }
.tea2 {
display: inline-flex;
margin-left: 385px; }
.tea img {
width: 300px;
height: 200px;
/* padding: 25px; */
border-radius: 15px; }
.tea2 img {
width: 300px;
height: 200px;
padding: 30px; }
I want to make smt like this
img
Make background opacity and make visible two lines text and little picture (arrow) when hovering.
I know, i can make it just using other picture for background (make opacity in Photoshop), but i want to know how to make it with CSS
.futured {
padding: var(--product-padding);
display: grid;
grid-template-columns: repeat(4, 270px);
grid-template-rows: 1fr;
grid-gap: 30px;
}
.lamp{
background-image: url(http://anti-naruto.ru/img/product-1.jpg);
align-content: center;
padding: 30% 15px 30%;
}
.lamp p:first-child{
font-family: Montserrat;
color: #212121;
font-size: 1.369em;
font-weight: 700;
line-height: 1.369;
text-align: center;
opacity: 0;
}
.lamp p:first-child:hover{
opacity: 1;
}
.lamp p:last-child{
font-family: Montserrat;
color: #6c6c6c;
font-size: 0.871em;
font-weight: 300;
line-height: 1.578;
text-align: center;
opacity: 0;
}
.lamp p:last-child:hover{
opacity: 1;
}
.lamp:hover{
}
<div class="futured">
<div class="lamp">
<a href="#">
<p>Fishnet Chair</p>
<p>Seat and back with upholstery made of cold cure foam</p>
</a>
</div>
<img src="http://anti-naruto.ru/img/product-2.jpg" alt="">
<img src="http://anti-naruto.ru/img/product-3.jpg" alt="">
<a href="#"><img src="http://anti-naruto.ru/img/product-4.jpg" alt=""></ahttps://stackoverflow.com/questions/ask#>
</div>
You need to use absolute positioning to achieve this. Please see my snippet:
.item {
position: relative;
}
.item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(255, 255, 255, 0.8);
}
.item:hover .overlay {
opacity: 1;
}
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
<div class="overlay">
<h2>Test</h2>
<p>Description</p>
</div>
</div>
I'm fairly new to HTML & CSS, so I can't solve the development problem I'm facing. I have a footer design that looks like this:
The map section should slightly hide behind the above and beyond section. I'm using bootstrap and right now I achieved only this:
I know that this should be solved with relative and absolute positioning. I gave the footer id position: relative and added the absolute position to the map section, but the map section disappeared alltogether. I obviously don't know what I'm doing, so I'm hoping you can help me.
My HTML for the footer looks like this:
<section id="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="text-center"> Join Our Team</h2>
<div class="teamview">
<img src="img/team1.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
<img src="img/team2.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
<img src="img/team3.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
<img src="img/team4.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
<img src="img/team5.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
<img src="img/teamu.png" class="img-circle" alt="Team" style="width:62px;height:62px;">
<img src="img/team7.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
<img src="img/team8.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
</div>
<!--end teamview-->
<button type="button" class="btn btn-link center-block green" role="link" type="submit" name="op" value="Link 2">see our vacancies<span class="notify">2</span></button>
<div class="contact-us">
<p class="text-center">Get in touch with Dolm IT, we’d love to help and work with you.</p>
<h2 class="text-center">(+372) 56 247 399</h2>
info#dolmit.com
<p class="text-center">Dolm IT office: Parda 12, 10151, Tallinn, Estonia</p>
<p class="text-center">Official address: Pärnu mnt 122-20, 11313, Tallinn, Estonia</p>
</div>
<!--end contact us-->
</div>
<!--end col-md-12-->
</div>
<!--end row -->
</div>
<!--end container-->
</section>
<!--end footer-->
<div id="map"></div>
<section id="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="social-media">
<img src="img/linkedin.svg" class="img-circle" alt="Team" style="width:62px;height:62px;">
<img src="img/fb.svg" class="img-circle" alt="Team" style="width:62px;height:62px;">
</div>
<!--end social-media-->
<div class="copyright small">
<p class="text-center">Dolm IT © 2016</p>
</div>
</div>
<!--end col-md-12-->
</div>
<!--end row -->
</div>
<!--end container-->
</section>
<!--end footer bottom-->
And the CSS:
/*footer*/
#footer {
background: url("../img/footerbg.png") no-repeat left top;
width: 100%;
background-size: cover;
padding: 100px 0 150px 0;
}
#footer h2 {
color: #ffffff;
}
.teamview {
display: flex;
justify-content: center;
margin-top: 40px;
}
.teamview img {
border: 3px solid #1dcb8b;
margin-right: 45px;
}
.btn-link.green {
position: relative;
}
.contact-us {
margin-top: 60px;
}
.contact-us h2 {
font-size: 4rem;
color: #ffffff;
}
.contact-us p {
color: #ffffff;
}
.contact-us a {
display: block;
font-size: 4rem;
color: #1dcb8b;
}
.contact-us a:hover {
text-decoration: none;
}
.contact-us a:after {
display: block;
margin: 40px auto 30px;
width: 100px;
height: 3px;
content: '';
background: #1dcb8b;
}
#map {
width: 100%;
height: 400px;
}
.social-media {
display: flex;
justify-content: center;
margin: 40px 0 25px 0;
}
.social-media a {
margin: 0 15px;
}
.copyright p {
color: #ffffff;
font-weight: 400;
font-size: 1.1rem;
}
#footer-bottom {
background: url("../img/social_media_bg.png") no-repeat left top;
width: 100%;
background-size: cover;
padding: 90px 0 50px 0;
}
Is there an easy solution to this? Here's a demo page as well. Thank you for your help.
In your CSS use this for #map
#map {
width: 100%;
height: 400px;
margin-bottom: -110px;
margin-top: -130px;
z-index: -1;
}