I am building a very simple web page with the purpose of using it later for javascript.
It is an image with a button that will perform functions later, however, as soon as I was able to center my background, it overlaps the content and does not let me see it or interact with it.
* {
box-sizing: border-box;
}
.bg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src="https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src="https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/2000/0000FF/808080" style="width: 150px">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
The idea is of course to be able to visualize all the content.
As a side note, the image that I am using to make the button (container) is in png so that it does not stain my background
This is because you have set the position property on .bg to be fixed. Once you do that the div gets fixed on the top left corner and takes the topmost position on the stack order of elements and hence hiding other elements.
Kindly make the following changes to the code and it should work.
* {
box-sizing: border-box;
}
.bg {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index:-1;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src= "https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src= "https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/150/0000CC/808080" style= "width: 150px" >
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Related
Hi all,
I have a design like an image and used bootstrap 5 for coding. I want to carry the sticky div area from the number one to the first div after on mobile. I can't use js. I tried to use CSS flexbox order but how can ı do that with only CSS?
I look forward to your ideas and suggestions.
Thank you so much!
body {
padding-top: 50px;
padding-bottom: 600px;
}
.box {
width: 100%;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size:92px;
}
.box:nth-of-type(1) {
background-color: #A7A7A7;
height: 232px;
}
.box:nth-of-type(2) {
background-color: #A7A7A7;
height: 250px;
}
.box:nth-of-type(3) {
background-color: #A7A7A7;
height: 500px;
}
.sticky {
background-color: #DDBEBE;
width: 100%;
height: 300px;
position: sticky;
top:0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
</div>
<div class="col-lg-6">
<div class="sticky">
sticky area
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
I doubt this is achieveable with flexbox alone.
However, I managed to address your requirements with display: grid and some fiddling with grid-areas on the elements. This solution also defines a specific grid-template per screen resolution.
.container {
display: grid;
grid-template-areas:
"box1 sticky"
"box2 sticky"
"box3 sticky";
}
#media (max-width: 1024px) {
.container {
grid-template-areas:
"box1"
"sticky"
"box2"
"box3";
}
}
The caveat here is that each element has to have its dedicated grid-area value for the template, so won't work for the cases where you don't know the exact number of containers in play or such number is unreasonably high.
Hope this helps!
body {
padding-top: 50px;
padding-bottom: 600px;
}
.box {
width: 100%;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 92px;
}
.box:nth-of-type(1) {
background-color: #A7A7A7;
height: 232px;
grid-area: box1;
}
.box:nth-of-type(2) {
background-color: #A7A7A7;
height: 250px;
grid-area: box2;
}
.box:nth-of-type(3) {
background-color: #A7A7A7;
height: 500px;
grid-area: box3;
}
.sticky {
order: 1;
background-color: #DDBEBE;
width: 100%;
height: 300px;
position: sticky;
top: 0;
grid-area: sticky;
}
.container {
display: grid;
grid-template-areas:
"box1 sticky"
"box2 sticky"
"box3 sticky";
}
#media (max-width: 1024px) {
.container {
grid-template-areas:
"box1"
"sticky"
"box2"
"box3";
}
.sticky {
position: static;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="sticky">
sticky area
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
This is what I currently have: Here
This is what I want: Here
.headercontainer {
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://static.wixstatic.com/media/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg/v1/fill/w_1215,h_810,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg");
height: 35vw;
padding-top: 10px;
background-repeat: repeat-x;
background-size: cover;
background-position: center;
}
.container {
display: flex;
justify-content: space-evenly;
align-items: center;
padding-top: 60px;
padding-bottom: 60px;
background-color: pink;
/* height: 150vh; */
}
<!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>Real Estate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color: #e3e3e3;">
<div class="headercontainer">
<div class="content">
<img src="images/manifestspace.png" style="width: 30vw; padding-top: 30px;">
<img src="images/welcomehome.png" style="width: 50vw;">
<img src="images/buysell.png" style="width: 50vw;">
</div>
</div>
</body>
</html>
I was messing around with the CSS padding and margins, but I didn't have any luck. I'm also new to Flexboxes so perhaps I missed something in my container CSS?
You can try this approach with a flexbox on content.
Side note that I'm using a fake image and fixed height on images for the demo purpose, you can modify them with your needs.
.headercontainer {
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://static.wixstatic.com/media/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg/v1/fill/w_1215,h_810,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg");
height: 35vw;
background-repeat: repeat-x;
background-size: cover;
background-position: center;
}
.content {
display: flex;
flex-direction: column; /*Display all images from top to bottom*/
align-items: center; /*Align all images to be center*/
height: 100%; /*Make the image container full-height*/
}
<!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>Real Estate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color: #e3e3e3;">
<div class="headercontainer">
<div class="content">
<img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images02.jpg" style="width: 30vw; margin-bottom: 50px;" height="100">
<img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images02.jpg" style="width: 50vw; margin-bottom: 10px;" height="50">
<img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images02.jpg" style="width: 50vw;" height="50">
</div>
</div>
</body>
</html>
I think the problem is you have given padding top as 30px for the first image.Just removing the padding top may be helpful for you.
change the first image padding from
<img src="images/manifestspace.png" style="width: 30vw; padding-top: 30px;">
to
<img src="images/manifestspace.png" style="width: 30vw; padding-top: 0;">
I know the title is vague. I do not know how to better formulate the title as I do not know the name of the design style.
What is the name of this design "style" and how do I achieve the effect with css and html?
I tried to recreate the design with HTML and css. here is the code
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
/*BG*/
main,
.container {
height: 100vh;
width: 100vw;
}
body {
overflow: hidden;
}
#left-top,
#left-bottom,
#right {
position: absolute;
z-index: -10;
}
#left-top {
left: 0;
top: 0;
}
#left-bottom {
left: 0;
bottom: 0;
transform: translate(-0.5vw);
}
#right {
right: 0;
top: 0;
bottom: 0;
transform: translate(10vw);
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100vh;
max-width: 100vw;
border: 1vh solid lime;
}
.logo {
max-width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
width: 80vw;
height: inherit;
}
.links {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div class="container">
<img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
<img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
<img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
<div class="logo">
<img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
</div>
<div class="links">
<ul>
<li>
Kontakt
</li>
<li>
Produkter
</li>
<li>
om oss
</li>
</ul>
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
Whenever I zoom the absolute position background pieces shifts like this.
What is the best way to achieve this design and what is the name of the style?
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
/*BG*/
main,
.container {
height: 100vh;
width: 100vw;
}
body {
overflow: hidden;
}
#left-top,
#left-bottom,
#right {
position: absolute;
z-index: -10;
}
#left-top {
left: 0;
top: 0;
width: 20vw;
}
#left-bottom {
left: 0;
bottom: 0;
height: 50vh;
}
#right {
right: 0;
top: 0;
bottom: 0;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100vh;
max-width: 100vw;
}
.logo {
max-width: 70vw;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
top: 45vh;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 100%;
height: inherit;
z-index: -10;
}
.links {
margin: 51vh auto auto 7vw;
width: 110vw;
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 1vw;
grid-row-gap: 1vw;
}
.link-text {
width: 100%;
text-align: center;
}
.link-text a {
text-decoration: none;
color: #777;
font-size: 1.25vw;
font-family: helvetica;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div class="container">
<img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
<img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
<img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
<div class="logo">
<img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
</div>
<div class="links">
<div class="link-text">Kontakt</div>
<div class="link-text">Produkter</div>
<div class="link-text">om oss</div>
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
In the above code I have changed the images dimensions and links in <div> tag to achieve that design... You can directly copy and paste the code for your work as I think this is what you wanted to see on the screen.
Explanation
1- I first added vw and vh dimensions to you images which made them responsive according to the viewport...
2- secondly I specified a z-index to your logo image and positioned it according to your need by the help of left and top after specifying absolute position.
3- Thirdly I used css grid layout for links, but it is not essential as you can use other methods also. link for info on cs grids
4- I styled few things with css (mainly the link section) which you can go through in your code...
The above was just a brief overview.
I wanted to center the social media images and bunch them together. I figured I can move it over to the right by using right: 100px;, but it won't stay relative to page size. If I scale my page to mobile size, it doesn't stay centered as the header does.
This fiddle might make it easier to understand.
Set the display property on "row" to flex and use "justify-content" to position the elements in center horizontally. You can remove relative positioning on the ".social" elements.
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: url(https://i.ibb.co/VH659W4/background.jpg) no-repeat center center fixed;
background-size: cover;
}
.column {
z-index: 100;
}
.row {
display: flex;
z-index: 100;
justify-content: center;
}
.social {
display: block;
margin-left: auto;
margin-right: auto;
width: 36px;
z-index: 100;
}
#header {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 99;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DJ JUMO
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="row">
<div class="column">
<img class="social" src="https://i.ibb.co/N7dFXZ4/instagram.png">
</div>
<div class="column">
<img class="social" src="https://i.ibb.co/s3VrxZJ/twitter.png">
</div>
<div class="column">
<img class="social" src="https://i.ibb.co/prCyYw3/snapchat.png">
</div>
<div class="column">
<img class="social" src="https://i.ibb.co/5Y77Bcm/facebook.png">
</div>
</div>
<img id="header" src="https://i.ibb.co/gdHS8by/header.png" alt="logo">
</body>
</html>
I want the four social media images to be at the top, but I want to replace the bottom: 60px;on the .social with something else. Because if you go on other smaller screen devices it goes off the screen, other words 60px up (not responsive).
This fiddle might make it easier to understand.
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: url(https://i.ibb.co/VH659W4/background.jpg) no-repeat center center fixed;
background-size: cover;
}
.row {
display: flex;
z-index: 2;
justify-content: center;
}
.social {
position: relative;
z-index: 2;
height: 15px;
width: 15px;
bottom: 60px;
}
#header {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DJ JUMO
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<img id="header" src="https://i.ibb.co/gdHS8by/header.png" alt="logo">
<div class="row">
<div>
<img class="social" src="https://i.ibb.co/N7dFXZ4/instagram.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/s3VrxZJ/twitter.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/prCyYw3/snapchat.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/5Y77Bcm/facebook.png">
</div>
</div>
</body>
</html>
Ideally if you want the images to be on top (above) the image, you'd structure your HTML as such, by moving the .social elements above your independent <img> tag.
From here you can work from the top instead of from the bottom.
However, note that instead of top, you'll want to use margin-top. Otherwise you'll have giant click-zones well outside of the child <img /> tags.
I've swapped to this in my example (note you may need to adjust the margin-top value):
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: url(https://i.ibb.co/VH659W4/background.jpg) no-repeat center center fixed;
background-size: cover;
}
.row {
display: flex;
z-index: 2;
justify-content: center;
}
.social {
position: relative;
z-index: 2;
height: 15px;
width: 15px;
margin-top: 30px;
}
#header {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DJ JUMO
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="row">
<div>
<img class="social" src="https://i.ibb.co/N7dFXZ4/instagram.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/s3VrxZJ/twitter.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/prCyYw3/snapchat.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/5Y77Bcm/facebook.png">
</div>
</div>
<img id="header" src="https://i.ibb.co/gdHS8by/header.png" alt="logo">
</body>
</html>