Here is the jsFiddle that contains full code.
As you can see, the footer consists of three distinct sections:
4 columns of links
A <hr/>
A copyright notice
Links to the privacy policy and terms of service
I want to:
Center the footer (as you can see, currently it's lop-sided slightly to the right) and my attempt via center-block does nothing
As you can see, the footer is pushed right up against the bottom of the jumbotron. I want this to be a "sticky" footer, such that it is always pinned to the bottom of the viewable screen, even if there isn't a lot of content on the page (e.g., just a jumbotron).
I can get this stickiness by changing adding a position: absolute; definition to the .footer rule like so:
.footer {
color: rgb(176,205,249);
background: rgb(12,66,144);
border-top: solid 5px rgb(176,205,249);
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
However when I do this, the footer breaks out of the container and the browser displays a horizontal scrollbar - not desirable. Any ideas how I can accomplish both my objectives here?
Related
I have been trying to set my footer in my web for a while with no luck..
The footer sticking to the bottom of the screen, and if there is scroll-bar, so when I scroll down, it will slide up...
I want it to stick to the bottom but not like position: fixed (if there is scroll-bar, then I don't want to see the footer until I scroll to the bottom).
There is 3 main components in my web (header, content and footer).
This is the footer css:
background: #929191;
border-top: 1px black solid;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
I have tryed changing html and body to "height: 100%" but the only thing that was almost like I wished for, was when it made the height bigger than the screen.
It was like height: 110% (even though the sum of heights was 100%).
I Tryed to reduce it, until I fit but it every little change in the UI make troubles.
I would very appreciate any help..
Sounds like you are looking for <footer>. Keep in mind it won't work in early versions of Internet Explorer. Here is some more information. Let me know if this works out.
Try this on your footer -
.footer {
position: relative;
bottom: -500px; // you can adjust the negative value
}
Long time learner, first time poster.
Here's my dev site: http://kcyc.webstuffdepot.com
I'm using a bit of jquery to add a class - 'sticky-header' - to the header of the site. Sticky-header makes the header scroll with the user. Here's my CSS:
.sticky-header {
z-index: 99999;
position: fixed;
width: 100%;
border-bottom: 1px solid #ccc;
min-height: 60px !important;
background: #fff;
}
I've used this setup many times with the same Genesis theme and it's been great. With this application, however, something weird is happening. As you scroll, the header flickers in and out, interacting with elements below it.
The part of the header that blinks in and out is always consistent, as though it is being interrupted by an unseen page element. I can't find any page element that is consistent throughout the site that would be causing this behavior.
I'm wondering if you fine fellows could point something out to me, or know some aspect of the CSS I'm trying to use that's causing confusion in the display.
You would have to set the width and position on your wrapper div as well because you are floating your aside and setting it at a width of 50%.
Since the wrapper div does not have a set width, the wrapper doesn't know what width to take (50% of what?). The wrapper div also needs to be relative to the header position to inherit the z-index. I used the below code and it fixed the problem.
.sticky-header .wrap {
padding: 10px 0px;
width: 100%;
position: relative;
}
I am doing SharePoint UI branding for my company clients. Most of the client would like to keep their footer always on bottom of the page(not sticky). When content is more it is going automatically bottom, but if the content is less, i want to keep the footer on the bottom of the screen. In normal HTML page i can able to achieve this using CSS. But in SharePoint till date i am using javascript to fix this issue.
Is there any way i can resolve this problem using only CSS in SharePoint 2013?
Solution for this is essentially the same as adding a sticky footer to a HTML page (as described here), except that it's more difficult to locate the correct positions for the divs in the seattle.master file in SharePoint 2013.
The sticky footer is created by adding 3 sections (wrapper, push, and footer) to the page using div tags. push goes immediately after s4-workspace div (main content area), and wrapper surrounds both main content area and push. footer immediately follows the closing tag of wrapper div.
CSS below is required to format the new divs.
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
clear: both;
}
A couple of points to note are that footer and push must be same height, and clear property with value of both insures the footer extends across entire page in a multi-column layout.
This is a great write-up specifically about adding a sticky footer in SharePoint 2013.
If you have access to the masterpage of the solution you can use CSS to make the footer stick to the bottom of the screen.
1) find the div id="s4-bodyContainer"
2) add a div called id="footer" Your footer content here /div>
3) Add some CSS to make the magic happen:
#footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #1C537C;
color: white;
padding-top: 5px;
text-align: center;
min-height: 75px;
}
Look at this site if you want a demo, and look at the source code if you want.
https://amendeonline-public.sharepoint.com/Sider/default-en.aspx
I'm building a website for our church and I'm using joomla 2.5 to do so. The template i used was wsnone2. I know a bit of code but not a lot i've tried to play around to sort out this issue but i cant seem to do it. Basically when there is very few lines of text as here http://www.smass2.co.uk/index.php/en/hymns/annual/deacon-responses/liturgies the footer comes up and covers the space. How do i stop that without making the position fixed. i tried using ryanfait sticky footer, and several others, but that didnt seem to work. can anyone people provide me with any more suggestions? if possible could the solution be done through CSS?
Thanks.
Actually, this is going to be harder than it looks at first glance. You have a couple things working against you here. First, your footer is actually contained in 2 divs, region9wrap and region10wrap. Doing as #gartox suggests will only move part of the footer to the bottom of the page. You would also need to do the same for the other part. To do so you would need this CCS -
.region9wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 30px; /* height of div below*/
width: 100%;
}
.region10wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
}
That will move both parts of the footer down, but now you will have a huge dark stripe where your background does not extend to the footer. Now you have to fix the background. First you need to remove the background from region4wrap completely.
Then add the background to the body tag -
body {
background: url('http://www.smass2.co.uk/images/Cross.jpg') no-repeat #0D0D0D;
}
This will make the background extend all the way down to the footer of the page without causing a big dark stripe.
You need do this:
In the class .region10wrap add this properties:values
.region10wrap
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px; /* your height footer*/
width: 100%;
}
Easiest way to do this is to have the footers background on the actual page (behind the whole site), so when the footer can't reach the bottom, it will look like it's stretching all the way down.
I've been asked to change the layout of this charity website:
http://antidotemarketing.com/youthlife/
I need to place the nav up the top, then the logo underneath, then under that the white box containing the slider and main content.
This must be done using CSS only.
So far I've had difficulty getting the same results in both Chrome and FF... I haven't even checked IE yet. How would I go about positioning the logo in the middle of the nav and the main content box with some adequate spacing (say 20px top and bottom)
One more issue: I can't absolute position the logo because when people log in to wordpress, the header that wordpress injects into the top messes up the spacing of everything.
Thanks everyone :)
OK, I think I finally understand what you are after. Try adding the following styles:
#logo {
position: absolute;
top: 80px;
z-index: 100;
}
#login #logo {
position: relative;
}
#page {
margin-top: 45px;
}