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 :)
Related
I am attempting to get a css box shadow from a circular to appear underneath a nav bar that appears under the image itself. At the moment I can get the image to create a shadow that appears on top of the nav bar but I want it to appear that it is all one object.
I've tried using :before on the class ".logo" and putting the shadow at a different z-index but it just makes the shadow disappear. I'm rather new to web stuff (as well as stack overflow) so any help will be appreciated.
This is the css I'm using and the issue is with the logo class
html{
overflow-y: scroll;
}
body {
font-family: "Arial", Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
color: #DCDCDC;
background-color: #222035;
margin: 0px;
}
.centered {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.logo {
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: 100%;
}
.logo:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
border-radius:100%;
box-shadow: 0 2vh 5vh #000000;
}
.topnav {
box-shadow: 0px 2vh 5vh #000000;
width: 100%;
height: 15vh;
background-color: #222035;
}
header {
padding: 170px;
}
And the rest of the HTML
<!DOCTYPE html>
<html lang="en-UK">
<head>
<title>WOW</title>
<link rel="icon" href="icon.png">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="topnav">
<img class = "logo" src="icon.png"></nav>
</body>
You may use filter: filter:drop-shadow(0px 2vh 5vh #000000); on the nav itself instead a box-shadow.
drop-shadow() follows the shape of the container while box-shadow follows the original shape of the container (rectangle).
see: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
example
html {
overflow-y: scroll;
}
body {
font-family: "Arial", Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
color: #DCDCDC;
background-color: #222035;
margin: 0px;
}
.centered {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.logo {
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: 100%;
}
.logo:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
border-radius: 100%;
}
.topnav {
filter: drop-shadow(0px 3px 5px #fff);/* make it obvious for the demo */
width: 100%;
height: 15vh;
background-color: #222035;
}
header {
padding: 170px;
}
<nav class="topnav">
<img class="logo" src="https://i.ibb.co/1bkLMQt/Suit-Yourself-logo-2.png">
</nav>
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.
I will show you with this example:
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
overflow: scroll;
background-size: 1050px 500px;
height: 100%;
margin: 0 auto;
}
#huge {
width: 900px;
height: 498px;
position: absolute;
background-color: rgba(255, 103, 48, 0.5);
left: 75px;
top: 0%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 820px;
height: 110px;
border-radius: 70px;
top: 11px;
left: 115px;
background-color: rgba(255,255,255, .2);
z-index: 1
}
#home-div {
background-color: rgb(249, 162, 100);
width: 210px;
height: 60px;
border-radius: 30px;
position: fixed;
left: 135px;
top: 30px;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 215px;
height: 60px;
border-radius: 30px;
z-index: 1;
top: 40px;
left: 140px;
position: fixed;
}
#home-text {
font-family: Comfortaa;
text-align: center;
top: 10px;
left: 145px;
font-size: 30px;
color: #FFFFFF;
}
#clan-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 505px;
top: 40px;
position: fixed;
border-radius: 10px 0px 0px 10px;
}
#clan-text {
left: 512px;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#clan-div-2 {
width: 90px;
height: 45px;
border: 2px white solid;
left: 597px;
top: 40px;
position: fixed;
border-radius: 0px 10px 10px 0px;
}
#clan-text-2 {
left: 610px;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#games-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 712px;
top: 40px;
position: fixed;
border-radius: 10px;
}
#games-text {
font-size: 20px;
font-family: Comfortaa;
color: #FFFFFF;
top: 35px;
left: 723px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Own Clan Website</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
<link href="script-1.js" type="text/javascript">
</head>
<body>
<div div="everything">
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background"></div>
<div id="home-div">
<p id="home-text">Home Thing</p>
</div>
<div id="home-div-button"></div>
<div id="clan-div">
<p id="clan-text">Thing<br>Button</p>
</div>
<div id="clan-div-2">
<p id="clan-text-2">Hello <br>World</p>
</div>
<div id="games-div">
<p id="games-text">Stuff</p>
</div>
</div>
</div>
</body>
</html>
The navbar is set to fixed so that the it will stay when the user scrolls down or up. The problem is that if the user's screen is small then when they scroll sideways the navbar will stay with them.
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
overflow: scroll;
background-size: 1050px 500px;
height: 100%;
margin: 0 auto;
}
#huge {
width: 900px;
height: 498px;
position: absolute;
background-color: rgba(255, 103, 48, 0.5);
left: 75px;
top: 0%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 100%;
height: 110px;
border-radius: 70px;
top: 11px;
background-color: rgba(255,255,255, .2);
z-index: 1;
}
#home-div {
background-color: rgb(249, 162, 100);
width: 40%;
height: 60px;
border-radius: 30px;
position: fixed;
left: 5px;
top: 30px;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white;
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 40%;
height: 60px;
border-radius: 30px;
z-index: 1;
left: 8px;
top: 40px;
}
#home-text {
font-family: Comfortaa;
text-align: center;
width: 40%;
left: 10px;
font-size: 18px;
color: #FFFFFF;
}
#clan-div {
width: 16%;
height: 45px;
border: 2px white solid;
left: 250px;
top: 40px;
position: fixed;
border-radius: 10px 0px 0px 10px;
}
#clan-text {
left: 275px;
width: 9%;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#clan-div-2 {
width: 15%;
height: 45px;
border: 2px white solid;
left: 342px;
top: 40px;
position: fixed;
border-radius: 0px 10px 10px 0px;
}
#clan-text-2 {
left: 365px;
top: 35px;
width: 9%;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#games-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 445px;
top: 40px;
position: fixed;
border-radius: 10px;
}
#hello {
width: 100%;
}
#games-text {
font-size: 20px;
font-family: Comfortaa;
color: #FFFFFF;
top: 35px;
left: 468px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Own Clan Website</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
<link href="script-1.js" type="text/javascript">
</head>
<body>
<div div="everything">
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background">
<div id="home-div">
<p id="home-text">Home Thing</p>
</div>
<div id="home-div-button"></div>
</div>
</div>
</div>
</body>
</html>
See if this helps, you should look into Bootstrap or Foundation as well.
/* 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
I am getting problems with the website I'm working on while zooming in and out. The layout is getting messed while zooming.
The items in the header won't stay centered, but moving to the left while zooming out, or moving to the right while zooming in.
Also, I have a image background (in CSS) and it won't stay centered when zooming in. Could I get some help with this problem. Thanks
Here is the HTML and CSS code:
body,
html {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
margin: 0 auto;
}
#header-wrapper {
background: #ebebeb;
width: 100%;
height: 50px;
position: fixed;
z-index: 10;
box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.65);
}
#header {
width: 80%;
height: 50px;
margin: 0 auto;
bottom: 20px;
position: relative;
}
#logo {
width: 128px;
height: 50px;
background-image: url("pictures/logo2.png");
margin-left: 250px;
float: left;
background-repeat: no-repeat;
position: relative;
top: 28px;
}
#nav-wrapper {
width: 650px;
height: 50px;
margin-right: 340px;
position: relative;
top: 35px;
}
#nav {
font-family: 'Roboto Condensed', sans-serif;
}
#nav li {
list-style-type: none;
display: inline;
padding: 10px;
font-size: 15px;
}
#home {
width: 100%;
height: 810px;
background-image: url("pictures/banner3-2.png");
background-size: cover;
position: fixed;
top: 50px;
}
#about {
width: 100%;
height: 820px;
background: #ebebeb;
position: relative;
top: 860px;
}
#lorem {
width: 100%;
height: 820px;
background: #46717f;
position: relative;
top: 860px;
}
#contact {
width: 100%;
height: 200px;
background: black;
position: relative;
top: 860px;
}
#header-wrapper a {
color: black;
}
#header-wrapper a:link {
color: black;
text-decoration: none;
}
#header-wrapper a:hover {
color: #46717f;
}
#header-wrapper a:active {
color: white;
text-decoration: none;
}
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/8bit-wonder" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<div id="wrapper">
<h1 id="homee"></h1>
<div id="header-wrapper">
<div id="header">
<div id="logo"></div>
<div id="nav-wrapper">
<div id="nav">
<ul class="nav">
<li>HOME
</li>
<li>ABOUT
</li>
<li>LOREM
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="home">
</div>
<div id="about">
</div>
<h1 id="aboutt"></h1>
<div id="lorem">
</div>
<h1 id="loremm"></h1>
<div id="contact"></div>
<h1 id="contactt"></h1>
</div>