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;
}
Related
is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.
Now my css looks like:
<style>
#header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
#main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
#about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
</style>
<body>
<div id="header">
content....
</div>
<div id="main">
content...
</div>
<div id="about">
long content which is covered with next div, because its "top" atribute settings
</div>
<div id="contact">
div which covers previous one's end
</div>
But when some container needs to be longer, problem is here..
Thanks for any help!
That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.
My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.
It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.
I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.
Ditch the position property altogether.
Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.
Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .
You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen).
I added the background-color just so it's easier to see.
<style>
#header {
background-color: #777;
height: 20vh;
}
#main {
background-color: #999;
height: 80vh;
}
#about {
background-color: #777;
height: 100vh;
}
#contact {
background-color: #999;
height: 50vh;
}
</style>
I have a little problem with my responsive design. I am using a normal <footer> with this style.
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
It works fine and when I am using a smaller screen I have to scroll, that's normal.
The problem is that the <footer> is not at the bottom. It is in the middle of the screen. Like margin-top: 100% of the full screen, without scrolling.
I hope you understand what I mean.
Thanks!
Make Position fixed, This may look something like this
footer {
width: 100%;
height: 20px;
position: fixed;
bottom: 5px;
left: 0;
}
The idea is to position the element fixed to the bottom. Set the bottom offset with bottom or margin-bottom parameters.
You could go with this:
footer {
position:fixed;
height:20px;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
I hope I get your problem correctly. Your problem is that the footer is at the middle of the screen when there is little content in that page, right?
To solve the problem, you should make the parent element take up the full screen. For example,
<head>
<style>
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
body {
min-height: 100%;
}
</style>
</head>
<body>
<div>
some other content
</div>
<footer>
Some content inside footer
</footer>
</body>
Or if you don't mind the footer is always visible at the bottom of the screen, use position:fixed . Then you don't need to consider the height of the parent element.
I have a website which is 960px wide and want to put a picture outside of that on the right side.
Vimeo have done it on there homepage: http://vimeo.com
you can see a drawing of an origami bird that sticks outside the website width
without causing the screen to get horizontal scrollbars
How do they do this?!
origami bird Floating outside of Vimeos layout
New answer:
After some further inquiry, it seems that a critical aspect was that the box/image would not cause horizontal scroll-bars, while the content would. This was an interesting trick applied by vimeo, and was quite sneaky.
It has to do with a combination of min-width on body, and overflow-x: hidden on a non-immediate parent of the box/image. When combined with position: absolute, and a negative right, this achieves the desired result.
HTML:
<div id="wrap">
<div id="width_wrap">
<div class="crane"></div>
</div>
</div>
CSS:
body
{
min-width: 960px;
}
#wrap
{
overflow-x: hidden;
}
#width_wrap {
position: relative;
width: 960px;
height: 400px;
}
.crane
{
position: absolute;
width: 200px;
height: 200px;
right: -40px;
}
Here is a minimal Fiddle, with outlines such that you can see what's going on: http://jsfiddle.net/rUj8s/2/
Original answer:
The position: absolute answers will most likely work, but will also take the image/div out of the normal flow of the document. This might not be what you want.
What you probably want is a negative margin-right:
.your_picture {
margin-right: -30px;
}
Or, perhaps position: relative, and a negative right
.your_picture {
position: relative;
right: -30px;
}
Or, lastly, position: relative, and a positive left
.your_picture {
position: relative;
left: 30px;
}
This is why negative margins and relative positioning exist. To move things relative to where they would normally lie.
.your_picture {
position:absolute;
/* this needs to be negative to have the image sticking outside of the width */
right:-30px;
}
#parentDiv{
position: relative;
}
#your_picture {
position:absolute;
right:-30px; /*change it to a number that you like */
top: 30px; /*change it to a number that you like */
}
html markup would go like:
<div id="parentDiv">
<div id="your_picture"></div>
</div>
I've made a menu strip that I would like fixed to the bottom center of the page. I've tried everything. Is there a way to do this in CSS? I've gotten the menu to be fixed at the bottom of the page with
bottom: 0px
position: fixed
but using
margin: auto auto 0px auto or margin-left: auto
doesn't seem to center the menu. It's just stuck to the left side of the page. Any thoughts would be greatly appreciated!
display: flex now makes this very easy! See below:
.footer {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
.content {
background: grey;
}
<div class="footer">
<div class="content">My bottom-fixed content</div>
</div>
With this solution, there is no need to set a fixed width which can be more flexible.
You can use a left property of 50% and a negative left margin equal to half the width of the footer.
http://jsfiddle.net/N7MB5/
#footer {
width: 600px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -300px;
}
To center an element you need to specify width and set left and right margins to auto.
Then to stick such an element to the bottom of the page you need to wrap it in another element which has fixed width, say 100% and is positioned on the bottom. And yes, css you can.
<section style="position: fixed; bottom: 0px; width: 100%;">
<p style="margin: 0 auto; width: 300px;">Blah blah</p>
</section>
#myElemId {
width: 100px;
}
Note the fixed width; this is essential for margin: auto to work. If this doesn't solve it, then there must be a problem elsewhere.
Edit: You'll also need this (jQuery):
$("#myElemId").css({
left: window.innerWidth/2 - $(this).css("width")/2
});
This allows you to set the width to whatever you want without having to update the rest of the CSS code.
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.