Hello I have the following code in html:
<!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="./css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&family=Nunito+Sans:wght#300;600&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="navigation">
<div class="container">
<div class="nav-links">
<h1 class="logo">Polaris</h1>
<div class="navigation-links">
<div class="main"> Главная</div>
<div class="main">Наши услуги</div>
<div class="main">О Компании</div>
<div class="main">Контакты</div>
</div>
<div class="free-consultation">
Бесплатная консультация
</div>
</div>
</div>
</div>
</header>
<div class="main">
content
</div>
</body>
</html>
And in css
*{
box-sizing: border-box;
}
a:link, a:hover,a:visited{
text-decoration: none;
color:#FFFFFF;
}
.header{
background-image: url('../img/bg-img.jpg');
background-size: cover;
background-repeat: no-repeat;
position: absolute;
right:0;
left:0;
top:0;
width: 100%;
height:100vh;
}
.navigation{
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.navigation::before{
position: absolute;
right:310px;
top:0;
content: '';
display: block;
width: 0.5px;
height: 132px;
background: rgba(255, 255, 255, 0.5);
z-index: 1;
}
.container{
margin-left: 53px;
margin-right: 83px;
margin-top: 34px;
}
.logo{
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-size: 25px;
line-height: 125%;
/* or 31px */
letter-spacing: 0.11em;
color:rgba(255, 255, 255, 0.5);
width: 128px;
height: 31px;
}
.nav-links{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 35px;
z-index: 1;
}
.navigation-links{
display: flex;
flex-wrap: wrap;
column-gap: 60px;
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-size: 15px;
line-height: 20px;
text-align: center;
color: #FFFFFF;
}
.free-consultation{
position: relative;
font-family: 'Nunito Sans',sans-serif;
font-style: normal;
font-weight: 00;
font-size: 15px;
line-height: 20px;
text-align: center;
color: #FFFFFF;
}
.free-consultation::before{
z-index: 11212;
position: absolute;
left:-68px;
top:-10px;
content: '';
background-image: url('../img/Ellipse\ 2.svg');
width: 38px;
height: 38px;
}
.free-consultation::before::before{
content: '';
display: block;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.5);
}
.main{
}
here is the link to codesandbox:https://codesandbox.io/s/agitated-davinci-1dqujt?file=/style.css
For some reason, the next block element is not displayed on the next line, it's displayed inside another block(which is on the background image). Why is that so? Can someone help me please?
Your main issue is that your <header class="header"> is taken out of the flow byt this rule:
.header{
position: absolute;
}
Absolute Positioning
Giving an item position: absolute or position: fixed removes it from flow, and any space that it would have taken up is removed.
Source: MDN
What you want is probably to have the background on your body element.
Making sure that the body will take at least 100% of the height
html,
body {
min-height: 100%;
}
Giving the body the background-image
body {
background-image: url("./bg-img.jpg");
background-size: cover;
background-attachment: fixed;
}
Removing the absolute position related code on header
.header {
/*
background-image: url("./bg-img.jpg");
background-size: cover;
background-repeat: no-repeat;
position: absolute;
right: 0;
left: 0;
top: 0;
height: 100vh;
*/
width: 100%;
}
Related
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>
I am working on a portion of my website, a splash screen that has image in it. I am trying to create this effect on the loading image. I did use the inbuilt compiler to convert the pug to html, but my perspective is not working as expected, I am not sure where I went wrong.
Expected output:
What I managed to scrape out:
Html code:
<!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">
<link rel="stylesheet" href="css/index.css" type="text/css">
<link rel="icon" type="image/png" sizes="32x32" href="/media/faviconMedia/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/media/faviconMedia/favicon-16x16.png">
<link rel="shortcut icon" type="image/png" sizes="32x32" href="/media/faviconMedia/favicon-32x32.png">
<link rel="shortcut icon" type="image/png" sizes="16x16" href="/media/faviconMedia/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/media/faviconMedia/apple-touch-icon.png">
<link rel="manifest" href="/media/faviconMedia/site.webmanifest">
<title>Document</title>
</head>
<body>
<div class="splash">
<div class="fade-in">
<div class="persp assembly" style="--dx: 0">
<div class="panel" style="--i: 0; --k: 0.25; --p: 0; --dx: 0; --dz: -0.2"></div>
<div class="panel" style="--i: 1; --k: 0.5; --p: 0.25; --dx: -0.1; --dz: 0"></div>
<div class="panel" style="--i: 2; --k: 0.25; --p: 0.75; --dx: 0; --dz: 0"></div>
</div>
</div>
</div>
<div class="container" data-0="transform:translateX(0%);" data-1000="transform:translateX(-200%);">
<div class="navbar">
<nav>
<img src="media/2020-02-29.jpg" class="Logo">
<ul>
<li><a onclick="window.scrollBy({top:0,left:0,behavior:'smooth'});">About Me</a></li>
<li><a onclick="window.scrollBy({top:500,left:0,behavior:'smooth'});">Yeah</a></li>
<li><a onclick="window.scrollBy({top:1000,left:0,behavior:'smooth'});">LGTM</a></li>
</ul>
</nav>
</div>
<section>
<div class="content">
<h1>1</h1>
<p>
Page 1
</p>
</div>
</section>
<section>
<div class="content">
<h1>2</h1>
<p>
Page 2
</p>
</div>
</section>
<section id="3">
<div class="content">
<h1>3</h1>
<p>
Page 3
</p>
</div>
</section>
</div>
<script type="text/javascript" src="js/ScrollX.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>
<script type="text/javascript" src="js/SplashScreen.js"></script>
</body>
</html>
Scss file:
$url: 'https://c4.wallpaperflare.com/wallpaper/321/642/544/space-galaxy-stars-andromeda-wallpaper-preview.jpg';
$w: 85vmin;
$h: 65vmin;
$f: .25;
body{
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Candara;
.splash{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #000;
z-index: 200;
color: aliceblue;
text-align: center;
line-height: 100vh;
}
.splash.display-none{
position: fixed;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #000;
z-index: -10;
color: aliceblue;
text-align: center;
line-height: 100vh;
transition: all 2.5s;
}
.persp{
position: absolute;
transform-style: preserve-3d;
}
.assembly {
top: 50%; left: calc(50% - .5*var(--dx)*#{$w});
transform: rotatey(35deg)
}
.panel {
--mid: calc((var(--p) + var(--k)*#{$f})*#{$w});
transform: translate3d(calc(var(--dx)*#{$w}), 0, calc(var(--dz)*#{$w}));
&:before, &:after {
position: absolute;
margin: -.5*$h (-.5*$w);
width: $w; height: $h;
background: url($url) 50%/ cover;
content: ''
}
&:before {
transform-origin: var(--mid);
transform: rotatey(-90deg);
clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
filter: brightness(.4)
}
&:after {
clip-path: inset(0 calc(100% - (var(--p) + var(--k))*#{$w}) 0 var(--mid))
}
}
.fade-in{
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
.navbar{
margin: 0;
overflow: hidden;
width: 100%;
top: 0;
position: fixed;
}
nav{
background: black;
display: flex;
width: 100%;
align-items: center;
flex-wrap: wrap;
.Logo{
width: 55px;
cursor: pointer;
}
ul{
flex: 1;
text-align: right;
padding-right: 20px;
li{
display: inline-block;
list-style: none;
margin: 10px;
a{
color: aliceblue;
text-decoration: none;
position: relative;
&:hover::after{
width: 50%;
}
&::after{
content: '';
width: 0;
height: 3px;
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
background: aliceblue;
transition: width 0.3s;
}
}
}
}
}
.container{
width: 100%;
height: 100%;
display: flex;
position: fixed;
top: 0;
left: 0;
section{
display: flex;
justify-content: center;
align-items: center;
min-width: 100%;
height: 100vh;
scroll-margin: 100px;
&:nth-of-type(1){
background-color: rgb(255, 152, 152);
color: aliceblue;
}
&:nth-of-type(2){
background-color: rgb(27, 54, 54);
color: aliceblue;
}
&:nth-of-type(3){
background-color: rgb(12, 39, 39);
color: aliceblue;
}
.content{
max-width: 800px;
padding: 40px;
text-align: center;
h1{
font-size: 4em;
}
p{
font-size: 1.3em;
line-height: 1.4em;
}
}
}
}
#media (max-width: 991px) {
.container{
position: absolute;
display: flex;
flex-direction: column;
height: auto;
transform: none !important;
}
}
#keyframes fadeIn {
to{
opacity: 1;
}
}
}
Splashscreen.js:
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e)=>{
setTimeout(()=>{
splash.classList.add('display-none');
}, 2250);
})
I have to write a website for school and I want to use box-shadow in CSS but it doesn't work. There is not a shadow. I want to have the shadow under the header div box
html
<html>
<head>
<title>DABA - Videoverleih</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="header">
<h1>Videoverleih</h1>
</div>
<div id="content">
</div>
</body>
CSS
#header {
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
background-color: #AA0000;
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 12%;
}
#header h1 {
color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#content {
background-color: #FFFFFF;
position: absolute;
left: 0;
top: 12%;
width: 100%;
height: 88%;
}
What can I do to make it work?
The box-shadow is there. But using position: absolute has made #content stack above the #header.
If you want to use position, you can add z-index to ensure the header stacks on top.
Information about z-index
#header {
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
background-color: #AA0000;
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 12%;
z-index: 1;
}
#header h1 {
color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#content {
background-color: #FFFFFF;
position: absolute;
left: 0;
top: 12%;
width: 100%;
height: 88%;
}
<div id="header">
<h1>Videoverleih</h1>
</div>
<div id="content">
</div>
Try adding z-index: 1; to your #header css :)
I am practicing html and css and want to make a website, but the text isn't scaling properly.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
</head>
<body>
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background"></div>
<div id="home-div">
<p id="home-text">Home</p>
</div>
<div id="home-div-button"></div>
</div>
</body>
</html>
css:
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
background-size: cover;
}
html, body {
height: 100%;
}
#huge {
width: 85.8%;
height: 100%;
position: relative;
background-color: rgba(255, 103, 48, 0.5);
left: 7%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 77.5%;
height: 22.5%;
border-radius: 70px;
top: 2.5%;
left: 11%;
background-color: rgba(255,255,255, .2);
z-index: 1
}
#home-div {
background-color: rgb(249, 162, 100);
width: 19.5%;
height: 12%;
border-radius: 30px;
color: #FFFFFF;
position: fixed;
left: 12%;
top: 6%;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 20%;
height: 12%;
border-radius: 30px;
z-index: 1;
top: 8%;
left: 12.5%;
position: fixed;
}
#home-text {
font-size: 3.3em;
font-family: Comfortaa;
text-align: center;
line-height: 1.3em;
top: 2.3%;
left: 13%;
}
When I resize my browser everything scales except the text, which starts going out of the button that it is on top of.
I can't find an easy answer for this anywhere. All I need is a technique that I can repeat for other situations that will make the text scale with everything else.
body { background-image: url('http://wallpapercave.com/wp/adsKXLw.png'); background-repeat: no-repeat; background-size: cover; } html, body { height: 100%; } #huge { width: 85.8%; height: 100%; position: relative; background-color: rgba(255, 103, 48, 0.5); left: 7%; } .navbar div, .navbar div p { position: fixed; } #navbar-background { width: 77.5%; height: 22.5%; border-radius: 70px; top: 2.5%; left: 11%; background-color: rgba(255,255,255, .2); z-index: 1 } #home-div { background-color: rgb(249, 162, 100); width: 19.5%; height: 12%; border-radius: 30px; color: #FFFFFF; position: fixed; left: 12%; top: 6%; z-index: 2; border-top: 1px white solid; border-left: 1px solid white } #home-div-button { background-color: rgb(200, 131, 78); width: 20%; height: 12%; border-radius: 30px; z-index: 1; top: 8%; left: 12.5%; position: fixed; } #home-text { font-size: 3.3em; font-family: Comfortaa; text-align: center; line-height: 1.3em; top: 2.3%; left: 13%; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website</title> <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> <link href="style.css" rel="stylesheet" text="text/css"> </head> <body> <div id="huge"></div> <div class="navbar"> <div id="navbar-background"></div> <div id="home-div"> <p id="home-text">Home</p> </div> <div id="home-div-button"></div> </div> </body> </html>
If you put the snippet to a full page, then the text will be in the right spot.
/* 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