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
Related
when I scroll down on my page, my container overlap the header, but I want my header to overlap the container, so I made my header on a fixed position, but it does not work
here is my html code:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="page">
<header class="leheader">
<div id="bloc1"></div>
<img src="https://i.imgur.com/dm6H7GV.png">
<div id="bloc2"></div>
</header>
<main class="container"></main>
</div>
</body>
</html>
and here is my css code:
body,
html,
.page {
background: #666666;
width: 99%;
height: 100%;
}
.leheader {
display: flex;
width: 99%;
position: fixed;
flex: 1 100%;
height: calc(100%-50px);
}
#bloc1 {
margin-left: 1px;
margin-top: 0.5px;
height: 50px;
width: 90px;
background: #cccccc;
border-radius: 10px 0 0 0;
}
#bloc2 {
background: #467491;
margin-top: 4px;
width: 93%;
height: 37px;
}
.container {
position: absolute;
top: 57px;
left: 9px;
background: #cccccc;
width: 99%;
height: calc(100% - 33px);
}
where is the problem ?
Try adding the z-index property to the header.
like this....
z-index: 2
In CSS to make something Fixed position you also need to give it a z-index (which is its position on z-axis). Read more about Z-Index here. Apart from it you also have to give it a position in terms of top, left, bottom and left to tell it where it has to fixed.
.leheader {
display: flex;
width: 99%;
position: fixed;
top:0;
left:0;
z-index:2;
flex: 1 100%;
height: calc(100%-50px);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
#content{
width: 100%;
height: 100%;
margin-left: -8px;
margin-top: -8px;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: relative;
background-color: #615e57;
width: 100%;
height: 100%;
border: 1px solid grey;
margin-left: 250px;
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
I'd like to ask why the div #maincontainer doesnt display with widht/height when they are set to be a 100%? If I switch them to a value, not a % it works perfectly fine...
And I'd also like to ask why do I have to set margin-left on that exact div just to make it 100% visible on the page, but it starts from the top (where the topsidecontainer starts) and not from the leftsidecontainer div as well.
Infos:
Position fixed works as the fixed position for the viewport which leave the space for the content you used (i.e the container of it)
without element inside it all container become 0 heighten (i.e body is 0 in height)
if ones parent's height is 0, then it's 100% height will not works which indicates the height of 100% is relative to it's parent. so, 100% of 0 is 0.
use vw or vh instead of 100% for this purpose. becuse it is relative to screen size.
topSideContainer & leftSideContainer are lost their spaces, so mainContainer starts from 0,0 position
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
*{
margin:0;
padding:0;
}
#content{
width: 100%;
height: 100%;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: relative;
background-color: #615e57;
width: calc(100vw - 250px);
height: calc(100vh - 60px);
border: 1px solid grey;
left: 248px;
top: 58px;
}
</style>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
% is a relative unit, when you say height:100% you mean i want this element to take the 100% of the height of it's parent.
You want #mainContainer to be have height:100% of it's parent, Well what is that parent ? and what is that parent's height ?
The parent is #content and it is also height:100% of it's parent, Well what is that parent ? and what is that parent's height ?
The parent is <body> and it's height is 0. Why? Because you didn't specify a height for it.
Do you see a pattern forming here ?
height:100% On the other elements work because you set their position to fixed, because of that they become relative to the initial containing block that is being <html>/viewport and <html>/viewport has a height/width (the browser basically)
Note: A position other than static or relative will take the element out of the document flow, meaning it will not affect other elements and there could be overlap
To achieve that layout, we can simply using flexbox if you don't mind changing the html.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
/* propagate the height from the html down to the body then #content */
}
#content {
display: flex;
flex-direction: column;
height: 100%;
}
#topSideContainer {
flex: 0 0 60px;
background-color: red;
}
#bottomSideContainer {
display: flex;
flex: 1;
}
#leftSideContainer {
flex: 0 0 250px;
background-color: orange;
}
#mainContainer {
height: 100%;
flex: 1 0 0;
background-color: pink;
}
<div id="content">
<div id="topSideContainer">
topSideContainer
</div>
<div id="bottomSideContainer">
<div id="leftSideContainer">
leftSideContainer
</div>
<div id="mainContainer">
mainContainer
</div>
</div>
</div>
Or CSS Grid without changing the html
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#content {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr;
height: 100%;
}
#topSideContainer {
background-color: red;
grid-column: span 2;
}
#leftSideContainer {
background-color: orange;
}
#mainContainer {
background-color: pink;
}
<div id="content">
<div id="topSideContainer">
topSideContainer
</div>
<div id="leftSideContainer">
leftSideContainer
</div>
<div id="mainContainer">
mainContainer
</div>
</div>
Note: If the above code didn't work for you, try to share the link to your website so we can look and analyze your style sheet if you have any forced instructions that stopped the code to work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
#content{
width: 100%;
height: 100%;
margin: -8px;
padding: -8px;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: absolute !important;
background-color: #615e57;
max-width: 200% !important;
width: 100% !important;
background: yellow;
height: 100%;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
I want a very thin horizontal line. (The result of the code below is exactly what I want)
The problem is If I want to set the position to absolute the line disappears?!
What I'm missing?
I've tried to change the position using margins but still...
.nav-bar {
/*position: absolute;*/
border-bottom: 1px solid rgba(204,193,218,1);
margin-top: 60vh;
margin-left: 10vw;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="nav-bar">
</body>
</html>
You're missing width: 100%;. div elements have this by default if they are normally positioned, but it needs to be manually set the you are using relative positioning.
At the moment, your line is being displayed with a width of 0, which is why you can't see it.
Also note: your div was missing a closing tag, I have fixed that in the code snippet below.
.nav-bar {
width: 100%;
position: absolute;
border-bottom: 1px solid rgba(204, 193, 218, 1);
margin-top: 60vh;
margin-left: 10vw;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="nav-bar">
</div>
</body>
</html>
Unless you specify either width or left/right positioning the element will be rendered with a width of 0. So you need to either write this
.nav-bar {
position: absolute;
left:0px;
right: 0px;
border-bottom: 1px solid rgba(204,193,218,1);
margin-top: 60vh;
margin-left: 10vw;
}
Or this
.nav-bar {
position: absolute;
width: 100%;
border-bottom: 1px solid rgba(204,193,218,1);
margin-top: 60vh;
margin-left: 10vw;
}
.nav-bar {
position: absolute;
/*left:0px;
right: 0px;*/
border-bottom: 1px solid rgba(204,193,218,1);
margin-top: 60vh;
margin-left: 10vw;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="nav-bar"/>
</body>
</html>
When you use position: absolute, you need to explicitly specify the element's width and height. And on a side note, your div does not have a closing tag.
.nav-bar {
position: absolute;
border-bottom: 1px solid rgba(204,193,218,1);
margin-top: 60vh;
margin-left: 10vw;
width:100%;
height:50px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="nav-bar"> </div>
</body>
</html>
When opening this up in a browser, the combined width of the two divs does not fully fulfill the width of the body. I have made the background color of the second (right) div black so you can see the white space between the second div and the right side of the page. I tried messing with the border, margin but maybe I did it wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
CSS:
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
}
#div1 {
height: 756px;
width: 300px;
border: 2px solid black;
float: left;
}
#div2 {
height: 758px;
width: 1216px;
overflow: hidden;
background-color: black;
}
Position the divs absolutely and apply media queries so they will be responsive. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
<style>
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
width: 100%;
}
#div1 {
height: 756px;
width: 25%; //change width to fit your need
border: 2px solid black;
float: left;
left:0;
position: absolute;
}
#div1 img{
left: 0;
}
#div2 {
height: 758px;
width: 75%; //change width to fit your need
overflow: hidden;
background-color: blue;
right:0;
position: absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
Since you are using fixed width, it will not adjust properly to your screen. And in different resolutions it will not adjust correctly to your screen size. Instead use % width.
#div1 {
height: 756px;
width: 35%;
float: left;
}
#div2 {
height: 758px;
width: 65%;
overflow: hidden;
background-color: black;
}
I've setup this fiddle with your example: https://jsfiddle.net/5yfnLcdt/
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>