Well I know there are a million questions regarding this topic - but I haven't found an answer for my specific case.
I am wanting to create a sticky footer (not position: fixed) but one that will stay at the bottom if the content isn't sufficient to fill the page space. If there is enough content the footer will act as normal.
Well on other pages not using bootstrap I have been able to do this:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
See it working on my site here:
http://www.magnetize.ca/policies.shtml#/pp
But on part of my site I am forced to use bootstrap and when I try the flexbox method things go really wrong:
http://my.magnetize.ca/knowledgebase.php
On most browsers I only see the footer get cut off on that page - but on Safari things get seriously messed up.
So, to summarize, I am looking for:
A sticky footer solution that:
Isn't the fixed footer solution (acts as a normal footer if content is sufficient to fill page)
Doesn't require a fixed footer height
Works with bootstrap
Any help you could give me with this specific problem?
EDIT:
I am just trying out the "table trick" method as listed:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
It is live now at: http://my.magnetize.ca/knowledgebase.php (on all my.magnetize.ca pages)
It is working much better than flex-box so I have ditched that idea. Everything is working beautifully on all browsers...except safari. On safari there are massive margins at the top and bottom of the page even though no margins are set.
You could try using http://stickyjs.com/ I have used it for navigation bars that start in the middle of the page and then stick to the top.
I also found this http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/# which looks more like what you are looking for.
Related
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
Any idea's why my nav is showing up under the header and not inside next to the logo?
I spent all day yesterday designing a page just like this. Same everything on design and pretty much the same on coding, except I used DW fixed pixel (or liquid, but i think fixed), but after seeing a course on Lynda.com I decided to redo it in DW's new fluid grid layout (which I love a lot more (never used before)).
I've tried several things (i.e logo image align left etc) to no avail.
Screenshot
Comment Entering inspect mode and resizing the header div shrinks the menu, so it know's it's in the header
P.S. Danko thanks for the screenshot assist. On allowing it to be posted.
Answered in comments. Credit goes to David Randall.
Added div's logo and menu to elements in header div per something I was going to try (floating left). While this brought them inline together it popped both out of header.
Dave suggested
overflow: hidden;
Worked perfect.
I'm having a little trouble here: ..
Everything seems to work fine (had a small problem with the divs moving around when I resized the window but managed to fix it with a little help from the users of StackOverflow) but I have run into another problem now.
I'm using wordpress for this website with some modifications to a basic theme that I've made. Everything works fine except when you make the window quite small, the horizontal scrollbar appears but when you scroll the horizontal scroll bar you'll notice that the menu overlaps with the content.
How can I make it so that they don't overlap? I tried to make the position of the sidebar absolute instead of fixed, but the menu is supposed to stay there when I scroll vertically.
Not sure how I should go about this... any help would be appreciated!
Thanks!
As I said in my comment, you will need javascript to prevent the content div from overlapping the fixed menu
To point you in the right direction check out this
plugin on github .. its a great plugin using jQuery to accomplish pretty much exactly what you're after ..
Here is the working version using a small bit of jQuery, I hosted it so its easier for you to see:
The only change to the layout you need to make is to set the sidebar-primary div to left: 0; , it nudges that div very slightly to the left, but I think its worth it given that your original problem is solved with just a tiny bit of jQuery. Let me know if it works for your layout ..
There's this bug that I can't seem to fix where IE cuts off part of my text if I leave the footer in the same exact place as the main page. The following are examples of my main page footer position and the subpage footer position. I was wondering is it bad design to move the footer position this way? (the flow of the site fits better with the moving of the footer though)
Main page: http://www.sixfoldstudios.com/stars/index.html
Subpages: http://www.sixfoldstudios.com/stars/home.html
Thanks!
The footer doesn't look all that different except that it is smaller on the subpages. This is not a bad design decision.
As long as the footer looks the same overall and doesn't throws the text around it should be okay. People don't really look at the footer unless they need something from it so I'm sure most visitors won't even notice.
I am not a designer, so I can't answer you from this scope. But as user, I can't say that looks bad, your footer doesn't include any great information for the end user, that will visit just the website, I doubt if most users even check it. Of course the things change if you had a sitemap. Also big sites use different position for footers, here an example of ebay.
Homepage: http://www.ebay.com/
Answers Center: http://pages.ebay.com/community/answercenter/index.html
I would keep the footer the same everywhere. The reason why you might have a problem is because your footer div is in the rightcontent div.
Just move it outside just before the closing div of your container and if text overlaps it set the css to clear:both;
I have two sets of class for both me mainpage & subpages footer at times & it doesn't bother me much as long it does it work ^_^
My website has a footer overlap in IE7, while fine in all later browsers.
here's the link:
http://www.kindreviews.com
i have tried finding a solution via google, but answers seem so variant.
Please help!
Thanks,
zeem
You've got bad encoding in your copyright area: Markup Validation of kindreviews.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code. Fix that and then revalidate and see if there are other code errors.
And you have a low answer acceptance rate; see the FAQ https://stackoverflow.com/faq and accept answers to your old questions.
I have to say that the site layout is a bit messy: container DIVs with smaller widths and heights than the contents, too many negative margings, and the like..
For instance, the DIV #cuber_div containing the flash banner, having an height set to 515px, is overlapping the text, so the upper part of text isn't selectable.
Besides, the #footer DIV is outside of the #wrapper DIV, so relative positioning in buggy browsers such as IE < 8 gets messed up.
My personal suggestion would be to fix the mark-up and re-style the whole site from scratch.
It may take time, but far less than keeping the site like that and having it to break up every once in a while for seemingly no reason, and then go figure..
It's up to you to decide.