i got a problem with my code. Everytime i move my page the text is on a completly other position and overlows the most of the time. i am pretty new to coding and i really dont know how to fix it at all.
This is my HTMl data.
html,
body {
background-image: url('./pics-txt/group/Need2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.filter {
backdrop-filter: blur(2px);
height: 100%;
width: 100%;
z-index: 1;
}
.container {
display: flex;
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 40%;
height: 20%;
padding: 20px;
text-align: center;
}
.item {
border: solid 0px;
position: relative;
left: 34%;
top: 0%;
padding: 2%;
text-align: center;
color: white;
z-index: 2;
font-size: 90%;
}
#text {
position: relative;
left: 0%;
padding: 1%;
top: 30%;
z-index: 2;
color: white;
text-align: center;
font-size: 180%;
}
#media only screen and (max-width:70%) {
.container {
width: 100%;
}
}
<head>
<meta charset="UTF-8" />
<meta hrrp-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./test-txt.css">
<title>Tomorrow x Together</title>
</head>
<body>
<div class="filter"></div>
<div class="container">
<div class='item'>MOA</div>
<div class="item">Member</div>
<div class="item">Big Hit</div>
<h1 id="text">Tomorrow x Together</h1>
</div>
</video>
</body>
i really dont know how to fix it. i also tried to just dont use a flexbox. but i think my Knowledges for that arent good enough xD
i also tried to vary between flex-directions, flex-wraps between different width, heights. to work with and without a div.
I did everything for me possible.
I see it is a mix of position, z-index, flex, percentages, etc. It is difficult to find out what the question is. It seems you want to center a box but I'm not sure. If this is the case, try this as starting point.
But again, to help you out please give some extra info about the required layout.
* {
box-sizing: border-box;
}
body {
height: 100%;
margin: 0;
background-image: url('./pics-txt/group/Need2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.view {
display: flex;
width: 100%;
min-height: 100%;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.center-container {
width: 40%;
height: 20%;
margin: auto; /* center in middle */
background-color: rgba(0, 0, 0, 0.4);
}
.container {
display: flex;
padding-bottom: 10px;
border: 3px solid #f1f1f1;
color: white;
font-weight: bold;
text-align: center;
/* transform: translate(-50%, -50%); */
}
#media only screen and (max-width: 600px) {
.center-container {
width: 100%;
}
}
.item {
width: 33.333%;
padding: 2%;
/* z-index: 2; */
color: white;
font-size: 90%;
}
#text {
padding: 1%;
/* z-index: 2; */
color: white;
text-align: center;
font-size: 180%;
}
<body>
<div class="view">
<div class="center-container">
<div class="container">
<div class='item'>MOA</div>
<div class="item">Member</div>
<div class="item">Big Hit</div>
</div>
<h1 id="text">Tomorrow x Together</h1>
</div>
</div>
</body>
Related
I can't figure out why a margin is not respected when I resize to mobile view. If you resize the window, left margin is respected, however, right margin is not respected.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner-container {
position: relative;
}
.banner-image {
height: 200px;
width: 100%;
background-color: rebeccapurple;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 560px;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 32px;
padding: 24px 0;
margin: 0 10px;
}
#media screen and (max-width: 768px) {
.banner-text {
font-size: 24px;
}
}
<div class="banner-container">
<div class="banner-image"></div>
<span class="banner-text">Candidate Membership</span>
</div>
I'd appreciate if someone could explain what I'm doing wrong. Thanks.
The margin is there, but it is added to the 100% width you defined. So the element's width including margins goes beyond the container width.
.banner-text in media width : 80%
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner-container {
position: relative;
}
.banner-image {
height: 200px;
width: 100%;
background-color: rebeccapurple;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 560px;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 32px;
padding: 24px 0;
margin: 0 10px;
}
#media screen and (max-width: 768px) {
.banner-text {
font-size: 24px;
}
.banner-text{
width: 80%;
}
}
<div class="banner-container">
<div class="banner-image"></div>
<span class="banner-text">Candidate Membership</span>
</div>
I have two images that essentially need to be on top of each other. The logo is somehow stuck being an opaque white instead of the solid white my client wants it to be. How do I fix this?
HTML & CSS
<!DOCTYPE html>
<html lang="en">
<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">
<title>PALPA | Tunes for the Toasties</title>
</head>
<style>
body{
background-image:url("../img/background-min.JPG");
background-size: 100%;
background-repeat: no-repeat;
}
#palpa_white{
height: 550px;
width: 490px;
margin-left: 240px;
}
.center_container{
height: 580px;
width: 1000px;
background-color: black;
opacity: 0.7;
margin-left: 22%;
margin-top: 9%;
}
</style>
<body>
<div class = "center_container">
<img src = "../img/palpa_white.png" id = "palpa_white" alt = "kael_logo">
</div>
</body>
</html>
Image of Issue
Your CSS specifies opacity: 0.7 for the center_container div. Therefore, the child img tag also inherits this 70% opacity.
You need to override the opacity for the #palpa_white style.
#palpa_white{
height: 550px;
width: 490px;
margin-left: 240px;
opacity: 1;
}
What you need is to change opacity: 0.7; to opacity: 1; in the #palpa-white style section. Here's a demo of this:
.body {
border-radius: 10px;
max-width: 500px;
height: 300px;
margin: 0.01em auto;
background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
}
h1 {
color: #ffffff;
text-align: center;
}
body {
background: #121212;
font-family: 'Overpass', sans-serif;
}
.body #before {
position: relative;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
max-width: 250px;
height: 100px;
margin: 0.01em auto;
opacity: 0.7;
border-radius: 10px;
}
.body #after {
position: relative;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
max-width: 250px;
height: 100px;
margin: 0.01em auto;
opacity: 1;
border-radius: 10px;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
background: #121212;
border: none;
}
body::-webkit-scrollbar-thumb {
border-radius: 5px;
background-image: -webkit-linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
}
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght#300&display=swap" rel="stylesheet">
<h1>Before</h1>
<div class='body'>
<div id='before'>
</div>
</div>
<h1>After</h1>
<div class='body'>
<div id='after'>
</div>
</div>
I have tried to build a login form on a HTML page (Angular) that has a full size, centered background image and the form is placed in a div with blurred background, that is centered in the x- and y-axis of the browser window.
That is how far I came: https://codepen.io/surfermicha/pen/ZwpxBa
<div class="login-background-door2">
<div class="aero-background centered">
<h3>Here will be a login form later</h3>
</div>
</div>
Unfortunately i have some issues with that:
The centered box isn't exactly in the center
It's not responsive. The div is to small at small devices. I want 10px margin left and right, but a max-width 500px on bigger screens.
Could anyone help edit the codepen for a working responsive solution
You can set media queries by your needs, like I set into 567px because after 567px view of your center block, don't look nice so I set into 567px.
body, html {
font-family: "roboto", monospace;
color: #EEE;
padding: 0;
width: 100%;
margin: 0;
height: 100%;
overflow-x: hidden;
}
.aero-background::before {
content: '';
background: url("http://placekitten.com/2400/2000") center no-repeat;
filter: blur(6px);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
}
.aero-background {
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
align-items: center;
justify-content: center;
text-shadow: 0 0 10px black;
}
.centered {
max-width: 500px;
min-height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.login-background-door2 {
background: url("http://placekitten.com/2400/2000") center no-repeat;
height: 100%;
width: 100%;
overflow: hidden;
}
#media screen and (max-width: 567px) {
.centered {
width: 250px;
}
}
<div class="login-background-door2">
<div class="aero-background centered">
<h3>Here will be a login form later</h3>
</div>
</div>
https://codepen.io/anon/pen/MLjXgW
Centered with flex, no media queries
body, html {
font-family: "roboto", monospace;
color: #EEE;
padding: 0;
width: 100vw;
margin: 0;
height: 100vh;
overflow-x: hidden;
}
$login-background-image: "http://placekitten.com/2400/2000";
.aero-background::before{
content: '';
background: url($login-background-image) center no-repeat;
filter: blur(6px);
position: absolute;
left:0; top:0; right:0; bottom:0;
z-index: -1;
pointer-events: none;
}
.aero-background {
border-radius:5px;
box-shadow: 0 0 15px rgba(black, .4);
border:1px solid rgba(white,.1);
color: white;
align-items: center;
justify-content: center;
text-shadow:0 0 10px black;
max-width:500px;
min-height: 300px;
margin-left: 10px;
margin-right: 10px;
display: flex;
text-align: center;
padding: 10px;
}
.login-background-door2 {
background: url($login-background-image) center no-repeat;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
<div class="login-background-door2">
<div class="aero-background">
<h3>Here will be a login form later</h3>
</div>
</div>
My first time answering so I apologize if missed something
May I please know how can I align the login button to the center of the page? I can't seem to do it althoughI've tried many suggestions from previous posts like this.
Need help on this.
body {
background: white;
margin: 0;
font-family: Arial;
}
.wrapper {
text-align: center;
}
.buttonlogin {
position: absolute;
top: 50%;
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<div class="wrapper">
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</div>
</body>
You've given your button a position of absolute, so you're looking to also apply left: 50%. However, you probably actually also want to subtract the offset from your width, so that the element remains perfectly in the center. In this case, you're looking for left: 45%, as the element has a width of 10%. The same goes for top, which can be calculated with calc(50% - (48px / 2)):
body {
background: white;
margin: 0;
font-family: Arial;
}
.wrapper {
text-align: center;
}
.buttonlogin {
position: absolute;
top: calc(50% - (48px / 2));
left: 45%; /*calc(50% - (10% / 2)); */
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<div class="wrapper">
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</div>
</body>
Hope this helps :)
Is this what you want?
.buttonlogin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This put the button at the center of the html.
body {
background: white;
margin: 0;
font-family: Arial;
}
.buttonlogin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</body>
Add this:
button {
left : 50%;
}
.wrapper{
display: flex;
justify-content: center;}
<div class="wrapper">
<button> Sample </button>
</div>
.wrapper{
display: flex;
justify-content: center;
}
<body>
<table style="width:100%;height:100%">
<tr><td style="text-align:center;vertical-align:middle">
<button>Click me</button>
</td></tr>
</table>
</body>
/* Sass Document */
* {
box-sizing: border-box;
}
#TopBanner {
background: rgba(255, 255, 255, 0.35);
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
top: 10px;
left: 0;
position: absolute;
margin-left: 20px;
margin-right: 20px;
right: 0;
z-index: 5;
padding: 0 10px;
}
#Container {
background-color: #CFBDBD;
align-content: center;
align-items: center;
align-self: center;
height: auto;
width: 80%;
display: block;
margin-left: auto;
padding: 10px;
margin-right: auto;
border: thin;
z-index: 3;
}
#backgroundimage {
background-color: #D52D32;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
left: 0;
position: relative;
right: 0;
z-index: 1;
}
#Logo {
border-radius: 15px;
position: absolute;
left: 0.5%;
z-index: 2;
}
Nav ul {
z-index: 2;
list-style-type: none;
list-style-position: inside;
}
Nav li {
z-index: 2;
display: inline;
height: 90px;
width: 180px;
}
/*# sourceMappingURL=css.css.map */
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title></title>
</head>
<div id="backgroundimage">
<div id="TopBanner">
<nav>
<ul>
<li>
<img id="Logo" src="images/AWDLogo.png">
</li>
<p>Contact Us At:
<br>Call:
</p>
</ul>
</nav>
</div>
<body>
<div id="Container">
</div>
</body>
</div>
</html>
This is my code for my website. I have been trying to blur only the background, however it blurs everything. It appears that the z-index is not working. Any help on how to make everything else fine, and just the background blur is appreciated,
Thank you.
Filters affect everything within the parent element, as expected, so you need to move the filter outside anything that shouldn't be affected.
In your case, you can just close <div id="backgroundimage"></div> in the "top" of the document.
/* Sass Document */
* {
box-sizing: border-box;
}
#TopBanner {
background: rgba(255, 255, 255, 0.35);
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
top: 10px;
left: 0;
position: absolute;
margin-left: 20px;
margin-right: 20px;
right: 0;
z-index: 5;
padding: 0 10px;
}
#Container {
background-color: #CFBDBD;
align-content: center;
align-items: center;
align-self: center;
height: auto;
width: 80%;
display: block;
margin-left: auto;
padding: 10px;
margin-right: auto;
border: thin;
z-index: 3;
}
#backgroundimage {
background-color: #D52D32;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
left: 0;
position: relative;
right: 0;
z-index: 1;
}
#Logo {
border-radius: 15px;
position: absolute;
left: 0.5%;
z-index: 2;
}
Nav ul {
z-index: 2;
list-style-type: none;
list-style-position: inside;
}
Nav li {
z-index: 2;
display: inline;
height: 90px;
width: 180px;
}
/*# sourceMappingURL=css.css.map */
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title></title>
</head>
<div id="backgroundimage"></div>
<div id="TopBanner">
<nav>
<ul>
<li>
<img id="Logo" src="images/AWDLogo.png">
</li>
<p>Contact Us At:
<br>Call:
</p>
</ul>
</nav>
</div>
<body>
<div id="Container">
</div>
</body>
</html>
You also have some funky HTML (body isn't in <body>), but this seems to solve your problem.
Scott's answer works just fine,
Another solution would be this already answered question