Good afternoon people. I sux with css son I wish someone can give me a hand with this. I'm trying to print some kind of html text taken from a html page with a header and a footer. This footer has to stays on the bottom of the page, if is there a second page it should appear on the bottom on that page. Anyway, I got this fiddle to show. The html looks great but when I print the page with a pdf printer, the text overlaps the footer, but only in Firefox, if a run the fiddle on Chrome, it prints the footer below the last paragraph on the second page.
Any idea how to implement this idea?
In your final div, remove the position:absolute, left and top css styles. You are positioning the footer overtop of everything. The value for top would have to be manually adjusted for each browser and you probably want to stay away from that.
Here is an updated fiddle with those css styles removed from your footer div: http://jsfiddle.net/BumbleB2na/F3kSQ/2/
Related
Working on a new design using bootstrap3 and trying to stretch the page so that even if there's not enough content to fill the page, the footer section would stay to the bottom.
The reason why I'm using position absolute, is because there's a link from the billing software that's being added within the content, I don't want to remove the link but position it a bit to the bottom in the footer section, in the center bottom, thus since I can't control where this will appear(do know where appears, just can't control), using position absolute on the specific element helps me here.
Now, that's not issue, just saying why I need to use position absolute and why I made the divs like this:
wrapper
>>wrapper_content
>>wrapper_footer
fiddle: http://jsfiddle.net/raicabogdan/jsk1b7ua/4/
the footer section is properly set to the bottom, however for some reason, the wrapper_content does not go 100% height automatically on load or on window resize. Also if you resize to mobile view, content will go down few table rows.
The content goes under the footer section.
What am I doing wrong here? Left a fiddle of the html page along with some css that I felt were needed above.
Hope there's someone that could get me out of this.
Cheers.
Try this link. I have used this method to get the footer to stay at the bottom of the window.
http://ryanfait.com/sticky-footer/
I have a page with 3 basic elements. You have your main content which runs down the center of the page at about 80% and has a white background. On the side of that main content you have the left and the right side at 10% each which for design reasons is grey. So far So good. Now I have my footer which as of recently was contained as a sticky footer and remained at the bottom of the page. I want the footer to be at 100% width and sit right under the content and if the page is being viewed on a screen that is too large then have the footer fill the rest of the page with white.
<p> I've tried everything that i know with the CSS I think I'm just missing something simple. I have to put some code in here to link to a fiddle </p>
Here is a link to the fiddle:
http://jsfiddle.net/dPek3/
You fake it by making your body background color the same color as your footer. You usually have to have a wrapper that contains your content to overlap this change, but it is extremely effective and I would recommend it. You also need to clear your floats. Here is a working example: http://jsfiddle.net/dPek3/1/
I took a 1 page parallax scrolling template but I added more pages so it's not just a 1 page site anymore.
I figured out how to jump to the html anchors on the home page when your on a separate page. But now I have an offset issue that I just can't figure out.
The page is https://zoopyo.com - just click pricing or features and you'll see that the title gets cut off. The scroll just needs to be about 90px up. Which is the size of the sticky header. If the sticky header wasn't there it would be fine. So I just need to figure out how to offset it by 90px from the anchor. If that is even possible?
I can't seem to load the website but from what I understand, the navbar is covering some content on top.
my suggestion would be to make an empty/dummy div at the top of the page with the same height as your navbar, then set your to the dummy div, while maintaining the label of the first real div.
something like this:
<li>top</li>
where dummy is empty and set to the height of your navbar
see this jsfiddle I made, the "hello world" is not covered by the navbar
http://jsfiddle.net/49AtS/1/
I'm trying to get a footer to stay at the bottom of the webpage and allow for different amounts of content on different pages. It works on my index.html page but when I go to the "about" page the footer floats to the middle of the page. Any advice? the website is up at http://www.concept82.com/DISupdate/index.html and the trouble page is http://www.concept82.com/DISupdate/about.html. Thanks!
For a start, you need to move your #bottom div outside of the #wrap div, so it's immediately following it. That'll get you most of the way there, but there still seems to be something on your index page that's keeping it from moving all the way to the bottom of the window.
Instead of -200px margin-top on #bottom, do 200px. That will fix it.
I have a HTML page with a CSS print layout where I want one of the divs, to always appear at the bottom of the final printed page without overlapping any of the other pages.
I've tried various things, including position:fixed;bottom:0; but when converted to a PDF with iText, that div was in the same position on every page.
Thanks.
have you tried Sticky footer? Always worked for me (IE / FF / Webkit)
http://ryanfait.com/sticky-footer/
How about: a max-height and min-height the same for the printing page and the div positioned absoluted at bottom 0?