Member Avatar for 3825

Hi, I am working with a friend on a small pilot website and am having difficulty making the footer stay put. Any help is appreciated. Thank you!

Another problem is in the logo. Apparently, it is not ok to put <H1> tags inside <a> tags. I want the whole div to be a link. How do I solve this without removing the <h1> tags in the div?

Edited by 3825 because: n/a
  • 4 Contributors
  • 14 Replies
  • 413 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by 3825

Dani AI

Generated

Quick diagnosis and a modern, robust fix for the footer problem: pages with little or no main content won’t push a normal-flow footer to the bottom, so it looks “up in the page” on some files. The cleanest, future-proof solution is the Flexbox sticky-footer pattern: make the page a vertical flex container, let the main content grow, and let the footer sit after it. This avoids hard-coded heights and works when content grows or shrinks.

html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }   /* main expands to push footer down */
footer { flex-shrink: 0; } /* footer keeps its height */

A tested explanation and demo of this approach is available. Flexbox is widely supported in modern browsers, so it is a safe go-to for this layout problem. (philipwalton.github.io)

About the logo/link and semantics: HTML5 permits anchors to wrap flow (including block) content, but older doctypes do not. For widest compatibility and best accessibility there are two solid options: keep an inline link inside the heading, or make the anchor itself the clickable block and provide readable text for screen readers. Example (anchor-as-block, accessible text hidden visually):

<a class="logo" href="/" aria-label="ProofSeeker home">
  <span class="sr-only">ProofSeeker</span>
</a>
.logo { display:inline-block; width:220px; height:100px;
        background: url('logo.png') center/contain no-repeat; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
           overflow:hidden; clip:rect(0 0 0 0); border:0; white-space:nowrap; }

The anchor’s content model and background shorthand behavior are documented in the HTML/CSS specs. (developer.mozilla.org)

Tie-back to earlier advice: was right to avoid rigid page heights — prefer min-height or a flex layout instead of fixed px heights; ’s position:fixed will pin the footer to the viewport (useful for an always-visible bar, but not for a footer that should be pushed down by content); ’s suggestion points to the right idea — put the background on the anchor or use a real image inside the link rather than expecting a CSS background on a non-clickable element to behave like a link. Quick checklist: set html/body margin:0, test pages with minimal content, inspect computed heights in DevTools, and avoid floats that aren’t cleared (or use flexbox to sidestep float issues).

Recommended Answers

All 14 Replies

Member Avatar for Kraai

Hi

In IE7, FF and Chrome, your footer is at the bottom. So to me it seems ok.

As for linking your logo, I can help you with.

You nees to link it in your style sheet, where it says

background: url("h1.png") no-repeat scroll left top transparent;
float: left;
height: 99px;
margin-top: 10px;
width: 219px;

There you can ad this

background-image:url(http://yourlink.com);

Hope this helps

commented: utter bull, url is the url of the image -1
Member Avatar for Arkinder

For your numbered list to display correctly in Chrome, increase the height of your quickSummary bar. This will keep the list pushed to the right. <a href="#"><h1>proofseeker</h1></a> is not aloud, but <h1><a href="#">proofseeker</a></h1> is.

Your footer displays consistently in Firefox, Safari, Chrome, and Opera. Could you describe the problem, what browser it's occurring in, and/or provide a screen shot of the problem?


Regards, Arkinder

Member Avatar for 3825

It works for default.htm but it is messed up in all other pages. I am stumped.

, I thought background-image: url( is how I link to the background image. I did as you said and now the logo vanished. What could I be doing wrong?

http://proofseeker.comxa.com/

Member Avatar for Arkinder

It's moving around because you have no content to push it down. Give your container division a set height (px, em, etc.)

Or you can give your footer division a margin-top.

Regards, Arkinder

Member Avatar for Kraai

You had this to display the image.

background: url("h1.png") no-repeat scroll left top transparent;

You ad this to link the image:

background-image:url(http://yourlink.com);

Ps. I see your site on your last post linked is off.

Member Avatar for 3825

, should I then give a fixed height for container in px? or can it be in percentage?

, I just saw that myself. Apparently, they are checking my site for malicious content. Guess I need to dump the site to dropbox again.

Member Avatar for Arkinder

Percentage just depends. If you want the height to be dynamic use em.

Edited by Arkinder because: n/a
Member Avatar for almostbob

to stay put

#footer { height: 150px;margin-top: 0px;margin-bottom: 0;text-align: right;clear: both;	background-repeat:no-repeat;background-image: url('bg_body_2.jpg');background-repeat: no-repeat;	}

could include instructions to keep it fixed and at the bottom of the page

#footer { height:150px;margin-top:0;margin-bottom:0;text-align:right;clear: both;background-repeat:no-repeat;background-image:url('bg_body_2.jpg');bottom:0;position:fixed;}

zero px is not valid in css, you missed one at 'margin-top' in your cleanup.

Production code is not indented or formatted, whitespace is useful for those developers who have not discovered code highlighting editors yet, but useless in production code it just adds extra download time, often 40-50% of html css js files is whitespace, that the browser doesnt need

Edited by almostbob because: n/a
Member Avatar for almostbob

You had this to display the image.

background: url("h1.png") no-repeat scroll left top transparent;

You ad this to link the image:

background-image:url(http://yourlink.com);

Ps. I see your site on your last post linked is off.

Please ignore this BS
background is a shorthand entry for all the separate css properties applicable to background, and does NOT link the image
body {background:#ffffff url('img_tree.png') no-repeat right top;}

Edited by almostbob because: n/a
Member Avatar for Arkinder

How classy of you.

This isn't production code, and there are compression programs available to remove whitespace. Readability is important for debugging, scanning, and reading in general. This is a forum, and considering that we read 30% slower on a computer, I'd rather not waste my time reading tag/selector soup for a disregarded end tag or forgotten semicolon. Whitespace does not belong in the final produced code, but it has its place in web design.

You've only been on this forum for a year, but just in case you forgot, here's a little reminder.

Regards, Arkinder

Member Avatar for Kraai

Please ignore this BS
background is a shorthand entry for all the separate css properties applicable to background, and does NOT link the image
body {background:#ffffff url('img_tree.png') no-repeat right top;}

And yet, we fail to provide the correct solution to link a background image to be clickable?

To the original poster:

Please see this solution to make the background image clickable via CSS, and hope this helps you.

Member Avatar for 3825

I am still learning and don't understand em all too well. I am experimenting and learning as I go.

Thank you for your help. I was not going for the footer look but then I realized this forum was doing pretty much the same thing with the purple bar at the bottom. Thanks. +1

Member Avatar for Arkinder

Basically the bottom line is, to be able to have your pages without content display the same as your pages with content, you're going to have to do something like this.

Regards, Arkinder

Member Avatar for 3825

that looks good. I will read into it. I am learning a lot from this thread (:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.