Re: [css-d] web page help
This is the most simple and compatible one I've found so far: http://ryanfait.com/sticky-footer/ Been using it for a while with very good results. Bernardo On Tue, Jun 22, 2010 at 1:04 PM, r...@catjuggling.com wrote: I would do a google search for sticky footer. It's a technique that keeps the footer always at the bottom of the page. There are quite a few tutorials that show how to do it. I put the footer div into the content div as you suggested David but then the footer floated to the top. Adding more content would push it down but I do not think some of the pages will have the content to push it down. Adding positioning and bottom: 0 seemed to fix the problem. I will see what happens when I get the page content added in. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web page help
The best sticky footer solution that I have found: http://stackoverflow.com/questions/146659/how-do-i-get-a-floating-footer-to-stick-to-the-bottom-of-the-viewport-in-ie-6/147152#147152 Seems to still work in latest versions of FF, IE, Opera, Chrome, Safari.. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web page help
On Tue, Jun 22, 2010 at 9:42 AM, Bernardo Doré berd...@gmail.com wrote: This is the most simple and compatible one I've found so far: http://ryanfait.com/sticky-footer/ Been using it for a while with very good results. Bernardo Can you point to a page that demonstrates the sticky footer working? I'm not seeing it on the url given. Regards, Claude __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web page help
Can you point to a page that demonstrates the sticky footer working? I'm not seeing it on the url given. The image with the browser icons is using it on that page. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web page help
-Original Message- From: Claude Needham [mailto:gxx...@gmail.com] On Wed, Jun 23, 2010 at 11:00 AM, Climis, Tim tcli...@indiana.edu wrote: The image with the browser icons is using it on that page. When looking at http://ryanfait.com/sticky-footer/ I don't see a sticky footer. Is there a personal browser setting that could be responsible? The code on http://stackoverflow.com/questions/146659/how-do-i- get-a-floating-footer-to-stick-to-the-bottom-of-the-viewport-in-ie- 6/147152#147152 definitely shows a sticky footer. But I just don't see what I understand a sticky footer to be with the ryanfait.com page. I think the problem is in the understanding of what a sticky footer is. The sticky footer on ryanfait.com behaves as a sticky footer, as opposed to a stuck footer. If the page is shorter than the window (fits without vertical scrolling), then the footer is at the bottom of the window. If the page is longer than the window (creates vertical scroll), then the footer is at the bottom of the page. If you check out the CSS-D wiki [http://css-discuss.incutio.com/wiki/Footer_Info], the stackoverflow solution is an example of the first type of footer, while the ryanfait solution is an example of the second. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] web page help
Thank you Tom and David for the help. Putting display block on the header image took care of the white borders. I still have a negative margin on the header ul but it works in IE6 8 and FF 3.63. I put the footer div into the content div as you suggested David but then the footer floated to the top. Adding more content would push it down but I do not think some of the pages will have the content to push it down. Adding positioning and bottom: 0 seemed to fix the problem. I will see what happens when I get the page content added in. Again thanks so much for all the help. If anyone has time to check the page in other browsers it would be greatly appreciated. http://www.tristateadvantage.com/woolynpurses/index.html http://www.tristateadvantage.com/woolynpurses/woolynstyles.css Kris J __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web page help
I would do a google search for sticky footer. It's a technique that keeps the footer always at the bottom of the page. There are quite a few tutorials that show how to do it. I put the footer div into the content div as you suggested David but then the footer floated to the top. Adding more content would push it down but I do not think some of the pages will have the content to push it down. Adding positioning and bottom: 0 seemed to fix the problem. I will see what happens when I get the page content added in. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web page help
TriState Advantage, Kris Jacobson wrote:
I still have a negative margin on the header ul but it works in IE6 8 and
FF 3.63.
I put the footer div into the content div as you suggested David but then the
footer floated to the top. Adding more content would push it down but I do
not think some of the pages will have the content to push it down. Adding
positioning and bottom: 0 seemed to fix the problem.
On pages with short content you might consider assigning a body id and
padding-top on the footer for them?
markup
body id=short
css
body#short #footer {padding-top: whatever px you want;}
I will see what happens when I get the page content added in.
Again thanks so much for all the help. If anyone has time to check the page
in other browsers it would be greatly appreciated.
http://www.tristateadvantage.com/woolynpurses/index.html
Kris J
Everything may work out fine for you just the way you have it. But, it
is always advantageous to keep in mind that not everyone in the universe
is a clone of you and that stress testing early-on in Web design is
important.
I am not able to check it in any version of IE at the moment.
You may want to check your page yourself in IE 6/7/8 at text-size
largest.
Below is a screen-capture at +3 font-scaling in
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.2.3)
Gecko/20100401 Firefox/3.6.3
http://chelseacreekstudio.com/ca/cssd/tsa.png
Best,
~d
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web page help
You could also add a min-height to the content wrap to define a minimum page
height. Sticky copters always seemed more trouble them their worth.
Sent from my iPod
On Jun 22, 2010, at 1:36 PM, David Laakso da...@chelseacreekstudio.com wrote:
TriState Advantage, Kris Jacobson wrote:
I still have a negative margin on the header ul but it works in IE6 8 and
FF 3.63.
I put the footer div into the content div as you suggested David but then
the footer floated to the top. Adding more content would push it down but I
do not think some of the pages will have the content to push it down. Adding
positioning and bottom: 0 seemed to fix the problem.
On pages with short content you might consider assigning a body id and
padding-top on the footer for them?
markup
body id=short
css
body#short #footer {padding-top: whatever px you want;}
I will see what happens when I get the page content added in.
Again thanks so much for all the help. If anyone has time to check the page
in other browsers it would be greatly appreciated.
http://www.tristateadvantage.com/woolynpurses/index.html
Kris J
Everything may work out fine for you just the way you have it. But, it
is always advantageous to keep in mind that not everyone in the universe
is a clone of you and that stress testing early-on in Web design is
important.
I am not able to check it in any version of IE at the moment.
You may want to check your page yourself in IE 6/7/8 at text-size
largest.
Below is a screen-capture at +3 font-scaling in
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.2.3)
Gecko/20100401 Firefox/3.6.3
http://chelseacreekstudio.com/ca/cssd/tsa.png
Best,
~d
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web page help
TriState Advantage, Kris Jacobson wrote: It looks OK in FF but I have some issues in IE6 8 and I need to have it supported in IE. In IE there is a white border on both sides of the header. I also have a problem with the footer. Any suggestions for improving my CSS would be welcome as I think I might have a case of div-itious but for the most part it seems to work. http://www.tristateadvantage.com/woolynpurses/index.html http://www.tristateadvantage.com/woolynpurses/woolynstyles.css Kris J Kris, Since no one else has replied, I will take a pass at it. I am a little reluctant to do so because of a technical issue on this end [techno moron hereabout] -- this issue has nothing to do with your page. It simply prevents me from viewing any page, in any version of IE, at the moment. on a Mac or PC. With that in mind, report unresolved or continuing problems in IE to the list. Extensive revision of the CSS and markup. And more might be done with or to it... Cursory checked in Camino, Safari, WebKit, Opera, and Safari. As mentioned above /not/ checked in any version of IE. Please see: markup http://chelseacreekstudio.com/ca/cssd/kris.htm css http://chelseacreekstudio.com/ca/cssd/kris_files/woolynst.css HTH. Best, and good luck... ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] web page help
Thanks to everyone that has helped me I have done this web page with out a table in site. It looks OK in FF but I have some issues in IE6 8 and I need to have it supported in IE. I did validate both the page and the CSS and that is good to go. In IE there is a white border on both sides of the header. I have both the header container and the image at 100%. Tried changing them both to 800px, (the size of the page) but did not help. Border and padding are set to 0 in both so I can't think what is causing it. I also have a problem with the footer. The container div is at 100% to push the footer down but then to push the footer up to the bottom of the page in FF I had to do a negative margin. This looks OK in FF even though the footer is below the fold of the page. I have yet to add all the content to the page so that may not matter. The problem in IE is that I have a really wide bottom below the graphics even thought the footer is set to 65px height. I suspect there is a better way to handle this. Any suggestions would be appreciated. Any suggestions for improving my CSS would be welcome as I think I might have a case of div-itious but for the most part it seems to work. http://www.tristateadvantage.com/woolynpurses/index.html http://www.tristateadvantage.com/woolynpurses/woolynstyles.css Kris J __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web page help
Let us solve one problem at a time:
1) To solve your image problem, I suggest enter the following code in your css
file:
#header img {
display: block;
border: 0;
}
Let us know if this solved the problem. Then we should try to fix your footer
problem.
hth
--- On Thu, 17/6/10, TriState Advantage, Kris Jacobson
k...@tristateadvantage.com wrote:
In IE there is a white border on both sides of the header.
I have both the header container and the image at 100%.
Tried changing them both to 800px, (the size of the page)
but did not help. Border and padding are set to 0 in both so
I can't think what is causing it.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web page help
TriState Advantage, Kris Jacobson wrote: Any suggestions would be appreciated. Any suggestions for improving my CSS would be welcome as I think I might have a case of div-itious but for the most part it seems to work. http://www.tristateadvantage.com/woolynpurses/index.html http://www.tristateadvantage.com/woolynpurses/woolynstyles.css Kris J Some very talented folk will guide you. Relax. Let them let help you make it happen. Best, ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
