The positioning I want to acheive:
Now I have the following:
The properties are following:
.header, .footer {
background: #666;
height: 100px;
}
.content {
background: #ccc;
margin: -25px auto;
min-height: 500px;
width: 960px;
}
So the problem that the content lays below the footer and I don't know how to fix it. z-index doesn't work.
My HTML:
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
Try this
.header, .footer {
background: #666;
height: 100px;
position: relative;
z-index: 1;
}
.content {
background: #ccc;
margin: -25px auto;
min-height: 500px;
width: 960px;
position: relative;
z-index: 100;
}
This example is similar.
3 <div> => middle <div> overlaps upper and lower <div>
Related
Is it possible, to fix a div bar at the top of the page even when scrolling, and
still be able to fully see the next div?
The bar div is given a height of 15vh and the other divs are set to 85, so when You see the first view of the page divs #bar and #one are displayed.
I would like that after scrolling down that divs #bar and #two are seen. I tried everything: giving margin, padding, position relative, absolute, adding to #one top: 15vh;. Tried also putting div on #one and #two divs.. made all combinations..
This is the code I have so far that is the closest to what I mean and can't find how to go futher
* {
margin: 0;
padding: 0;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#bar {
background-color: gray;
height: 15vh;
position: fixed;
width: 1000px;
}
#one {
background-color: blue;
height: 85vh;
}
#two {
background-color: red;
height: 85vh;
}
<div id="container">
<div id="bar"></div>
<div id="one"></div>
<div id="two"></div>
</div>
Add padding-top:15vh; to #one to create/add the part which is hidden behind the fixed navbar
* {
margin: 0;
padding: 0;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#bar {
background-color: gray;
height: 15vh;
position: fixed;
width: 1000px;
}
#one {
background-color: blue;
padding-top:15vh;
height: 85vh;
}
#two {
background-color: red;
height: 85vh;
}
<div id="container">
<div id="bar"></div>
<div id="one"></div>
<div id="two"></div>
</div>
How can I have div.fixed at 100% of the width of its parent .content? ... knowing that all widths will be variable, even .content
more or less what I need is .content with position: relative; div.fixed with the position: absolute; and width: 100%; But fixed at the top if I have a vertical scroll
and if possible without using JavaScript, only with CSS.
I was trying several things but none works, thank you for your time and help
.sidebar {
float: left;
background-color: red;
padding: 20px;
color: #fff;
}
.content {
float: left;
width: 40%;
padding: 20px;
background-color: #d5d2ca;
min-height: 900px;
box-sizing: border-box;
position: relative;
}
.fixed {
background-color: #aaffaa;
padding: 20px;
position: absolute;
box-sizing: border-box;
width: calc(100% - 40px);
}
.content p {
margin-top: 100px;
}
<div style="width: 90%; margin: 0 auto;">
<div class="sidebar">
the sidebar is going to have variable width
</div>
<div class="content">
<div class="fixed">
Fixed
</div>
<p>content</p>
</div>
</div>
100% of .content? That would be
width:calc(40% - 40px);
change that line:
<div style="width: 90%; margin: 0 auto;">
to
<div style="width: 100%; margin: 0 auto;">
also add to the class:
.fixed {
width: 100%;
}
and remove width:40%; from the .content
I am not sure if i understand the problem correctly, but if you want to make the fixed div to have 100% of its parent, then the following should work
.content {
position: relative;
}
.fixed {
width: 100%;
position: absolute;
}
For your question to be solved, must width of .content equal with width of .fixed so, use of:
.fixed {
width: inherit;
//so .fixed get width 40%
}
But,
.fixed have position:fixed, so 40% is relative to the screen's viewport,
and
.content is 40% relative to his parent[div with width:90%,(90% relative to body)].
in here ,we have to do something to measure both elements relative to one element.so,do this:
html,body {
width: 100%;
margin:0;
}
<div style="width:100%; margin:5px 70px;">
of 90% to 100%----^ ^---^-------optional
also, use margin-left:-20px for remove affect padding:20px in .content.
.fixed {
margin-left: -20px;
//more code...
}
NowŁ you have both elements have width:40% relative to same element.
Note, Get Full Page to better see result.
* {
box-sizing: border-box;
}
html,body {
width: 100%;
margin:0;
}
.sidebar {
float: left;
background-color: red;
padding: 20px;
color: #fff;
}
.content {
float: left;
width: 40%;
padding: 20px;
background-color: #d5d2ca;
min-height: 900px;
position: relative;
}
.fixed {
background-color: #aaffaa;
padding: 20px;
margin-left: -20px;
position: fixed;
width: inherit;
}
.content p {
margin-top: 100px;
}
<div style="width:100%; margin:5px 70px;">
<div class="sidebar">
the sidebar is going to have variable width
</div>
<div class="content">
<div class="fixed">
Fixed
</div>
<p>content</p>
</div>
</div>
I'd like to ask, how to add two images on both sides of a div.
See, I got a main container on my site, and I'd like to add a little decoration on both sides, like a shadow which would foreground the actual content and place less emphasis on the background, y'know?
So, I got something like this:
page.html
...
<body>
<div id="container">
<div id="shadow-left"></div>
<div id="shadow-right"></div>
...
</div>
...
</body>
...
main.css
...
#container {
position: relative;
background: #FFF;
width: 840px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
}
#shadow-left {
// Gotta do that on the left site too
}
#shadow-right {
position: absolute;
top: 80px; // So there's a little space just for the upper nav
left: 840px;
width: 500px;
height: 100vh;
background: url('/res/img/shadow-right.png') 0 0 no-repeat;
}
...
I imagined it to look like this, but there's just NOTHING. How could I accomplish to do that?
Here is a fiddle where the main content is under-shadowed by whatever color you'd like, you can expand the shadow effect by playing around with the css and I'm sure there are plenty of css-shadow generators online. Hope this is what you're looking for.
HTML
<div id="main"></div>
CSS
#main {
width:60%;
margin-left:auto;
margin-right:auto;
background:green;
height:1000px;
box-shadow: 30px 0 19px -4px lightgreen, -30px 0 19px -4px lightgreen;
}
P.S. Excuse the green..
It seems like for this you can use floats, I hope I am understanding your question correctly.
fiddle: https://jsfiddle.net/L4cjz8p9/
HTML
<body>
<div id="container">
<div id="shadow-left"><img src="http://placehold.it/100x300"></div>
<div id="shadow-right"><img src="http://placehold.it/100x300"></div>
Main content
</div>
</body>
CSS
#shadow-left
{
float:left;
}
#shadow-right
{
float:right;
}
#container {
position: relative;
background: #FFF;
width: 840px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
}
Here is one way to position things outside e.g. a centered container. You could then fill the "shadows" with a background that repeats only over y or no repeat at all if you only would like to have something on the top of the page but not repeat when you scroll down.
The example here just has a 50px wide box at both sides next to the container.
Fiddle: http://jsfiddle.net/60yjen0a/
HTML:
<div class="container">
<div class="shadow left"></div>
<div class="shadow right"></div>
<div class="content"></div>
</div>
CSS:
.container {
position: relative;
width: 600px;
height: 1000px;
margin: 0 auto;
}
.content {
position: absolute;
width: 100%;
height: 100%;
background: #eee;
}
.shadow {
position: absolute;
height: 100%;
top: 0;
background: #ddd;
width: 50px;
}
.left {
left: -50px;
}
.right {
right: -50px;
}
With absolute position you can use left and right
#shadow-left {
position: absolute;
top: 80px;
left: 0px;
width: 500px;
height: 100vh;
background: YOUR_BACKGROUND_URL_FOR_LEFT_SHADOW;
}
#shadow-right {
position: absolute;
top: 80px;
right: 0px;
width: 500px;
height: 100vh;
background: YOUR_BACKGROUND_URL_FOR_RIGHT_SHADOW;
}
Check this on JSfiddle
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>