My site code is very usual
<div class="header"></div>
<div class="site-inner"></div>
<div class="footer"></div>
How can I make header background like on the image?
Is the whole site content have to be position absolute and margin-top:-500px ?
Is that only case to do it?
I assume you mean the overlap.
Negative margin is one way.
.header {
height: 50px;
background: lightblue;
}
.site-inner {
width: 80%;
margin: auto;
height: 50px;
background: lightgrey;
margin-top: -30px;
box-shadow: 0 -2px 2px black;
}
<div class="header"></div>
<div class="site-inner"></div>
You can use:
.header{
width: 80%;
height: 75px;
margin: 0 auto;
margin-top: -20px;
background:#3A3A3A;
}
Take a look at positioning: Positioning, also z-index might be relevant: Z-index, notice in my example the negative index on .header-bg
A quick example:
.header-bg {
width: 100%;
height: 200px;
z-index: -1;
background: lightblue;
position: absolute;
top: 0;
left: 0;
}
.header {
margin-top: 50px;
height: 50px;
background: grey;
z-index
}
.menu {
height: 80px;
}
.site-inner {
height: 400px;
width: 100%;
background: red;
}
<div class="header-bg"></div>
<div class="header"></div>
<div class="menu">menu</div>
<div class="site-inner">Site inner</div>
<div class="footer"></div>
A negative z-index lets you put elements behind others. The answer is simple enough then.
<div class="color"></div>
<div class="fixed">
<div class="header">
</div>
<div class="nav">
Text
</div>
<div class="body">
</div>
</div>
html, body
{
height: 100;
margin: 0;
}
div.color
{
position: absolute; /*Take out of the flow*/
top: 0; /*Move to top left*/
left: 0;
z-index: -1; /*Place below normal elements in the flow*/
width: 100%; /*Fill whole width*/
height: 300px; /*300px tall*/
background: #c7edfb; /*Color specified*/
}
div.fixed
{
margin: 50px auto 0; /*push whole document down 50px and center*/
width: 600px; /*document is 600px wide*/
}
div.header
{
height: 150px; /*top gray block is 150px tall*/
background: #222; /*dark gray*/
}
div.nav
{
padding: 25px 0; /*Gap between blocks above and below*/
}
div.body
{
min-height: 300px; /*Force a height*/
background: #777; /*Light gray*/
box-shadow: 0 0 8px black; /*Drop shadow*/
}
JSFiddle
Related
I have been able to create a centered vertical line but it increases my webpage width off of my screen! I would like some insight on how I can create a centered vertical line down my page while keeping page width to fit my screen (so that there is no horizontal scroll bar).
When I have removed the line my page width is perfect therefore I do not think it is one of my divs causing the problem.
body {
background-color: lightblue
}
.vertical_line {
border-left: 6px solid black;
height: 500px;
position: relative;
left: 50%;
margin-left: auto;
z-index: -1;
}
.section-2 {
width: 100%;
height: 200px;
}
.section-3 {
position: relative;
top: 50;
width: 500px;
height: 60%;
padding: 20px;
margin-left: auto;
margin-right: auto;
background-color: green;
}
<section class="section-2">
<div class="topnav">
<a style="background-color:grey; width:100px">this is my nav bar</a>
</div>
<div class="vertical_line"></div>
</section>
<section class="section-3">
<div class="paragraph"></div>
</section>
<div class="vertical_line"></div>
Problem arises because you used position: relative; and shifted it 50% left, but it means element is still part of flow and shifting it pushes it past the edge of the screen. On the other hand position absolute removes it from the flow. But if you want to use position: relative; for some reason, then add overflow-x : hidden; in the body, it will work fine in your case. Also a good CSS reset always helps, so as you do not get unexpected scrollbars.
* {
padding: 0px;
margin: 0px;
}
body {
background-color: lightblue;
width: 100%;
min-height: 100vh;
}
.vertical_line {
border-left: 6px solid black;
height: 500px;
position: absolute;
left: 50%;
margin-left: auto;
z-index: -1;
}
.section-2 {
width: 100%;
height: 200px;
}
.section-3 {
position: relative;
top: 50;
width: 500px;
height: 60%;
padding: 20px;
margin-left: auto;
margin-right: auto;
background-color: green;
}
<html>
<section class="section-2">
<div class="topnav">
<a style="background-color:grey; width:100px">this is my nav bar</a>
</div>
<div class="vertical_line"></div>
</section>
<section class="section-3">
<div class="paragraph"></div>
</section>
<div class="vertical_line"></div>
</html>
With help of overflow-x: hidden; and position : relative; :
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
min-height: 100vh;
overflow-x: hidden;
}
.vl {
border-left: 6px solid black;
height: 5000px;
position: relative;
left: 50%;
}
<html>
<body>
<h2>Vertical Line</h2>
<div class="vl"></div>
</body>
</html>
I have a super simple example with a wrapper div and another div inside this wrapper called header.
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
Is it possible that the inner div called header sticks out of the wrapper on both sides with lets say 20px or even 100viewport wodth?
If I understand you correctly you want the inner header to stick out 20px. You can do that with negative margins:
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
margin-left: -20px;
margin-right: -20px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
if you want it to stretch through the whole viewport, you might have to position the element absolutely and use left: 0; right: 0;, however IMO it would be cleaner to move the div out of the container in that case.
You could give it a negative left/right margin:
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
margin: 0 -20px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
Hello All below is the expected output what i want to achieve. I tried but lacking some where. Below is my code.
I am using Z index all seems ok but when seen in mobile the design is not up to the mark.
Below is my code.
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
position: relative;
background: #EEE;
height: 60vw;
width: 80vw;
}
.wrapper div {
position: absolute;
height: 25%;
width: 20%;
}
.wrapper .one {
top: 26px;
left: 150px;
background: blue;
z-index: 1;
box-shadow: 0px 10px 50px #00000026;
}
.wrapper .two {
top: 50%;
left: 50%;
margin: -23% 0 0 -31%;
height: 60%;
width: 40%;
background: red;
}
.wrapper .three {
top: 620px;
left: 450px;
height: 6%;
background: green;
}</style>
</head>
<body>
<div class="wrapper">
<div class="one">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search-v2_297x176.jpg" style="width: 100%">
</div>
<div class="two"></div>
<div class="three">Read More</div>
</div>
</body>
</html>
You should provide more details about what your actual question is. There are a lot of differences between the mock-up and your html + css.
Nevertheless I think you have a general problem with how you layout things.
For responsiveness you should generally avoid using fixed pixels + position absolute. This might work on one screen size but not on others.
Try to achieve your desired output with the appropriate tools like css grid/flex.
But for the sake of the question you can move one into two:
...
<div class="two">
<div class="one">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search-v2_297x176.jpg" style="width: 100%">
</div>
</div>
<div class="three">Read More</div>
...
and adjust your style like this:
.wrapper .one {
top: -20px;
left: -20px;
background: blue;
z-index: 1;
box-shadow: 0px 10px 50px #00000026;
position: relative;
}
PS. You can get rid of the white border around the page with body { margin: 0; }
<style>
body {
margin: 0px;
padding: 0px;
}
.wrapper {
position: relative;
background: #EEE;
min-height: 100%;
width: 100%;
padding: 5px 0px;
}
.wrapper div {
height: 25%;
width: 20%;
}
.wrapper .one {
height: auto;
left: -10px;
top: -10px;
background: blue;
z-index: 1;
box-shadow: 0px 10px 50px #00000026;
position: absolute;
}
.wrapper .two {
margin: 0px auto;
min-height: 480px;
/* max-width: 767px; */
background: red;
position: relative;
margin-top: 20px;
width: 100%;
max-width: 480px;
}
.wrapper .three {
bottom: -10px;
right: -10px;
display: block;
width: 100px;
height: 20px;
text-align: center;
background: green;
position: absolute;
}
</style>
use this as html
<div class="wrapper">
<div class="two">
<div class="one">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search-v2_297x176.jpg" style="width: 100%">
</div>
<div class="three">Read More</div>
</div>
</div>
u can try like this
I have a div#B in the div#A in HTML. div#A has padding in the CSS file and I want to doesn't affect on the div#B; I tried this ↓ but because of percent format they have, it doesn't work (doesn't fit completely to parent div because of the percent)!
div#wrapper {
width: 80%;
margin: 5px auto;
background: blue;
}
#sidebar {
float: left;
width: 19%;
margin-right: 1%;
background: green;
border-radius: 5px;
}
#A {
padding: 0.5% 2%;
width: 76%;
background: red;
float: right;
margin-bottom: 5px;
}
#B {
border-radius: 5px 5px 0 0;
height: 116px;
background: green;
}
<body style="background: aqua;">
<div id="wrapper">
<div id="sidebar">this is sidebar and there is something here i dont know for now :))</div>
<div id="A">
<div id="B">
</div>
</div>
</div>
</body>
it works fine, made few minor updates to your css, have a look at the below-working snippet :)
#A {
padding: 1%;
background: red;
}
#B {
margin: -1%;
background: green;
}
<div id="A">
<div id="B"> </div>
</div>
based on updated requirements, in your project can u update the position and height of the #A, if yes then below snippet will work for you
div#wrapper {
width: 80%;
margin: 5px auto;
background: blue;
}
#A {
padding: 0.5% 2%;
width: 76%;
background: red;
margin-bottom: 5px;
position: relative;
height: 116px;
}
#B {
background: green;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
}
<div id="wrapper">
<div id="A">
<div id="B">
</div>
</div>
</div>
If you add padding on your B, it will be solve your problem.
#B{
padding: 20%;}
Like that example.
#B {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
The idea here is to push the container to the exact middle of the browser window with left: 50%;, then pull it back to the left edge with a negative margin margin-left: -50vw;.
I'm using a pseudo element (before) to put a border on top of a container inside a two column layout. I want the border on top of just one container.
Shouldn't the width of the pseudo element (being set to 100%) make it the width of the container it's inside?
#singleWrapper {
margin: auto;
max-width: 1100px;
}
.single #singleWrapper {
margin: auto;
max-width: 1100px;
/*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
position: relative;
overflow: hidden;
}
#leftColumn .content-area {
padding-right: 310px;
width: 100%;
}
.articleWrapper:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #009cff;
background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
height: 2px;
width: 100%;
}
#leftColumn .content-area #main {
background: #000;
background: rgba(0, 0, 0, 0.30);
padding-left: 20px;
padding-right: 20px;
}
#singleWrapper .contentHolder {
margin-right: -310px;
width: 100%;
float: left;
position: relative;
}
#rightColumn {
float: right;
position: relative;
display: block;
width: 290px;
}
#leftColumn,
#rightColumn {
display: inline-block;
vertical-align: top;
margin-top: 1.1em;
}
<div id="singleWrapper">
<div id="leftColumn" class="contentHolder">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="articleWrapper">
<h1>Title</h1>
<div class="articleBody">
Article Body
</div>
</div>
</main>
</div>
</div>
<div id="rightColumn">
Side Bar Area
</div>
</div>
the problem is you are using position:absolute
From MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. The absolutely positioned
element is positioned relative to nearest positioned ancestor. If a
positioned ancestor doesn't exist, the initial container is used
A fix is to add this to your CSS:
.articleWrapper {
position:relative;
}
and change top:0; in .articleWrapper:before to any negative value you like best.
here is a snippet
#singleWrapper {
margin: auto;
max-width: 1100px;
}
.single #singleWrapper {
margin: auto;
max-width: 1100px;
/*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/
position: relative;
overflow: hidden;
}
#leftColumn .content-area {
padding-right: 310px;
width: 100%;
}
.articleWrapper {
position:relative;
}
.articleWrapper:before {
content: "";
position: absolute;
top: -30%;
left: 0;
background: #009cff;
background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);
height: 2px;
width: 100%;
}
#leftColumn .content-area #main {
background: #000;
background: rgba(0, 0, 0, 0.30);
padding-left: 20px;
padding-right: 20px;
}
#singleWrapper .contentHolder {
margin-right: -310px;
width: 100%;
float: left;
position: relative;
}
#rightColumn {
float: right;
position: relative;
display: block;
width: 290px;
}
#leftColumn,
#rightColumn {
display: inline-block;
vertical-align: top;
margin-top: 1.1em;
}
<div id="singleWrapper">
<div id="leftColumn" class="contentHolder">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="articleWrapper">
<h1>Title</h1>
<div class="articleBody">
Article Body
</div>
</div>
</main>
</div>
</div>
<div id="rightColumn">
Side Bar Area
</div>
</div>