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
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>
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
I am currently trying to fit an image into a div container, but it doesnt work. I have got a complex div-tree on my page, that looks like this:
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
And the following CSS:
#a {
height: 300px;
background-color: red;
position: relative;
text-align: center;
}
#b {
height: 100%;
width: 100%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding: 20px;
}
#c {
width: auto;
height: auto;
display: inline-block;
max-height: 100%;
background-color: black;
padding: 20px;
}
#d {
width: 400px;
background-color:yellow;
max-height: inherit;
}
img {
max-width: 100%;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: calc(100% - 80px);
margin: auto;
}
I want the image to be fitted into the blue container. It should also take care on the given div containers. Currently the black one does not fill till the end plus padding of the container.
Demo Fiddle
I hope someone is able to help.
Here is a new concept for you. box-sizing: border-box incorporates the padding into the percentage width and heights automatically. The image no longer needs position: absolute.
The width and height of all the inner divs are controlled by the width on the #a container and their padding.
New Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#a {
background-color: red;
position: relative;
text-align: center;
width: 400px;
padding: 20px;
}
#b {
background: blue;
padding: 20px;
}
#c {
background-color: black;
padding: 20px;
}
#d {
background-color: yellow;
padding: 20px;
}
img {
width: 100%;
display: block; /* remove inline gap */
}
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
Old Answer
Remove width: auto; height: auto; and padding: 20px on #c
Place height: 100% on #c
Reason this happens - The height: 100% of #c is affected by the padding on #b so any extra padding will blow up the height.
Demo
#a {
height: 300px;
background-color: red;
position: relative;
text-align: center;
}
#b {
height: 100%;
width: 100%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding: 20px;
}
#c {
height: 100%;
display: inline-block;
background-color: black;
}
#d {
width: 400px;
background-color:yellow;
max-height: 100%;
}
img {
max-width: 100%;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: calc(100% - 80px);
margin: auto;
}
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
Here And try giving " #d" a height
#d > img {
width: 100%;
height: 100%;
text-align:center;
}
i'm trying to recreate this image in pure html and css, or add a little javascript if nessascary:
and here's what i have so far:
i'm trying to move that small orange box near the center up to match the blue line, but she won't budge
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
and here's the entire code:
layout.html
<html>
<head>
<title>LCARS</title>
<link rel="stylesheet" href="static/style.css"/>
</head>
<body>
<div class="topleft">
</div>
<div class="topleft2">
</div>
<div class="middletop">
</div>
<div class="bottomleft">
</div>
<div class="bottomleft2">
</div>
<div class="bottomleft3">
</div>
<div class="bottomleft4">
</div>
<div class="content">
</div>
<div class="content2">
</div>
</body>
<footer>
</footer>
</html>
style.css
body {
background-color: black;
}
.topleft {
background-color: #c498c4;
width: 126px;
height: 90px;
}
.topleft2 {
margin-top: 5px;
background-color: #9b98fe;
width: 463px;
height: 112px;
border-radius: 0 0 0 70px;
}
.bottomleft {
margin-top: 7px;
background-color: #cc6061;
width: 463px;
height: 91px;
border-radius: 70px 0 0 0;
}
.bottomleft2 {
margin-top: 5px;
background-color: #cc6061;
width: 126px;
height: 137px;
}
.bottomleft3 {
margin-top: 5px;
background-color: #fe9800;
width: 126px;
height: 38px;
}
.bottomleft4 {
margin-top: 5px;
background-color: #ffa873;
width: 126px;
height: 180px;
}
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
.content {
background-color: /*#6D6A6A*/black;
position: absolute;
left: 127px;
top: 239px;
border-radius: 35px;
width: 900px;
height: 700px;
}
.content2 {
background-color: black;
position: absolute;
left: 127px;
top: -2;
border-radius: 0 0 0 35px;
width: 900px;
height: 200px;
}
While I advise having a look into using absolute positioning extensively, if you're already doing it and you're happy with it, you just have to set top and you should be good to go:
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 476px;
top:199px /* <-- this is what I added */
}
Here is a demo.
Try using
position: absolute;
top: /*the amount of px from the top to your wanted location*/;
left: /*the amount of px from the left to your wanted location*/;
z-index:1000; /*<= this is to be above all other elements*/
Use the css top:100px;. And to see it use: z-index:100;