i want make a footer with relative position but when the page have not content its show on the bottom of page. a property like this:
position:relative absolute; [i know this isnt correct]
relative is good but when the page is not empty.
fixed covering some of content and show always
absolute not good when the page have content
this is my code:
color:#444;
background:#222;
bottom:0px;
width:100%;
position:relative;
min-height:80px;
padding:10px 0 10px 10px;
border-top:1px solid #444;
use min-height for content (middle content).
for example:
min-height: 500px;
your question is unclear,but as I undrestand you want to have a footer on bottom of the page even if there is no content,do so :
#footer{
position:fixed;
bottom:0;
z-index:999
}
DEMO
but this way you have sticky footer to bottom of your browser window, another way to achieve what you want is tu use min-height css property for your content,bud this is not a fully solution,couse different browser have different height and you have problem, I suggest that you use jQuery
Related
I'm really working hard on this thing but I can't figure out how to create this through CSS.
Basically on this website here I'm trying to add images to go outside of the main-content background as you can see on this image below. Where it says "Lattest Lessons" (sorry for the typo) or where it says Receive our newsletter.
Does anybody have a club? I'm lost!
Here is some code:
.main-content {
position:relative;
z-index:100;
padding:1em 0 8.5em 0;
background:#fff;
}
.main-content p {
color:#555;
}
.site-wrap {
position:relative;
min-height:100%;
}
What I would recommend doing is creating a div in the background that looks like this:
HTML:
<div id="backgrounddiv">
</div>
So the HTML is really easy. Don't put anything in those divs. Now for the CSS:
CSS:
#backgrounddiv {
length:100%; //spans length of page
width:100%; //spans width of page
z-index:1; //makes sure background is behind all the other objects
background-color: #000; //black background
position: absolute; //isn't affected or doesn't get affected by other elements
}
What you're likely looking for is positioning the element correctly. This can either be relative or absolute positioning based on your needs. In either case, ensure that the PARENT container is a positioned element (in your example it is: relative)
See this fiddle:
http://jsfiddle.net/callseng/UUxqG/
The paragraph with class 'move-left' is housed inside of the main-content element, it is relatively positioned and then pushed to the left by 25px.
position:relative;
left: -25px;
So, for a website, I have the site divided up with divs and iframes: an iframe for a sidebar, an iframe for a footer, and a big div in the middle for the body content. In order to get everything static and well-fitting, I used the code here:
.bodycontent{
position:fixed;
top:0px;
left:150px;
right:0px;
bottom:100px;
overflow:auto;
}
.footerframe {
position:fixed;
left:150px;
bottom:0px;
right:0px;
height:100px;
border-top: 2px solid #888;
border-right: 2px solid #888;
border-top-right-radius:4px;
}
This was intended to get both the main div and the footer iframe to stretch across the page. It works for the main div, but not the footer. What is up with that inconsistency?
There are two problems with your code:
Top/Bottom or Left/Right should be used in pairs always, not in four values. If you use top, don't use bottom; if you use left don't use right.
If you want an element with position fixed to stretch to the whole page, you should give it width:100%
:)
I working on a page with a footer. The footer's positioning is like it should, but I have an problem when i resize the browser from bottom to top. For details, you can see the image below :
Here it's my css footer code :
.footer_page {
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
Someone have an suggestions ?
Thanks.
The bottom 30px signifies bottom of the window. Calculate the distance from top you need your footer to have and give
top:500px
A better way is to give a large div id="page" around your entire page with required height, say 1000 px, and then footer with bottom 30px.
#page{position:absolute;height:1000px}
#page #footer{position:absolute;bottom:30px}
If this seems too much or height of page is variable, let footer be part of flow of the document.In such cases it is better not to use absolute positioning.
You can also do this with some javascript magic.
What I am saying is, suppose total height of your page is 1000px. Put a wrapper around entire page with id page, give absolute positioning and height 1000px, then put footer in the end.
If you mean that the footer doesn't stay fixed to the bottom, try
.footer_page, .push {
clear: both;
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
so adding .push and clear:both.
I have a CSS Question I want this div to automatically expand vertically as more and more content fills it. I thought that omitting it's height setting in the style would do so but it hasn't seemed to fix it. My CSS
.box{
-moz-border-radius: 15px 15px 15px 15px;
background-color:#433B39;
background-image:none;
color:white;
display:block;
margin-top:20px;
padding-left:16px;
padding-right:16px;
width:925px;
}
Are you floating the content inside of that div? If so, then it won't expand to fit them, you need to put a clearing div after the floating content for this.
use auto:height .You may also mention min-height to some value to maintain a minimum height
ex :
.box{
width:925px;
min-height:10px;
height:auto;
}
Did you try with setting float:left for the external container?
Greetings,
I have a php site that was working fine as of the start of the year. Then a patch came out for IE8 which caused the CSS I had to malfunction.
Is this a know problem or an isolated issue?
My main problem stems from trying to lock a header into place while allowing the body to be scrollable with:
position: fixed;
overflow: scroll;
top: 135px;
left: 0px;
One of my colleagues has also encountered the same issue as I have.
Any assistance would be greatly appreciated.
Thank you,
Jordan Trulen
.belt
{
position:fixed;
top: 0px;
left:0px;
}
.header-table
{
position:fixed;
top:65px;
width:100%;
}
.header
{
position:fixed;
height:40px;
width:98%;
top:95px;
}
.body
{
position:fixed;
overflow:scroll;
height:74%;
width:99%;
top:135px;
}
You're not giving us any html or a link to see what's up.
But there's a key difference in using position:fixed and position:absolute.
Fixed is used when you don't want the container to scroll with the page, but remain at that position no matter how much you scroll the remaining page. This is good for headers that should always be visible.
Absolute should be used when you just want it to be fixed in relation to the surrounding content.
And you're using overflow:scroll; in a fixed container, which only in extremely rare cases makes sense. I think you problem is with the overflow:scroll; being on the wrong tag. It only has to do with the content of that tag being limited to the width and height (which you haven't even specified!) of the container. If the content overflows that width and height, scrollbars are inserted ON the container.
Why are you using position fixed on the "content" area (i assume thats the "content" area as scroll on a header doesnt make much sense)? Apply position: fixed; to the header instead.