Does anyone know how I can get my footer to stay on the bottom of the window? It currently floats up to whatever is above it. http://artsatheart.atwebpages.com/
When you say "stay at the bottom" -- do you mean always at the bottom even if it overlaps the content (which is what position:fixed would do), or stays below the content at all times but at the bottom of the browser window when the window is too tall for the content -- the latter is called a min-height layout... To do that, you set HTML and BODY to height:100%; and a wrapper around everything but the footer to min-height:100%... you then pad the bottom of the last element in that wrapper equal to the footer height, then use a negative margin-top on the footer to ride it up over the 100% min-height area. On that site... hmm, kinda tough with the confusing markup and extra DIV for nothing, inaccessible min-width, annoying image banner area with massive bloated scripting for nothing, total lack of anything resembling content, etc, etc... I guess the first step would be to clean out the markup, dragging it kicking and screaming into THIS century. I mean... what makes the copyright part of the choices in the footer? What makes what should be the page heading part of the menu list? What's with the clearing DIV like it's 1997? (though even the doctype says it -- in transition from 1997 to 1998 coding practices), fictional made up attributes (DATA-SRC? don't you just LOVE jquery coders -- NOT!) If I was working on the same page, the markup would go something like this... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <link rel="shortcut icon" href="images/favicon.ico" /> <title> The Arts at Heart </title> </head><body> <div id="pageWrapper"> <h1> The Arts at Heart <span><!-- image replacement sandbag --></span> </h1> <ul id="mainMenu"> <li><a href="index.php">Home</a></li> <li><a href="about.php">About Me</a></li> <li><a href="/">Galleries</a></li> <li><a href="contact.php">Contact Me</a></li> </ul> <div id="bannerRotate"> <img src="images/homepage/everafter.jpg" alt="Married couple on the Beach" /> <img src="images/homepage/burstofcolor.jpg" alt="Colorful Flower" /> <img src="images/homepage/ido.jpg" alt="Couple holding hands during marriage Ceremony" /> <!-- #bannerRotate --></div> <!-- some meaningful content here wouldn't hurt! --> <!-- #pageWrapper --></div> <div id="footer"> <ul> <li><a href="index.php">Home</a></li> <li><a href="about.php">About Me</a></li> <li><a href="http://www.youtube.com/user/MissMaris129">YouTube Channel</a></li> <li><a href="contact.php">Contact Me</a></li> </ul> © 2012 Arts at Heart <!-- #footer --></div> </body></html> Code (markup): Gimme a while and I'll toss together some CSS and a custom replacement for that fat bloated painful image script... be a bit less functional, but at least it would gracefully degrade and not suck down 280k of javascript for no good reason. When you have more scripting than you do image filesizes when showing said images full screen width, there's something WRONG.
Here's what I came up with -- total rewrite of the main page: http://www.cutcodedown.com/for_others/tksForLife/template.html Directory is open for easy access to the gooey bits: http://www.cutcodedown.com/for_others/tksForLife/ The script isn't quite as fancy, but it's reliable enough -- and at only 4.9k it's a VAST performance improvement. Turned it into a responsive layout while at it, added the footer fixed to the bottom when screen is too high, but is pushed off screen when too short. Not counting the massive images in the rotator, we're talking about gutting it down from 369k in 13 files, to just 17k in 5 files. I also remastered the logo -- word of advice, try not to use alpha transparency .png on deployment or images larger than you're actually going to show when building sites. Browser image resizing is... well, it's a dog. The CSS3 bits don't work in IE8/earlier, and some stuff even 9 falls flat on -- OH WELL, they don't get rounded corners and goofy fade effects on the controls... It's called graceful degradation, and it's not worth the time or effort to make it 100% perfect for the 11% and dropping of folks who refuse to join us in THIS century. So long as the page is still functional/usable, that's where I draw the line on 'old' IE versions. Usually when I do these types of rewrites I give a section by section breakdown of the code -- I'm out for most of the day, but I'll try to revisit this and provide the full code explanation.