In the picture below, I am wanting to place the driftwood/bomb image over the image directly above it; hence, I want to remove/collapse the "space" between these two divs. The gap, however, is not caused by the markup itself, because as you can see the "bomb" is making the picture bigger on the height.
I would like to position the navigation bar on the "header" (so the brown top of the navigation is just below the header bottom), so the gap disappears. These images are meant to overlap.
I assume this can be done using CSS. But how? Whatever solution needs to work cross-browser.
HTML:
<header></header>
<nav></nav>
CSS:
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
}
Maybe a negative margin?
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
margin: -90px auto 0;
}
http://jsfiddle.net/NmUfT/
Relative positioning could fix this for you:
nav {
position: relative;
top: -20px;
}
place the div inside the header div.
nav {
position: relative;
bottom: -30px;
}
A top-margin with a negative value is indeed what you seek. If the nav would disappear beneath the header, you should change the nav's z-index. Try different numbers: 100, 1000, 10000 etc.
Related
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
I have a container div, within that div are other div's. In there I use jQuery .show() to show stuff.
#container {
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
background-color: white;
height: 100%;
}
#content {
font-size: 15;
margin: 0 auto 0 auto;
width: 550px;
}
The content div grows longer than the container div, so the white background stops when I scroll down, leaving me with no white background there.
How can this be fixed?
http://jsfiddle.net/K6PAn/8/
I think this will be your answer, Adding padding to the top and bottom will always make the white shown.
Hope this helps, If it's not the correct answer, sorry! D:
Add an extra div at the end of the content with clear:both e.g.
<div style="clear:both"></div>
Dave
I'm trying to make a page where I have a fixed height header and footer. The header is at the top of the screen (100% width) and the footer is at the bottom (100% width). I want to center a div with variable height content in the space between the header and footer. In the below jsfiddle, it works if the content is shorter than the space, but if the content gets too long, it goes past the footer, and over the header. It also doesn't work at all in IE (surprise, surprise).
Example: http://jsfiddle.net/VrfAU/4/
Edit: I've made some images to try and make this more clear.
Small content
Large Content
I ended up starting over and trying a different approach. The working solution is found in the new jsfiddle below. The idea was to separate the header and footer from the content area so that they would sit on top and bottom. Then it became much easier to center the content area in the space between those (with some hacks for older versions of IE).
http://jsfiddle.net/UYpnC/5/
Try something like this:
.main { min-height: 500px }
http://jsfiddle.net/VrfAU/8/
I used the css property z-index, which controls the stack order to fix this:
I also used position: fixed to fix the header and footer:
I put
#header {
background: black;
width: 100%;
height: 66px;
position:fixed;
overflow: hidden;
z-index: 20;}
.main_wrap {
display: table;
width: 100%;
height: 100%;
margin-top: -88px;
vertical-align: middle;
position: relative;
z-index: -1;
}
#footer {
background: black;
width: 100%;
position: relative;
font-size: 85%;
color: #d0d6e0;
margin-top: -22px;
position: fixed;}
I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}