I have a page which has a 'fixed' header. Now I want to position the content at 20% below the header, but the 'top' property doesn't seems to work. I tried to use 'left' and 'right' and they seemed to be working fine. Any pointers for this situation?
Thanks in advance.
We did something very similar here: http://firststop.herokuapp.com
We just used padding-top: Xpx in our body css, like this:
body {
padding-top: 60px;
}
This basically makes the entire body of the page have a padding at the top, allowing you to keep the fixed header at the very top
The problem you have is the fixed element acts like a position: absolute element -- it doesn't take normal cascading preferences in the DOM, and thus cannot have any position: relative held against it
Take CSS element(margin-top:-Xpx;)in Negative Values for the Content Div.
you should do something like so:
.header{
position:absulote;
top:20%;
height:400px;
width:500px;
}
Related
I am trying to position a footer under #cont, but inside the #container.
I tried making it so that when there is more content in #content, it would keep the footer inside the div, and allow me to scroll the page, but I got lost. Any idea how I should do it?
http://jsfiddle.net/a9jv7/
As you can see, more content will push it down(because it's not inside the other div, but if it's not inside, I can't set the footer to always be on the bottom of the page)
You can change the floating elements to display: inline-block, so you have more control over them and the container will adapt to their height.
#footer {
background-color:#FFA500;
text-align:center;
max-width:960px;
width: 100%;
}
The example: http://jsfiddle.net/frapporti/TPbCG/
EDIT:
In general, I'd really like to advice you against the use of floating elements for layout, as they were pushed beyond they original intended use from the very beginning, and now we have flex who does magic :)
http://html5hub.com/after-float/
http://jsfiddle.net/Cerebrl/ZkQnD/
If I understood what you want to achieve correctly, than this is one way to do it:
http://jsfiddle.net/a9jv7/1/
On #container add:
border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).
I'm having trouble with a simple div height and percentages. I have searched the net, but no luck. Here is the layout :
<div id="modal">
<div id="modalHead">HEAD</div>
<div id="modalBody">BODY</div>
</div>
Simple as that. The css (stripped down) :
#modal{position:fixed; top:0; left: 0; height:100%;}
#modalHead{height:40px}
#modalBody{height:100%}
Problem is that I get 100% height PLUS 40px. Resulting in a scrollbar of 40px extra. Because of that, i'm I tried using negative margins, height:auto, but no luck. Is there a way of doing this?
Basically, what I want is something in the lines of height: 100%-40px.
Than you!
edit:
Link to jsFiddle.
Try this:
#modal{position:fixed;top:0;left:0;right:0;bottom:0}
#modalHead{height:40px}
#modalBody{position:absolute;left:0;right:0;top:40px;bottom:0}
Try to remove all from your body tag and HTML
html, body{margin:0px; padding:0px border:0px}
It sounds like you just don't want the modalHead element to affect the modalBody's height, in which case you can just do:
#modalHead{height:40px; position: absolute;}
Once you have that, you can mess with the rest of it's dimension and placement using left and top if you need to.
edit:
Going off of your jsfiddle, I'd say the easiest solution would be to do as I suggested above and just add a margin-top: 40px or top: 40px (depending on the positioning) to the first element inside of the modalBody. In your jsfiddle example, that would be the p tag.
#modalBody p:first-child{margin-top: 40px;}
I would like to position my footer at about 20 - 30px, or a percentage, from the bottom of the screen. From looking at the elements with * {outline: solid 1px} there is a rectangle along the bottom of the screen which must be either the html element or mark the bottom boundary of the body. I'm a little hazy on positioning elements and despite having played around with varius positioning options cannot get the footer where I want it. What is the best practice here? How should I position the footer?
If you want it at the bottom (+30px) of the document
footer{
position:absolute;
bottom:30px;
}
if you want it at the bottom of the document, you would need javascript to calculate the window's height
and do something like (in jquery)
$('footer').css({'position':'fixed','top':$(window).height()-$('footer').height()});
or with only CSS you can also do:
.footer{
position:fixed;
height:2%;
top:98%;
}
Without seeing any of your code, it's hard to imagine why things aren't working for you. But my first guess is that you haven't styled the body element properly. By default, many modern browsers apply some sort of padding or margin to the body. As such, you should use the following rule to reset it:
body { margin: 0; padding: 0; }
This will reset the defaults, allowing you to proceed as you like. You could also use the position: fixed CSS rule for the element you want fixed to the bottom of the screen. Example:
#footer { position: fixed; bottom: 0; height: 30px; }
I'm trying to add a content rotator to a site I'm building. The rotator works fine. In fact, it works out better than I had hoped. I need to tweak some styling things, but that's besides the point.
For some reason, the rotator (which is relatively positioned and inside my container/wrapper div) pulls my wrapper and menu down with it when I add a margin to the top of it (margin:65px auto 0; or something like that). Any words of advice?
Page here:
http://technoheads.org/test/ice/index.htm
This sounds like a classic case of collapsing margins.
You can fix this by giving the container a border-top, margin-top, padding-top, or an overflow other than visible. (jsFiddle)
you can probably accomplish what you want by giving #wrapper top padding instead giving #slideshow top margin.
I run into this problem a lot when I put elements inside of inline elements. You should be able to fix it by doing one of the following:
Set the element you're having trouble with to display: block; (Usually a good enough fix)
Use top-padding like already suggested (nothing wrong with using band-aids if it works...)
Set the element to float: left; (Not really recommended, can cause some problems down the line, but will definitely allow you to add top and bottom margins)
How about this?
#menu {
position: relative;
width: auto;
height: 100px;
left: 383px;
top: 0px;
}
I just wonder if it is possible to only use CSS but not javascript to style a DIV that will cover up the whole content area exactly? (note: whole content, not just the viewport). It seems not possible because the <body> element has some margin, and it seems like there is no easy way to style the div to include that margin width and height of the body element. But in fact is it possible?
Update: sorry, a requirement is that we can't set the margin of <body> to 0... (update2: say, if we need to make it into a library and can't ask all people who use it to set the body to have margin 0)
Sure, I think.
Reset default margins:
* { margin: 0; padding: 0; }
then for
<div id="shader"></div>
do:
#shader {position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0; left: 0;}
This is probably a solution, but it won't work in IE...
div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }
If the <body> margin is set, then couldn't you use negative margins on the <div> to override the <body> margins? I understand <body> margins can vary between browsers. If the <body> has a margin of 10px, then style your div like so:
div#mydiv {
margin: -10px;
}
You'd use the same principle to override padding (if applicable).
Logically, this is impossible. Your DIV has to go inside the body, not outside.
Or to put it another way, you asked for the whole "content area" to be covered, but that's not actually what you want, you want the entire body to be covered.
Lazlow has the best suggestion. Maybe set the negative margins/padding to something large so you can be sure it's bigger than the browser default, then have an inner div with the same margin/padding values only positive?
Yes. you just set the padding and margin of the body tag to 0, then you set the padding and margin of the div tag to zero.
what about this?
<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">...
Liked Ambrose's answer. The body is ultimate container for your HTML. I have not seen any margins in the body with Mozilla, Chrome, IE, or Opera -- current versions. To prove it: style
body {background-color: yellow;} /*and take a look. */
in any case, it's always a good practice to normalize the browsers setting for margin, padding, etc to zero!
like Dmitri Farkov above
I think there's no way to make the div "float" over your browser, if would so, then the technology could overcome your screen, something like body style="margin: -40px" - should this bleed on your desktop?
And by the way, html styled is abnormal, what would you do next? style , ?? In any case they ARE there so you could set styles on all of them but I don't think it would be much clever.
I don't know if this could help:
<div style="margin:-100%">
But I doubt this can overcome the browser window...
I think MiffTheFox's approach is the best, because its solution covers the situation where other divs has absolute positioning.
Remember that absolute positioning elements go off the flow, and if any element is positioned for example at top:9000px, body height will not be >9000px.
<style type="text/css">
#superdiv{ position:fixed; top:0; left:0; width:100%; height:100%; }
</style>
<div id="superdiv">
Put some content here.
</div>