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>
Related
I have a requirement to make a banner that is 50% of the width of the "content wrapper" and that content wrapper is dynamically sized to a max width (so it can be, in theory, 0px-1330px). The content wrapper is the dark gray box here. It contains the content of the site. Within that content is a banner that comes out from the side of window. The window in this exactly has a boundary of the black outline.
How with HTML/CSS can I make the content of the purple container fit within the dark "content wrapper" even tho it is 50% of the window and the content lines up with left side of the wrapper when I don't know the specific width.
I've tried all kinds of math but I can't quite get it. I'm using CSS vars for the site max width and I can use var or calc to make this work but just no combo is working.
Does this fit your question?
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
width: 100%;
max-width: 500px;
height: 100vh;
margin: auto;
background-color: #aaa;
}
.banner {
width: 50%;
background-color: #a0f;
padding: 20px 20px 20px 0;
position: relative;
box-sizing: border-box;
}
.banner::before {
content: '';
position: absolute;
background-color: #a0f;
top: 0;
left: calc(100% - 50vw);
height: 100%;
width: calc(50vw - 100%);
}
<div class="wrap">
<h1>Content Wrapper</h1>
<div class="banner-wrap">
<div class="banner">
<h2>The title here</h2>
<p>Some other text here</p>
</div>
</div>
</div>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
overflow: hidden;
}
.window {
width: 100%;
height: 100vh;
border: 2px black solid;
background-color: lightgrey;
display: grid;
align-items: center;
justify-items: center;
}
.wrapper {
height: 75%;
width: 80%;
background-color: darkgrey;
padding:20px 0px;
}
.content {
padding: 20px 0px;
position: relative;
width:50%;
}
p{
position: relative;
z-index:2;
color:white;
}
.banner-container {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
clip-path:inset( -100vw 0vw -100vw -100vw );
}
.banner {
height: 100%;
width: 150vw;
position: absolute;
top: 0px;
left: -50vw;
background-color: purple;
}
<div class="window">
<div class="wrapper">
<div class="content">
<p><b>Some text here</b></p>
<p>Some text here</p>
<div class="banner-container">
<div class="banner">
</div>
</div>
</div>
</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
As the title says: I need the 'info-box' to not be fixed while the head-box and head-in-block are fixed.
I know it is possible. I have a live example: http://www.marktplaats.nl/.
The orange box is fixed (head-box) then the white part (my info-box) is not fixed. And the Title block is fixed again (head-in-block).
This is the css and html I'm using right now. What adjustment needs to be made to make the middle (white) box not fixed?
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
Do you guys see the website the same I do?
The website you linked to hides the white box when the header is sticky. So to do that here, you would hide #info-box when #head-block has class .fixed
.fixed #info-box {
display: none;
}
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
.fixed #info-box {
display: none;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
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
There is a block with header, body and footer parts inside of it. Header and footer heights are fixed, body height is determined by its content. I need the outer block size to be the size of its contents but not more then the size of its container. If the body height exceeds maximum possible size, then the y-scroll is shown for body, but header and footer stay at the top and bottom of outer block.
I made the FIDDLE. But I could only get as far as when I resize window the scroll appears for outer block, not for body block only.
This is CSS and HTML:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
max-height: 100%;
overflow: auto;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
}
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>text<br>...</div>
<div class='footer'></div>
</div>
</div>
Is it possible to do what I need without using JavaScript?
EDIT: I made an image to make it clear what I need.
Well Here is your code from what I understand that you want the header
sticks to top and footer in the bottom and you can scroll the body if
necessary in the container size.
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>text
</div>
<div class='footer'></div>
</div>
</div>
We need to style the footer and header separately plus your style as you will see in the code below
So you add to .innerContainer (position: absolute; bottom: 0; right: 0; left: 0; height: 100%; overflow: hidden;) and for the .body you add(height: 50%; overflow-y: auto;)
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
height: 100%;
max-height: 100%;
overflow: hidden;
bottom: 0;
top: 0;
right: 0;
left: 0;
position: absolute;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
min-height: 20px;
max-height: 36%;
overflow-y: auto;
font-size: 20px;
}
I hope that what you want and if you have any question please let me know.
The only solution I've found is using CSS3 calc. Doesn't work in Android browswer, though... FIDDLE
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
overflow: hidden;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
height: 300px;
background: green;
}
.bodyContainer {
max-height: calc(100% - 60px);
overflow-y: auto;
}
<div class='container'>
<div class='header'></div>
<div class='bodyContainer'>
<div class='body'></div>
</div>
<div class='footer'></div>
</div>