es131245 Posted November 22, 2013 Share Posted November 22, 2013 (edited) Code looks like <body> <a>nav 1</a> <a>nav 2</a> <a>nav 3</a> <h1>header</h1> <p>content</p> <p>content 2</a> <a>content 3</a> <a id="copyright">©r</a></body> How to stick #copyright to the bottom of the page, after content, with bottom:0 without changing any HTML? Edited November 22, 2013 by es131245 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 22, 2013 Share Posted November 22, 2013 1) it would not validate. 2) if you use positioning as you seem to want by suggesting bottom:0, which would be fixed or absolute, using these means your content will be overlapped, and fixed will be permantly at the bottom of browser window, and not scroll with content. Link to comment Share on other sites More sharing options...
es131245 Posted November 22, 2013 Author Share Posted November 22, 2013 1) Why it will not validate? 2) Thats the point, I nead to find a way to make it relavite and fiix it to the bottom. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 23, 2013 Share Posted November 23, 2013 1) look at code, misplaced start/end tags, and validation will fail depending on doctype used 2) try giving the body the same bottom padding as footer height, use position: absolute; left:0; right:0; bottom:0;, the padding should prevent overlap occurring, you also need html, body height at 100%; Link to comment Share on other sites More sharing options...
es131245 Posted November 23, 2013 Author Share Posted November 23, 2013 1) Thx, misprint in example. Site is fine, html valid. 2) Tried. Footer apear at the bottom border of window on load, even when text continue down. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 23, 2013 Share Posted November 23, 2013 1) should have experimented 2) then you might have come with the correct solution 3) <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> body, html {min-height: 100%; background-color: yellow;} body {width: 960px; margin:0 auto 100px;} html {position: relative;} #copyright{position:absolute; left: 0; right: 0; height: 100px; bottom: 0; background-color: lime;} </style></head><body> <a>nav 1</a> <a>nav 2</a> <a>nav 3</a> <h1>header</h1> <p>content </p> <a>content 2</a> <a>content 3</a> <a id="copyright">©r</a></body></html> 4) instead of getting someone to do it for you Link to comment Share on other sites More sharing options...
es131245 Posted November 24, 2013 Author Share Posted November 24, 2013 Wow... applause from me Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now