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!
https://dl.dropbox.com/u/10563012/fall2010/Expression/psThreeA/default.htm
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?
Jump to PostFor your numbered list to display correctly in Chrome, increase the height of your
quickSummarybar. 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, …
Jump to PostIt's moving around because you have no content to push it down. Give your
containerdivision a set height (px, em, etc.)Or you can give your
footerdivision a margin-top.Regards, Arkinder
Jump to PostHow 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 …
Jump to PostPlease 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 …
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
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
It works for default.htm but it is messed up in all other pages. I am stumped.
@kraai, 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?
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
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.
@arkinder, should I then give a fixed height for container in px? or can it be in percentage?
@kraai, I just saw that myself. Apparently, they are checking my site for malicious content. Guess I need to dump the site to dropbox again.
Percentage just depends. If you want the height to be dynamic use em.
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
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;}
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
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.
@Arkinder I am still learning and don't understand em all too well. I am experimenting and learning as I go.
@almostbob 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
@Arkinder that looks good. I will read into it. I am learning a lot from this thread (:
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.