/* 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
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'm following a YouTube video about making websites and his website looks like this:
and mine looks like this:
As you can see, the icon is in the navigation bar and itself has a little of space between the Google web browser bar, and my website doesn't have all of this.
I looked the lowercase letters and to my it's fine everything, look any grammar error and frankly don't see any error
This is my code:
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">
<link rel="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<title>pomodone.app</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar"></div>
<div class="main"></div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar{
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2{
color: #df7f27;
}
.search{
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user{
position: relative;
width: 50px;
height: 50px;
}
.user img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
Thank you in advance
#Iomipac, you need to set position to the label.
Please add this style. Hope it is helpful~.
.search >label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar {
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2 {
color: #df7f27;
}
.search {
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search >label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user {
position: relative;
width: 50px;
height: 50px;
}
.user img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search">icon<i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar"></div>
<div class="main"></div>
</div>
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%;
}
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.