type here
Guys currently i am building a blog website for practicing basic ejs so i am facing a problem that if i start adding my blog contents to my website . While adding the content i am not facing any problem but once i reach the end of the page . My content goes back of the footer div
Rather than blog content to placed above the footer..
This is the problem i am facing right now . I guess the problem is in my CSS part.
Help me to fix this thing.
This is the only part where is used positioning in my entire code
Footer
I tried to change postion of the footer . and also but adding html tag postion to relative still it didn`t work out
CSS:
.footer {
position:absolute;
text-align: center;
padding:5px;
bottom: 0;
width: 100%;
height: 60px;
background-color: #1abc9c;
}
Related
I really need your help.
I faced problem when I add widgets such as ninja form or tab responsive into my page they falls over on footer.
Page suppose to expand body for content but it expand footer for that purpose. Unfortunately website is in Russian but I think you can see what’s going on.
In page source it shows that #content take height: 755px; when I try to modify it in style.css.
I does not make changes. When I set auto I works but not permanently.
http://zumrf.ru/oformim_zakaz/
Add to your #footer clear: both; in your CSS and it's fixed.
Your #primary has a float, that's why the content is over your footer.
Add this css and try.
#content{min-height: 530px; overflow: visible;}
#colophon { clear: both;}
remove from #content
height: 530px;
I don't know if you guys have messed with Squarespace Cover Pages but man they're hard to navigate code-wise. I'm doing a standalone promotional site that only requires a cover page and a video so I'm using the "Premier" cover page. However, for legal reasons I've got to have a footer with copyright info and a link to our privacy statement. My original idea was to use header injection with css ::after to include a full width div but I want the cover page to still take up the full screen and for the user to be able to scroll down to see the footer.
One example I tried to modify was https://answers.squarespace.com/questions/109923/adding-footer-text-on-cover-page-code-injection.html using this code:
<style>
#collection-559df309e4b026e5cd65a4b4
[data-slide-id="559df309e4b026e5cd65a4b5"]
.sqs-slice-group.group-social::after {
content: "some general text";
padding: 5px 0;
margin: 0 auto;
text-align: center;
font-size: 10px;
color: #fff;
}
</style>
I swapped out my collection ID and data-slide-id into this code but it put the "general text" block on top of the play button as well as in the upper-right corner of the screen. I've tried changing elements around to no avail - any help would be appreciated.
Here's what I would do, if I preferred to avoid the use of Javascript. Insert the following HTML into the "Code Injection" header area for the cover page. This will add a div that appears below the main content area, so that the user must scroll down to see it.
<div id="coverFooter">
<a id="coverPP" href="/privacy-policy/">Privacy Policy</a> <span id="coverCR">© 2016 Your Company, LLC</span>
</div>
<style>
#coverFooter {
position: absolute;
z-index: 1;
top: 100%;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: white;
box-sizing: border-box;
text-align: center;
padding-right: 30px;
padding-left: 30px;
/* Use this for right aligned text instead.
text-align: right;
padding-right: 60px;
padding-left: 60px;
*/
}
#coverPP {
white-space: nowrap;
}
#coverCR {
margin-left: 10px;
white-space: nowrap;
}
</style>
Here is a working example, which I will keep online for a week.
You will of course want to modify the href link, the copyright text, and perhaps the CSS rules such as colors and padding values.
Keep in mind that this is injecting the coverFooter div into the top of the body element, though CSS is making it appear at the bottom. This could encourage search engines to index the text inside the div as your page description in SERPS. Be sure to add a "Search Engine Description" under Settings -> Basic in order to help mitigate this, and keep an eye on your page description in SERPS. If this becomes a problem, keep the CSS in the header injection area, but replace the div HTML with Javascript which inserts the div at the bottom of the body element.
Finally, you'll either be linking to a privacy policy on another domain or you'll have to select "Add more pages" and add the privacy-policy page to the "not linked" section.
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'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;
}
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;
}