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; }
Related
I have one django project. In the html template, the page length may not be constant since it may be longer if more inputs to give.
I may need to justify the length of the page to show the footer.
I try to use the relative position style for the footer, but it may not show well since if too little information may lift up the footer so high.
Hence, I may need to adjust the footer position due to the length of the page.
How could justify such length? Thanks!
The relative position is refered to the parent element. Then, in that case, you must use the absolute, to bring it always at the bottom, independentment of the height of the body or parent.
footer {
position: absolute;
bottom: 0;
}
Then, its going to be better if you define a height, otherwise the footer will be on top of the page content. Then:
footer {
position: absolute;
bottom: 0;
height: 200px // for exemple
}
.page-content {// or body
padding-bottom: 200px // height of the footer
}
Hope it helped.
My site is https://ized.online
I have tried setting the margin and padding of h1 and my divs to 0px in my CSS, but the border remains, and it seems like its either my main container div or the CSS properties of or , as inspecting the element links back to both of them in a non-descriptive form, and similarly trying to set margin or padding to 0 gives no result.
What would you suggest to remove the white boarder surrounding my page?
Each browser has its own set of preset css rules, on divs, body, etc. try using something like https://github.com/csstools/sanitize.css which removes them, or simply use
body{ margin: 0 }
It seems you need to remove default margins from the body: body{margin:0;}
In css you can see
border: (px style color)
And that should solve the issue if you delete that settings.
Also, border: none on the element should be an option, but probably you missed the border settings.
Bellow is CSS you need. I suggest you to look up how position: absolute works with properties top, bottom, left, right.
.text2 {
position: absolute;
z-index: 1;
bottom: 0;
color: grey;
}
body {
margin: 0;
}
I have a header div, which i want to see all the time even if i scroll down.
I want it always on the top of the page.
Which code should i add to my CSS file?
Or do i need to add a javascript inside my .php file?
Apply the below css to your header div
position: fixed;
top: 0px;
if header fixed top
change:
.Your_class{
position:fixed;
top:0;
left:0;
}
Fix the header to the top:
.header {
position: fixed;
}
Move the rest of the content below the header:
body {
padding-top: 50px; // Height of your header
}
Setting position to fixed will take the element out of the normal flow of the document and display them on top of (or under) the normal flow. If you want to avoid having other elements hidden under the fixed element you need to use margin or padding in the appropriate places - in this case a top padding on the body element will do the trick.
At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy
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>