I'm currently working on a new design for a web site, and I have a little problem with my footer (image) and getting the content to overlay.
For the footer I'm using this at my starting point: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
You can see the new design here: [edit]site doesn't exist anymore, sorry about that[/edit]
http://nubi.dk/dev/ (content and design is currently evolving thus doesn't fit the question anymore - sorry for that)
What I would like is to have the green part (content) to continue all the way down over the image at the bottom, but for some reason (I cannot see why) it goes behind.
Just add "position:relative" in layout.css for #content.
#content {
background-color: #00FF00;
margin: 0 auto -130px 0;
position: relative;
width: 960px;
z-index: 9999;
}
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
}
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.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I was wondering if anyone could help me out fix my the top portion of my webpage to stay.
I have tried using the position:fixed attribute, but this hinders everything as then my content overlaps the fixed divs.
My website is here:
www.crookedcartoon.co.uk/print.html
I would like everything above the navbar, navbar included to stay glued to the top of the page and the content to scroll under it.
I realise this may mean i'll have to change the majority of my images to jpg instead of png. However, i was wondering if there was anyway around this? As in create a false line that the content scrolls under, then disappears, rather than reaching the top of the page, by where you will see it through the transparent parts of the PNG images. I don't want to use an iframe, really, unless this is the only way.
Thanks!
An iframe is certainly not the right choice here. Put a div around the stuff you want to have on top, put position: fixed on it and position it to the top left corner.
<div class="ontop">
<div id="top"></div>
<div id="logo"></div>
<div id="contact"></div>
<div id="navbar"></div>
</div>
After that, add some margin-top on #content-holder that equals to the height of .ontop. This is necessary because it is taken out of the document flow (because of position: fixed) and content will go under it.
If you also add background-color: white to .ontop, your transparency problems will be gone.
Tried to replicate your setup, here is a working demo.
you may try this
please update below css as i have updated the image by making the portion at the bottom transparent,making the top background white. [1 - DOWNLOAD IMAGE AND CHECK IT]
#ontop {
background: inherit;
height: auto;
margin-top: -10px;
position: fixed;
z-index: 10;
}
#contact {
background: none repeat scroll 0 0 white;
height: 45px;
margin-bottom: 1px;
margin-left: -5px;
margin-top: -8px;
position: relative;
vertical-align: top;
width: 1127px;
}
#logo {
height: 62px;
margin-left: -10px;
position: relative;
width: 1127px;
z-index: 1111;
}
]
1
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;
}