Vertical align footer at page bottom - WebHelp target

Sam50 · Post by **Sam50** » Thu Feb 23, 2012 11:04 am

I need to include a copyright notice at the bottom of each page. My target is WebHelp and I believe I'm supposed to use the master page instead of page layouts to accomplish this. I have included my footer text below the bodyProxy in my master page. The problem is that the text shows up in the center of my pages instead of at the bottom of each page. I have tried using a table and vertical-align the footer but did not get it to work. Does anyone have a suggestion? Thanks a lot.

<body>
<MadCap:breadcrumbsProxy />
<MadCap:bodyProxy />
<p class="footer">Send feedback about this topic to xxx.</p>
</body>

Post by **LTinker68** » Thu Feb 23, 2012 11:24 am

You can't get the effect you want, at least not exactly.

You could use a div to always position the copyright at the bottom of the browser, but that means your topic content will scroll up from behind that div or will scroll over it, depending on how you style the DIV. If that's acceptable, let me know and I'll post the code I use (I only use that code on my welcome page which isn't that long, so I don't have that problem, unless the end user really shrinks their browser window).

The alternative is to add a padding-top value and/or a top border to your p.footer style so there's always some space and/or a border between the last block of content and the copyright notice. The MadCap knowledgebase does something similar -- they have a top and bottom border on their copyright block to separate it from the preceding content and the following content (which in their case is a Feedback comments section).

crdmerge · Post by **crdmerge** » Thu Feb 23, 2012 11:46 am

Use the CSS position selector; see the w3schools site at http://www.w3schools.com/cssref/pr_class_position.asp.

You would do something like the following, adding whatever other styling you want. The CSS position is relative to the screen, not the height of the topic.

p.footer
{
position:absolute;
bottom:10px;
}

If you want to have this float behind whatever text there might be (for larger topics), add:

z-index: -1;

Good luck,
Leon

Sam50 · Post by **Sam50** » Thu Feb 23, 2012 11:48 am

Hi Lisa,

I would like to take a look at the div code you are using. That might be an option for me. Thanks a bunch!

Post by **LTinker68** » Thu Feb 23, 2012 12:17 pm

Leon's code above will work, although I might do a positive z-index instead of a negative one so that the content comes up from behind the footer. I'd also add a background color to it, even if it's just white, and add a top border to the paragraph class. That way the footer will appear solid and nothing will show behind it. Oh, and I'd probably give the paragraph a bottom value of 0 but give it some padding-bottom value instead -- that way the paragraph itself is flush with the very bottom of the page (bottom:0) but the copyright text isn't flush with the bottom of the page (padding-bottom:10px).

There is one other thing I'd do... Give your MadCap|bodyProxy style a padding-bottom of 25px or 50px. If you don't do that, then with long topics the last two or three lines of content would always be hidden behind the footer because there's not enough scrollbar to move the content up past the footer. So the padding-bottom value on the bodyProxy style should ensure that there's always enough scrollbar available to scroll the content up past the footer. You'll have to play with the value of the padding to make sure it's large enough to get past the footer. (Note that I've never actually tried adding a padding-bottom to the bodyProxy style, but it should work.)

Sam50 · Post by **Sam50** » Thu Feb 23, 2012 12:24 pm

Thanks Leon and Lisa. I'll try your suggestions.

Sam50 · Post by **Sam50** » Thu Feb 23, 2012 12:58 pm

It works great except for one issue. When I land on a long page with a scroll bar the footer displays fine at the bottom of the page (in front of the contents). But when I scroll down, the footer doesnâ€™t re-adjust position. It just is stuck on top of the text and scrolls up with the text. I have attached a screenshot of the footer before scrolling and after scrolling down. Any ideas on why this happens?

p.footer
{
color: #808080;
width:98%;
background-color:#FFFFFF;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #4169e1;
font-size: 8pt;
text-align: center;
position:absolute;
bottom:0px;
padding-bottom:10px;
z-index: 10;
}

Post by **LTinker68** » Thu Feb 23, 2012 1:01 pm

What's the code in your masterpage look like?

crdmerge · Post by **crdmerge** » Thu Feb 23, 2012 1:09 pm

I can't be sure, but I think that z-index: 10; might be the killer here. z-index: 1; should be sufficient. Or the "MadCap|bodyProxy style a padding-bottom of 25px or 50px" suggested by Lisa?

Post by **LTinker68** » Thu Feb 23, 2012 1:36 pm

The z-index shouldn't be a problem unless there's a z-index in the content itself and it happens to be higher. If that's the case, you could set your z-index to 99 to be safe. And make sure there's no z-index in the base html or body tags.

The margin-bottom on the bodyProxy could be a problem. Like I said, I hadn't tried it before. You could try removing that and seeing if it takes care of the problem. If it does, then the alternative is to manually add a blank paragraph or two or three to the bottom of each topic. It's just hard to remember to do that, which is why I suggested the bodyProxy option.

Post by **NorthEast** » Fri Feb 24, 2012 1:28 am

Sam50 wrote:It works great except for one issue. When I land on a long page with a scroll bar the footer displays fine at the bottom of the page (in front of the contents). But when I scroll down, the footer doesnâ€™t re-adjust position. It just is stuck on top of the text and scrolls up with the text. I have attached a screenshot of the footer before scrolling and after scrolling down. Any ideas on why this happens?

Yes, do not use position: absolute as mentioned above; use position: fixed if you don't want it to scroll.

That will do it; it's not related to z-index, margins, or anything else.

i-tietz · Post by **i-tietz** » Fri Feb 24, 2012 7:35 am

LTinker68 wrote:You could use a div to always position the copyright at the bottom of the browser, but that means your topic content will scroll up from behind that div or will scroll over it, depending on how you style the DIV.

You can insert a padding-bottom for the body that is higher than the footer.
We use such a div as header and the heading (h1) of the document is inside the div. A long heading can produce a line break and the div gets higher, so I use an onload/onresize javascript that finds out what the height of that div is and sets the appropriate padding-top for the body.

You can do something similar for the padding-bottom. And you don't even need to find out the height, because it's always the same.

Code: Select all

body {
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: 10px;
	padding-bottom: 40px;
	margin: 0px;
	z-index: 1;
	position: absolute;
	line-height: 140%; }

div.footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: 0px;
	padding: 0px;
	padding-left: 3px;
	width: 100%;
	height: 28px;
	border: none;
	z-index: 2;
	background-color: #eee;
	border-top: 5px solid #999; }

and

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <head>
    </head>
    <body>
        <MadCap:bodyProxy />
        <div class="footer">
            <p>This is the footer over the full width of the window.</p>
        </div>
    </body>
</html>

the result is:

fixed-footer.png

This solution has the charm of having a padding-left and padding-right in the body, which does not apply to the footer
and
you're able to have more than just a single paragraph as footer.

i-tietz · Post by **i-tietz** » Fri Feb 24, 2012 7:55 am

Sam50 wrote:It works great except for one issue. When I land on a long page with a scroll bar the footer displays fine at the bottom of the page (in front of the contents). But when I scroll down, the footer doesnâ€™t re-adjust position. It just is stuck on top of the text and scrolls up with the text. I have attached a screenshot of the footer before scrolling and after scrolling down.

Try this:
Target -> tab "Advanced" -> Add DOCTYPE declaration to generated topics: checked
Then it works for the Internet Explorer (version 8 ).
If you want it to work for Firefox (version 10), you will have to insert one or two empty paragraphs in the masterpage, between thre div and the body proxy. But then you will have to set the padding-bottom back to 0px.

Post by **LTinker68** » Fri Feb 24, 2012 8:16 am

Dave Lee wrote:Yes, do not use position: absolute as mentioned above; use position: fixed if you don't want it to scroll.

Oops, missed that. Sorry about that.

i-tietz · Post by **i-tietz** » Fri Feb 24, 2012 8:23 am

Dave Lee wrote:Yes, do not use position: absolute as mentioned above; use position: fixed if you don't want it to scroll.

In Firefox it will still scroll without the DOCTYPE setting.

Post by **NorthEast** » Mon Feb 27, 2012 2:45 am

i-tietz wrote:
Dave Lee wrote:Yes, do not use position: absolute as mentioned above; use position: fixed if you don't want it to scroll.
In Firefox it will still scroll without the DOCTYPE setting.

I'm not sure what code/CSS you're testing, but from my tests it seems to work fine.

I tested Sam50's original code and substituted fixed for absolute; and it works fine in Firefox 10 and IE 9.
Also, I've tried it again with the DOCTYPE setting off, and it all still works fine in Firefox 10 and IE 9.

(Incidentally, I'm not sure the relevance of DOCTYPE being switched off; it isn't mentioned in the posts, and by default it is switched on.)

Anyway, I'm pretty sure it should simply just be a case of changing absolute to fixed. The non-scrolling region example in Flare's help uses fixed (http://webhelp.madcapsoftware.com/flare ... Region.htm).
Also, everything I've read about positioning says that fixed should not scroll; e.g. w3schools (http://www.w3schools.com/css/css_positioning.asp)...

w3schools wrote:Fixed Positioning
An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled:

i-tietz · Post by **i-tietz** » Mon Feb 27, 2012 3:27 am

Dave Lee wrote:Anyway, I'm pretty sure it should just be a case of changing absolute to fixed; from what I've read, position: fixed should not scroll; e.g. w3schools (http://www.w3schools.com/css/css_positioning.asp)...

That's the theory. In real life though ...
In my Firefox it scrolls without DOCTYPE - in yours it doesn't ...
As I said plenty of times before: different browsers interpret things differently and different browser versions (even builds) do so, too.
Welcome to the real world! (Quote from "Matrix")

nickatwork · Post by **nickatwork** » Mon Feb 27, 2012 4:17 am

[quote="i-tietz"]We use such a div as header and the heading (h1) of the document is inside the div. A long heading can produce a line break and the div gets higher, so I use an onload/onresize javascript that finds out what the height of that div is and sets the appropriate padding-top for the body.
[quote]

Would you mind sharing this code, I'm trying to amend the footer code that has been psoted to use in my header and breadcrumb instead to keep them at the top of the page the entire time.

Thanks!

i-tietz · Post by **i-tietz** » Mon Feb 27, 2012 5:08 am

You'll find it here: http://forums.madcapsoftware.com/viewto ... 254#p80254

But:
I wrote that code for HTML Help, means: It works for the Internet Explorer only! It's the document.all that other brwosers don't understand (comes from different DOMs = Document Object Models).
I'm pretty sure there's a way to adapt that but I'm afraid I don't have the time to do the necessary research myself.

Sam50 · Post by **Sam50** » Mon Feb 27, 2012 12:05 pm

position: fixed and an empty paragraph above the footer in the masterpage did the trick. Thank you all!

MadCap Software Forums

Vertical align footer at page bottom - WebHelp target

Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target

Re: Vertical align footer at page bottom - WebHelp target