I am using this site.
Aim :
I want to move my footer based on the content of every page.
1)If there is more content then i want to put my footer after the content.
2)I want to fix the footer to the bottom of the window screen, if there is no content like this in the following picturealt text http://www.freeimagehosting.net/uploads/e893eac88b.png
My existing CSS :
I am currently using min-height property in #content to keep the footer at the bottom.
#footer_outer{
width:100%;
background:#444;
padding:10px 0 0 0;
margin-top:50px;
height: 130px;
}
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
}
#content {
padding:5px;
margin:0 auto;
width:890px;
height:auto;
min-height:450px;
}
body {
font-family:'Helvetica Neue', helvetica, arial, sans-serif;
color:#757575;
font-size:14px;
padding:0;
margin:0;
background:#FAFAFA;
}
Please help me in achieving my aim. Thanks a lot in advance.
regards,
vaths
1. Use fixed position divs
http://www.dailycoding.com/Posts/creating_always_visible_div_using_css.aspx
Change CSS to
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
position: fixed;
bottom: 0px;
}
2. How to keep footers at the bottom of the page
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Related
This is my css code:
* {
box-sizing:border-box;
}
body {
font-family:Raleway, sans-serif;
text-decoration:none;
line-height:1.42857143;
margin:0;
}
html {
position:relative;
min-height:100%;
}
.wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}
JSfiddle:
http://jsfiddle.net/yb2sLhox/
I need page like same margin such as header, content and footer. left and right side margin should be same space.. like this http://postimg.org/image/ojhkt7bg3/a099ed23/
When resizing the window is working correctly. I think in content part need to change it.
Can anybody help me?
You can try adding padding to your section
section{
padding: 0px 30px;
}
OR
Try adding some width to your section like this
section{
width:90%;
margin:auto;
}
DEMO
I have gotten frustrated enough trying to finish this mock up website that I have come crawling to you guys for help. I am having 2 issues at the moment. First my content wrapper background which is all white keeps getting pushed up whenever I open Firebug to examine my code. Second my content wrapper white background is not including my footer in Firefox. In IE it includes it most of the way but not 100%. Cuts off a line of text. Any help would greatly be appreciated.
html,body {height:100%;width:100%;}
html,body,#End {margin:0;padding:0;}
body {
text-align: center;
position:absolute;
}
Content_Wrap {
text-align: left;
width: 864px;
margin: 0 auto;
height:100%;
background-color:#FFF;
}
address{
font-family:'Advent Pro', sans-serif;
font-size:14px;
float:left;
color:#195a80;
height:100px;
width:auto;
}
copyright{
font-family:'Advent Pro', sans-serif;
font-size:14px;
float:right;
color:#195a80;
height:40px;
width:auto;
}
footer{
height:300px;
width:inherit;
float:left;
}
Address and copyright sit inside the footer while everything except for my end div sits inside the content wrap. When I check with Firebug it shows the footer within the wrapper.
Link to mockup I am working on. http://ninjasquared.com/LWM/
Remove height:100% from #Content_Wrap and let wrapper to fill around it. Adding overflow: hidden; to #Content_Wrap will do trick for you!
Just replace your #Content_Wrap with this:
CSS:
#Content_Wrap {
background-color: #FFFFFF;
margin: 0 auto;
overflow: hidden;
text-align: left;
width: 864px;
}
Hope it helps you!
Are you targeting IDs, classes?
body and html are elements
but Content_Wrap and copyright are probably IDs or classes and should be referenced like #copyright or .copyright respectively.
Here's a w3schools link for ID/class references.
I'm building this site (www.ellamatthew.com) in Magento. I need a full-width page but the way the Magento CSS is templated, I haven't been able to create it without using "Position:absolute" 100% width in CSS. This creates an issue with the footer not going below the image.
Here's the original Magento CSS that frames the page:
.col-left { float:left; width:182px; padding:0 0 0; margin:0 0 -1px; }
.col-main { float:left; width:715px; padding:0 20px 20px; }
.col-right { float:right; width:182px; padding:0 0 0; margin:0 0 -1px; }
Here's the custom CSS that I've put into Magento but it still doesn't recognize it. There's still a forced space on either side of .col-main:
.col-left { float:left; width:0px; padding:0 0 0; margin:0 0 -1px; }
.col-main {float:left; width:100%; height:100%; padding:0 10px 20px; }
.col-right { float:right; width:1px; padding:0 0 0; margin:0 0 -1px; }
.col1-layout .col-main { float:none; width:100%; padding-top:0px; }
Here's my absolute code:
.homepage {position: absolute;left:0px; top:150px; float:left; width:100%; height:100%; }
The footer is overlapped on the page when I do this. Does anyone have a solution to either force the body content to 100% or move the footer down below the absolute.
Any answers to any of these would be greatly appreciated as I've tried so many things with no luck. Thanks
<div class="main col1-layout">...</div>
Try using .main.col1-layout {float:none; width:100%; padding-top:0px;}
EDIT
To see how to do this, I looked at the source of the page (via inspect element in chrome, or firebug in firefox). Then I looked at the various elements that could be causing the issue, and I noticed the css had it set to be 920px. Once this was overridden it showed up correctly. You might still have some issues with layouts more than 1 column wide (if you decide to use them).
I made a site with pictures and when i enter on the picture page and ...click on Next, Preview pictures the picture float to right. In IE work well but in Google Chrome, Mozilla,Safari ...the middle page float to right.
I tried change in css but nothink .You can help me pls?
Thanks in advance !
The class "content" i put in header and the css code
body {
/*background-color: none;
border-radius: 25px;
background-image:url('/images/gray_jean.png');*/
background: #ffffff;
color: #000000;
margin:0;
padding:0;
}
.content {
position:relative;
margin:0 auto;
margin-left: auto;
margin-right: auto;
text-align: center;
width:100%;
clear: both;
}
Thanks
Replace your current code to this,
.content {
margin:0 auto;
text-align: center;
width:100%;
}
Remove the position:relative; from the .content.
.content {
position:relative; // Remove this
}
And try, may be?
Same issue as before (see Sticky Footer, but only sometimes and Sticky Footer, but only sometimes...continued)...
I have a footer that I want to stick to the bottom of the page unless content fills the page, then I want it to get pushed down. I've done this a dozen times with other sites, but I can't get this one to work. Working in Wordpress. I've checked the order of my divs and I've gone over the css...any help is appreciated.
The main css components:
* {
margin: 0;
padding: 0;
}
html, body {
height:100%;
min-height:100%;
}
#wrapper {
background:url("images/shadowborder.png") repeat-y center;
width:100%;
max-width:100%;
min-width:980px;
min-height:100%!important;
margin:0 auto;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#content {
clear:both;
float:left;
padding:20px 20px 60px 20px;
font-size: 1.6em
}
#spacer {
height: 40px;
clear: both;
}
#footer {
position: relative;
border-top: 1px solid #e5a5fc;
padding:3px!important;
height:20px;
}
The site:
http://www.hcfmissoula.com
The recipe I use is:
height: 100% on html
min-height: 100% and position: relative on body (with height:100% for ie6)
position: absolute and bottom: 0 on the footer div
Maybe be tricky preventing footer from obscuring some text near the bottom though.