So i built this website (using Angularjs) and for whatever reason, in one of the pages, the footer is keep floating no matter whatever i do.
You can see the issue here:
http://www.deliverightlogistics.com/howitworks
While if you go here, you see the footer positioned in the right place:
http://www.deliverightlogistics.com/ourprocess
The weird part is that given that they both generated into the same Angular content (ng-view), i can't find the reason why i have this issue in one page and not the other.
Keep in mind that I would need a change that would fix the problem but not causing other pages' footer to 'misbehave'.
Thx
This isn't an Angular issue, but a CSS one. In your style.css, you have both #howitworks_second and #howitworks_second article positioned absolutely. Take those declarations out, add a clear: both; to the footer, and your footer pops back to the bottom.
Related
I am searching for a piece of html which I believe may be causing my site to be obstructed by random black boxes on every page.
I believe that footer is somehow duplicated and <footer></footer> may be the root cause but unsure where to locate it or if there's such a thing as article.php?
Example page: https://adsler.co.uk/events/
The problem is that your content entry has footers. It is not the page footer it is the entry footer that you are seeing. It might be weird to change if you are using a theme. There might be a setting to remove entry footers. But if that does not work you can go into your CSS and apply .entry-footer { display: none; }. This will remove the black box. I will attach a screenshot.
Hope this helps.
I would advise that you leave the footer in the article alone. Fix your problem by styling .site-footer instead of footer
The footer element existing in more than one place is semantically correct HTML5. It signals users and devices of all types that this is the footer of the current part of the site. Your black boxes are because you have styles applied to footer that should be applied to .site-footer instead. You can't predict that the html content created by some plugin wont include a footer element, but you can be fairly certain that it won't have a footer with the class .site-footer
On my site http://math.byu.edu
I've been trying to make it responsive to screen size but I noticed a problem when I resize the broawser while on the page. If I shrink and enlarge the browser multiple times the min-height is dynamically getting set to a huge number and I end up with a lot of whitespace.
I've searched my php templates and my css and I can't find anythign that owuld be causing this min-height issue. Does anyone have any ideas?
As per the comments, just comment out the line positionFooter() from the $(window).resize() function.
The reason this theme has this script is to make sure the footer doesn't float into the middle of the page assuming the page has zero content. When the page has zero content, there's nothing to push the footer down. So that script is supposed to keep the footer at the bottom of the page, though it does it poorly.
For future reference, if you need a sticky footer (as it's called), I suggest using Ryan Faits Sticky Footer. Just wrap the content in a main wrapper, make sure the footer is a sibling of the main wrapper then use the supplied CSS to make it work.
Here (on Chrome 10) the footer seems to be aligning with the side bar (too far to the right) instead of center like it's supposed to be.
I didn't edit the footer's CSS. I was editing the sidebar and the index when this happened, but it's so far down the page that I didn't notice 'til later, so I have no idea what the problem is.
Any suggestions welcome! Thank you :)
Tara
UPDATE: I've checked all the DIVs are correctly closing. Some were missing in the side bar, and that's fixed the problem on the front page but not on sub pages or articles. Now there is a black line appearing at the top (under the menu) that appears to be the #footer!!. I can't understand why it's there.
you wrapper #casing contains floated elements, which are not cleared for following elements.
#casing { overflow: hidden; }
This should fix it for modern browsers. I recommend this article for better understanding and other clearing solutions.
You need to clear your floated elements by adding clear: left; to your #footer css.
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 ^_^
I've seen Ryan Fait's method for sticky footer as well as one here and here.
Why are these people making templates for sticky footers when #footer{position:fixed; bottom:0;} will suffice?
EDIT:
I will add that using position: fixed; for a footer does break margin: auto; centering in (at least) some browsers, thus creating the need for a wrapper tag. Part of my problem with the above mentioned methods is the extra tags which are confusing, syntactically incorrect (for the "HTML purists") and it eats bandwidth. However, a single wrapper around the footer is still, in my opinion, better than a whole jumbled page template to have to start with. And, "my" way is still more straightforward and eats less bandwidth.
The difference between using position: fixed and Ryan Fait's method1 is pretty fundamental.
When using position: fixed, the footer is always visible, and that's not what a sticky footer is trying to do.
The meaning of a sticky footer is to stay sticked to the bottom, except if the content is longer than the viewport height. In that case, the sticky footer will act like a normal footer, appearing just below the page content.
Here you can see the effect of a sticky footer. In the Result window, you see that the footer stays at the bottom of the page. Click on the 'Add content' button to add content, and then you will see that the footer shifts down to stay below the content.
1. This is a snapshot of 10 January 2013 from the Wayback Machine, as Ryan's website itself does not contain the original post any longer.