Hi I am facing the shadow disappear issue when moving child div to below the sticky parent div.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
min-height: 100% !important;
}
body{
margin: 0;
background-color: #470c77;
}
.header{
width: 100%;
height: 50px;
background-color: rgb(238, 238, 238);
box-shadow: 0px 0px 6px 2px #000000;
position: sticky;
top: 0;
}
.view{
width: 100%;
height:25%;
background-color: rgb(255, 255, 255);
position: fixed;
top: 50px;
z-index: 0;
}
</style>
</head>
<body>
<div class="header">
<!-- TODO:- Some elements here -->
<div class="nav">
<!-- TODO:- Some Elements Here -->
<div class="view">
</div>
</div>
</div>
</body>
</html>
The main problem is shadow disappears from nav. If I make top: 50px; to view then the shadow appears. But background color of the body also visible.
current layout:
Expected Layout:
Please help me to solve this problem with CSS only.
If you want to achieve the box-shadow to a sticky element, then you need to use :after pseudo class and give the shadow there like,
.header:after {
z-index: -1;
position: absolute;
content: "";
bottom: 7px;
left: auto;
width: 100%;
top: 0;
box-shadow: 0px 0px 6px 2px #000000;
}
And modify the header class css like below snippet,
html, body{
min-height: 100% !important;
}
body{
margin: 0;
background-color: #470c77;
}
.header{
width: 100%;
height: 50px;
background-color: rgb(238, 238, 238);
position: sticky;
top: 0;
}
.header:after {
z-index: -1;
position: absolute;
content: "";
bottom: 7px;
left: auto;
width: 100%;
top: 0;
box-shadow: 0px 0px 6px 2px #000000;
}
.view{
width: 100%;
height:25%;
background-color: rgb(255, 255, 255);
position: fixed;
top: 50px;
z-index: 0;
}
<div class="header">
<!-- TODO:- Some elements here -->
<div class="nav">
<!-- TODO:- Some Elements Here -->
<div class="view">
</div>
</div>
</div>
Try this:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
min-height: 100% !important;
}
body{
margin: 0;
background-color: #470c77;
}
.header{
width: 100%;
height: 50px;
background-color: rgb(238, 238, 238);
-webkit-box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
-moz-box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
position: sticky;
top: 0;
}
.view{
width: 100%;
height:25%;
background-color: rgb(255, 255, 255);
position: fixed;
top: 50px;
z-index: 0;
}
</style>
</head>
<body>
<div class="header">
<!-- TODO:- Some elements here -->
<div class="nav">
<!-- TODO:- Some Elements Here -->
<div class="view">
</div>
</div>
</div>
</body>
</html>
To hide the background, you can increase .view height
So basically, the shadow wasn't removed or disappeared, it's just that it's hidden under the .view div. So here's what you gonna do, just remove the box-shadow on header since it's hidden, add update the background of your .view div. See my code below:
html, body{
min-height: 100% !important;
}
body{
margin: 0;
background-color: #470c77;
}
.header{
width: 100%;
height: 50px;
background-color: rgb(238, 238, 238);
position: sticky;
top: 0;
}
.view{
width: 100%;
height:25%;
background: linear-gradient(to bottom, #999 0, #fff 7px, #fff 100%);
position: fixed;
top: 50px;
z-index: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<!-- TODO:- Some elements here -->
<div class="nav">
<!-- TODO:- Some Elements Here -->
<div class="view">
</div>
</div>
</div>
</body>
</html>
Related
I am facing a problem with resizing background image in flexbox.
What want to do is that background image is shrinking horizontally, rather than vertically whilst resizing a browser's window.
I tried different background-size properties and tried with max and min height/width as well as flex-shrink and nothing works for me.
Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.image-header {
display: flex;
min-height: 75vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/190403-pancakes-066-copy-1554497284.jpeg?crop=0.777xw:0.584xh;0.115xw,0.315xh&resize=1200:*');
background-repeat: no-repeat;
background-attachment: fixed;
max-width: 100%;
background-size: contain;
position: relative;
}
.image-header h1 {
color: white;
padding: 25px;
text-shadow: 2px 2px 2px black;
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="main-image">
<div class="image-header">
<h1>Easy Fluffy American Pancakes</h1>
</div>
</body>
</html>
This should work for you below.
https://jsfiddle.net/pa5dbk8j/#&togetherjs=mk3zhMtk7M
.image-header
I added height to the image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.image-header {
display: flex;
min-height: 75vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/190403-pancakes-066-copy-1554497284.jpeg?crop=0.777xw:0.584xh;0.115xw,0.315xh&resize=1200:*');
background-repeat: no-repeat;
background-attachment: fixed;
max-width: 100%;
max-height:100%;
background-size: contain;
position: relative;
}
.image-header h1 {
color: white;
padding: 25px;
text-shadow: 2px 2px 2px black;
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="main-image">
<div class="image-header">
<h1>Easy Fluffy American Pancakes</h1>
</div>
</div>
</body>
</html>
So I am having a bit of a issue that I just cannot figure out. I have a website that has a div before and after a google map Embed (iframe). The bottom portion of the map shows the shadow of the below div but whenever I negative z-index and position relative the shadow shows up but the functions no longer work on the map... Is there a way to have the shadow show up and still have function of the map?
So in short if I have the shadow show up it stops all map functions from being unusable (drag / zoom / etc.). The only issue is the top shadow as the bottom shows up with no issue. If I remove the z-index: -10 from the map the functions come back but the shadow is gone... Any tips?
Code example:
HTML
#menu-divider {
z-index: 1;
width: 100%;
height: 100px;
background-color: #000;
box-shadow: 0px 0px 12px #000;
}
#map {
position: relative;
z-index: -10;
width: 100%;
height: 300px;
border: none;
}
footer {
z-index: 1;
position: relative;
width: 100%;
background-color: #000;
height: 100px;
box-shadow: 0px 0px 12px #000;
}
<!doctype html>
<html lang="en-us">
<head>
<title>example</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="menu-divider">
</div>
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11797.683090046503!2d-83.05766876093261!3d42.333551617017015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x883b2d31a25efc0f%3A0x114c7a5b16dfbdd4!2sDowntown%2C+Detroit%2C+MI!5e0!3m2!1sen!2sus!4v1534087083348" allowfullscreen></iframe>
<footer></footer>
</body>
</html>
Ok I'm stupid and figured it out myself... Had to add position: relative and
z-index: 10 to #menu-divider and wrap the map in a holder.
EDIT: Add height to match map to holder to remove white space at bottom...
Working code:
#menu-divider {
position: relative;
z-index: 10;
width: 100%;
height: 100px;
background-color: #000;
box-shadow: 0px 0px 12px #000;
}
#map-holder {
position: relative;
height:300px;
}
#map {
width: 100%;
height: 300px;
border: none;
}
footer {
z-index: 1;
position: relative;
width: 100%;
background-color: #000;
height: 100px;
box-shadow: 0px 0px 12px #000;
}
<!doctype html>
<html lang="en-us">
<head>
<title>example</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="menu-divider">
</div>
<div id="map-holder"><iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11797.683090046503!2d-83.05766876093261!3d42.333551617017015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x883b2d31a25efc0f%3A0x114c7a5b16dfbdd4!2sDowntown%2C+Detroit%2C+MI!5e0!3m2!1sen!2sus!4v1534087083348" allowfullscreen></iframe></div>
<footer></footer>
</body>
</html>
Try this:
#layout {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
background-color: #000;
box-shadow: 0px 0px 12px #000;
height: 100px;
z-index: 10;
}
main {
flex: 1;
}
#map {
border: none;
min-height: 300px;
height: calc(100vh - 200px);
position: relative;
width: 100%;
}
<div id="layout">
<header></header>
<main>
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11797.683090046503!2d-83.05766876093261!3d42.333551617017015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x883b2d31a25efc0f%3A0x114c7a5b16dfbdd4!2sDowntown%2C+Detroit%2C+MI!5e0!3m2!1sen!2sus!4v1534087083348" allowfullscreen></iframe>
</main>
<footer></footer>
</div>
Better DEMO here
I want to put a picture right to left of my header div.
Failed to do it. Could you help me?
The Div is 80% width
and centered with "margin: 0 10%;"
HTML Code:
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div id="header">
</div>
</head>
CSS Code :
body {
background-color: darkgray;
background-image: url('../images/website.jpg');
background-repeat: repeat-x;
}
#logo {
position: fixed;
display: inline-block;
left: 0px;
top: 0px;
margin: 0 10%;
z-index: 2;
}
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height : 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
Right aligned to the outside of the red box header?
Could do something like this and change the left: -279px to the width of your logo
body {
background-color: darkgray;
background-image: url('../images/website.jpg');
background-repeat: repeat-x;
}
#logo {
position: absolute;
display: inline-block;
left: -279px;
top: 0px;
z-index: 2;
}
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height : 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Yakir Freed" />
</div>
</body>
</html>
My content in .box for some reason is going over my header, but not my footer when you resize the window. I was trying to make the footer/header fixed, so they don't move and have content go over them when the window is resized. But like I said it only works for the footer and the header allows content to go over it. So I'm wondering what can I do to fix this? Thanks.
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
Set a z-index for the header with a higher number than the .box which are both 0 by default. So, like try z-index: 999; You can decide to set a higher z-index value for the footer too, although, as it is added after the .box element in the html layout, it will show on top by default.
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
Also, in the example, I decided to change the .box css. Not positive why you have the other css styles. Guess you were working on something a bit different.
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
/* top: 50%; */
/* left: 50%; */
/* position: absolute; */
/* transform: translate(-50%, -50%); */
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
z-index: 10;
}
Using these updated classes you can achieve what you are looking for.
I would like to make continuous pull-out elements. I seem able to create one just fine, but am having difficulties creating any more than that. The effect I am after is that when you scroll down, item 2 gets revealed from underneath, and then when you keep scrolling, item 3 gets revealed from underneath item 2. I'd like this to keep going for as many items I add.
Here's the first snippet, with 3 items. It is not working properly:
html, body{
padding: 0;
margin: 0;
}
.text-center{
text-align: center;
}
#item-1{
position: relative;
height: 500px;
margin-bottom: 500px;
background-color: white;
border-bottom: 5px solid gray;
}
#item-2{
background-color: green;
border-bottom: 5px solid gray;
z-index: -1;
}
#item-3{
background: yellow;
z-index: -1;
}
.slide-item{
text-align: center;
height: 500px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="item-1" class="text-center">
First item!
<div id="item-2" class="slide-item text-center">
Second item!
<div id="item-3" class="slide-item text-center">
Third item!
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js" type="text/javascript"></script>
</body>
</html>
Here is another snippet, with only two items, which appears to be working, except the text isn't showing up (it shows up fine on my test page, though).
html, body{
padding: 0;
margin: 0;
}
.text-center{
text-align: center;
}
#item-1{
position: relative;
height: 500px;
margin-bottom: 500px;
background-color: white;
border-bottom: 5px solid gray;
}
#item-2{
background-color: green;
border-bottom: 5px solid gray;
z-index: -1;
}
#item-3{
background: yellow;
z-index: -1;
}
.slide-item{
text-align: center;
height: 500px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="item-1" class="text-center">
First item!
<div id="item-2" class="slide-item text-center">
Second item!
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js" type="text/javascript"></script>
</body>
</html>