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;
Related
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;
}
http://vandapaint.planb-creativeonline.co.uk/inspiration/
I added a Grid Plugin I have asked the question to the Developers but awaiting a reply.
There is 800px of negative space causing horizontal scrollbars. It is only on the page with the plugin which also has a lightbox.
I have been through the CSS with Developer Tools and there is no obvious solution. It is not the menu as is fine on all other pages.
Any help appreciated!!
Ant
It's your #inspiretitle. It has left: 400px; on it, and as a block element, it will extend off the page. Try getting rid of that positioning and just add text-align: center;
#inspiretitle {
left: auto;
text-align: center;
}
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 have been trying to center a Navigation bar on my Vbulletin website for a few days now. I've tried changing the parent class, the child class, manually inserting CSS in the html element, but it seems that something is overriding the style somewhere. Firebug does not seem to identify the problem for me.
Link to the forum: http://www.mobileassaultgroup.co.uk/forum/
The navbar is just underneath the banner image.
I have tried
display: block-inline
margin-left: 50%;
margin-right: 50%;
horizontal-position: middle;
On both the <ul> and <div> to no avail; it just sticks there slightly off to the left.
It is not the search bar on the right hand side either as I deleted that from the page and it still stays on that position.
Any ideas?
Thanks
Something like this will work if you remove the search box.
CSS:
#navtabs_container {
display: block;
width: 600px;
margin: auto;
}
#vbtab_forum ul {
left: 50%;
margin-left: -260px;
}
This css of yours won't work. This this instead.
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Main markup
<body>
<div id="contenedor">
....
</div>
<div class="fLeft"> <footer > ... </footer> </div>
</body>
CSS
body{
}
#contenedor{ float: left; width:100%;}
.fLeft{ float:left }
I guess best way is to firebug the page..
http://209.51.221.243/integracion/login.php
As you can see, the footer is above the middle of the page behind the content...
At first, I thought it might be that you didn't clear your float. But then I noticed that each floated element is absolutely positioned. By applying position:absolute to an element, you're ripping it out of the flow of the document. The best way to fix this is to remove position:absolute from your "widgets", but then your design won't appear how you currently have it.
An idea/suggestion to workaround your limitations is to fix the footer to the bottom of the page. Apply the following to <footer>:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
You'll notice that your footer will stay put as you scroll on the page, and that can very possibly be less than ideal, but I can guarantee it'll stay on the bottom of the page. Otherwise, you're looking at reworking your styles because of the misuse of some properties.
You use floating divs before footer, so, in order to put the footer after those divs, the css of your footer should contain: clear: both;, or clear: left;, in your case.
Docs: http://www.w3schools.com/cssref/pr_class_clear.asp and (of, course) https://www.google.com/search?q=css+clear :)
UPDATE2: I realized I was wrong. This answer does not work in this particular case.
First: This is a pretty good starting point for any footer. Use it.
Second: You may have noticed that the container that has all the floating boxes (.centerCnt) isn't big enought to fit them all. To fix this you need to use a good .clearfix. There are many to choose from, but I use this one:
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. - j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
You will need this on .centerCnt otherwise the Sticky Footer won't work.
UPDATE: Simply using the clearfix would probably fix your issue. Add the code above to your CSS and give .centerCnt the class clearfix.