Hi I've got a website up.
I'm a no0b but I learn fast and I learn as I go.
However in one of the pages...the footer has gone up too close to the header. I want the area between the header and the footer fixed. I've tried changing the height of the main content in css but it doesn't seem to work. The front main page is ok. It's the about me page I'm having difficulty with. I just want the space between the header and footer fixed regardless of what's between them.
I use:
#site_content {
width: 950px;
overflow: hidden;
margin: 10px auto 0 auto;
padding: 10px;
}
thanks for your help.
Hey just replace your footer code by the below code
CSS
footer {
width: 100%; /* make width 100% changes done*/
font: normal 100% arial, sans-serif;
padding: 50px 20px 5px 0;
text-align: right;
background: transparent;
position: fixed; /*changes done*/
bottom: 0; /*changes done*/
top: auto; /*changes done*/
text-align: center; /*changes done*/
}
Add this to your #footer selector in your CSS:
#footer {
position:absolute;
bottom:0;
}
You can get an idea about how to do it by inspecting this template from twitter bootstrap:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
BTW: Twitter Bootstap may result interesting to you (based on the screenshot you show).
Related
Okay, so I have this code:
footer {
background-color: #359DFF;
text-align: right;
text-decoration: overline;
height: 50px;
width: 100%;
padding: 25px;
margin: 0px;
bottom: 0px;
position: absolute;
}
On this page:
http://ltd.url.ph/
I'm working on a webpage for my school, but the footer seems not to fit the page, also, in the left side, there's a gap, which makes the footer look ugly, as there's a white stripe right at the beggining of the bottom of the page which is not supposed to be there.
Any ideas on how to fix that and make the width adjust itself on all pages ? width:100% won't work for me.
To the body styles, add
padding:0;
margin:0;
Then for the footer, remove the right/left padding by doing this instead
padding:25px 0; /*This gives a top/bottom padding of 25px, and a left/right padding of 0.*/
Also, it would look better if you did text-align:center for your footer.
First of all, when you add the footer padding you enlarging it so remove the padding from the footer and add it to the p.
then you need to remove the height 50px from the footer.
and for final touch set the p margin to 0; and set the padding to :0 25px;
this will give the same look in all browsers with out the need to calc() and other weird css rules
here is the cleanest code for it:
footer {
background-color: #359DFF;
text-align: right;
text-decoration: overline;
width: 100%;
margin: 0px;
bottom: 0px;
position: absolute;
}
footer p{
margin:0;
padding:0 25px;
}
and you don't need the extra div to hold the p.
This Should work for you:
html, body{
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
margin: 0;padding:0; float:left; min-width:100%;
}
footer{
background-color: #359DFF;
text-align: right;
text-decoration: overline;
width: 100%;
margin: 0px;
bottom: 0px;
position: absolute;
}footer p{width: 95%;}
We have a Wordpress site at http://cmagics.eu/digitalmagazinepublishing which uses the responsive2 theme. We are trying to get a sticky header which seems to work just fine, however we are also trying to get a sticky footer which simply sticks to the bottom of the page and works like the one at http://ryanfait.com/sticky-footer/
Because of the slightly cryptic nature of the responsive2 theme how can I;
1. keep the footer stuck at the bottom of the page using the correct sticky method not position:fixed
2. Stop the main content scrolling unnecessarily when there is plenty of room on the page?
html source:
view-source:http://cmagics.eu/digitalmagazinepublishing/
css
#footer {
position: relative;
clear:both;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align:center;
margin-top: -324px; **just a hack to make the footer appear at the bottom incorrectly**
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
}
#site-container {
width: 900px;
margin: 130px auto 0 auto;
overflow:auto;
padding-bottom:162px;
}
.hfeed {
min-height:100%;
height:100%;
height: auto;
}
Here's a solution that I think is very clean. Use absolute positioning for all of your main content elements (header, article, footer). Use #media queries to create breaks at different resolutions if you need to have the header or footer height change for different screen widths (responsive design), and tell your main content area to hide overflow. You can use floated, relative layouts within the main content areas this way, as well.
Here is footer css :-
#footer {
position: fixed;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align: center;
margin-top: -324px;
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
bottom: 0;
width: 100%;
}
I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.
The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.
Here are the screenshots for the two cases:
Here's the (LESS) CSS I'm using for html and body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g
html {
border-top: solid #black 10px;
border-bottom: solid #black 10px;
background: url('img/bg.png') repeat;
}
body {
width: #8col;
margin: 0px auto;
padding: 100px 48px 84px;
background: #white;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
font: 13px/20px 'OftenRegular';
-webkit-tap-highlight-color: #green;
}
I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/
How should I stick the border to the bottom of the page?
You could instead use a footer wrapper like this.
.footer {
position: absolute;
bottom: 0;
border-bottom: solid #black 10px;
width: 100%;
}
and just insert this right before </body> or somehting
<div class="footer"></div>
You can use position:fixed; and bottom:0px; to always, regardless of your scrolling state and content height, fix it to the bottom.
Try changing it to:
height:auto;
for your HTML CSS.
Hmmm... Putting min-height: 100% on the html element on your page (manipulating in Web Inspector) worked for me right away in Chrome; what are you testing in?
This approach does, however, go a little bit over 100% because of the height of the border, which you can correct for in IE8+/Gecko/WebKit with the CSS box-sizing property (use the value border-box).
For IE7 and IE6, if you care to make them render the same, it'd be pretty easy to write a little JavaScript that, on load or on resize, checks the window height, compares to document height, and if necessary forces the HTML element to the window height minus 20.
It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:
#height: `window.innerHeight + 'px'`;
And then add something like
body{
...
min-height: #height;
}
Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.
Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.
window.onload = window.onresize = function(){
document.body.style.minHeight = (window.innerHeight-204) + "px";
// -4px for the border
// -200px for the padding on your body element
}
I do not advise you to apply CSS to html element. Instead create div with similar styles.
In general case your code sould be like this:
HTML
<div id="wrapper">
<!-- main content goes here -->
<div class="reserveSpace"></div>
</div><!-- #wrapper end -->
<div id="footer"></div>
CSS
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }
This works perfect in all browsers, even in IE6 :)
You can always implement this working sticky-footer CSS (I've added with inline social bar):
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
HTML:
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
</ul>
</div>
</div>
Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).
Here is how I added a body border at the bottom:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.
I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.
The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.
Here are the screenshots for the two cases:
Here's the (LESS) CSS I'm using for html and body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g
html {
border-top: solid #black 10px;
border-bottom: solid #black 10px;
background: url('img/bg.png') repeat;
}
body {
width: #8col;
margin: 0px auto;
padding: 100px 48px 84px;
background: #white;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
font: 13px/20px 'OftenRegular';
-webkit-tap-highlight-color: #green;
}
I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/
How should I stick the border to the bottom of the page?
You could instead use a footer wrapper like this.
.footer {
position: absolute;
bottom: 0;
border-bottom: solid #black 10px;
width: 100%;
}
and just insert this right before </body> or somehting
<div class="footer"></div>
You can use position:fixed; and bottom:0px; to always, regardless of your scrolling state and content height, fix it to the bottom.
Try changing it to:
height:auto;
for your HTML CSS.
Hmmm... Putting min-height: 100% on the html element on your page (manipulating in Web Inspector) worked for me right away in Chrome; what are you testing in?
This approach does, however, go a little bit over 100% because of the height of the border, which you can correct for in IE8+/Gecko/WebKit with the CSS box-sizing property (use the value border-box).
For IE7 and IE6, if you care to make them render the same, it'd be pretty easy to write a little JavaScript that, on load or on resize, checks the window height, compares to document height, and if necessary forces the HTML element to the window height minus 20.
It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:
#height: `window.innerHeight + 'px'`;
And then add something like
body{
...
min-height: #height;
}
Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.
Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.
window.onload = window.onresize = function(){
document.body.style.minHeight = (window.innerHeight-204) + "px";
// -4px for the border
// -200px for the padding on your body element
}
I do not advise you to apply CSS to html element. Instead create div with similar styles.
In general case your code sould be like this:
HTML
<div id="wrapper">
<!-- main content goes here -->
<div class="reserveSpace"></div>
</div><!-- #wrapper end -->
<div id="footer"></div>
CSS
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }
This works perfect in all browsers, even in IE6 :)
You can always implement this working sticky-footer CSS (I've added with inline social bar):
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
HTML:
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
</ul>
</div>
</div>
Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).
Here is how I added a body border at the bottom:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.
I am having trouble for some reason with getting the bottom of my page to have some padding. I have a content box that goes to the end of the page and hits the bottom and doesn't look the greatest. I want to give some space from the bottom of the page to fix this issue, but it seems that margin-bottom isn't working as I expect it to? I have included the following code which should be everything that affects the content box. I have tried removing the margin:0 in the html/body (even though I kind of need that), but that doesn't seem to work either? I feel like I am missing something really obvious.
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
text-align:left;}
#content {
position: absolute;
left: 50%;
margin-left: -368px;
top: 104px;
padding-left: 35px;
padding-right: 35px;
padding-top: 15px;
padding-bottom: 15px;
background-color: white;
border: 1px solid black;
width: 664px;
margin-bottom: 20px;}
Any help would be greatly appreciated :) Thanks!
Live link - http://quintinmarcus.com/portfolio/
Since content has position: absolute, its after margins do nothing, nor should it stretch the inner height of the body so that the body's padding-bottom does anything.
If you want to centre your layout, modify your current style for #content to the following:
CSS:
#content {
width:664px;
margin:104 auto 20px auto;
padding: 15px 35px;
background-color: white;
border: 1px solid black;
}
This will also enable you to give the margin at the bottom you want.