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>
Related
I am trying to apply margin-top on .leaf class but margin also applies to its parent I want to apply margin-top to .leaf class only?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.tree {
height: 400px;
width: 400px;
background-color: red;
}
.leaf {
height: 30px;
width: 30px;
background-color: yellow;
margin: 10px;
}
</style>
</head>
<body>
<div class="tree">
<div class="leaf" style="margin-top:100px"></div>
</div>
</body>
</html>
You can use overflow: hidden; in your parent div in this case.
.tree {
height: 400px;
width: 400px;
background-color: red;
overflow: hidden;
}
.leaf {
height: 30px;
width: 30px;
background-color: yellow;
margin: 10px;
margin-top: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="tree">
<div class="leaf"></div>
</div>
</body>
</html>
You can use position relative:
.leaf {
position: relative;
top: 100px;
height: 30px;
width: 30px;
background-color: yellow;
margin: 100px 10px 10px 10px;
}
The margin does not affect the child's position in relation to its parent, unless the parent has padding, in which case most browsers will then add the child's margin to the parent's padding.
Then add some padding to your parent element
.tree {
height: 400px;
width: 400px;
background-color: red;
padding:1px;
}
But if you don't need to apply padding for the parent element, put before the child element.
Full Answer
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.tree {
height: 400px;
width: 400px;
background-color: red;
}
.leaf {
height: 30px;
width: 30px;
background-color: yellow;
margin: 10px;
}
</style>
</head>
<body>
<div>
<div class="tree">
<div class="leaf" style="margin-top:100px"></div>
</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
Hy guys.
I have a situation of overlay div inside another div.
Why the main div not fit the height size when i using position relative in a inner div to create a overlay.
See the picture
I cannot use position: absolute because i need the scroll working inside the main div.
See the code:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: relative; top: -52px; left: 0px; z-index: 1;
width: 350px; height: 50px; border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
I can use another css settings but i need to sinc the scroll of the inner divs.
If I understand your question correctly, this is what you need:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
position: relative;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: absolute;
top: 0;
left: 0px;
z-index: 1;
width: 350px;
height: 100%;
background: rgba(0,0,0,0.5);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2"></div>
</div>
</body>
</html>
position: relative still keeps the original space free for its element - it only moves the element away from its original position by the top/bottom/left/right values. But the free space is still where it is without those settings. A wrapping container with aut height will act as if the relatively positioned element still were at its original position, causing what you brought up in your question.
So to force a solution as you seem to want it, you'll have to use a fixed height and overflow-y: hidden on your container element.
div.main {
width: 300px;
height: 52px;
border: solid 1px black;
overflow-y: hidden;
}
div.box1 {
width: 350px;
height: 50px;
border: solid 1px red;
}
div.box2 {
position: relative;
top: -52px;
z-index: 1;
width: 350px;
height: 50px;
border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</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/
the Html is :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="wp-1-main.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="textArea"></div>
</div>
<div class="imageLine">
</div>
</body>
</html>
and the CSS is
.wrapper{
width: 100%;
height: 400px;
position: fixed;
top: 50%;
margin-top: -200px;
border-top: solid 1px black;
border-bottom: solid 1px black;
background-color: pink;
}
.imageLine{
width: 500px;
height: 1500px;
float: right;
margin-right: 60px;
background-color: grey;
}
my goal is to make the .imageLine cover some .wrapper , and the wrapper is centered vertically , and always be in the viewport.
but those code turn out that the .wrapper covers the .imageLine . any idea to fix that?
You could use z-index
Higher z-indices will come infront of lower z-indices.