Shadowing Posted March 6, 2012 Share Posted March 6, 2012 Been reading guides all nite and cant seem to get my footer to move down where the page content keeps forcing the footer to move down. so when you scroll down the footer is at the bottom of the page. :)This is what i got so far. really hoping someone can help me out this is driving me crazy, I posted a picture that shows what im trying to do "the white box is the footer". #wrap {position:relative;width: 950px;min-height:100%;margin: 0 auto;border:2px solid black;} #footer {height:80px;width:950px;border:2px solid white;position:relative;margin-bottom:-52px;clear:both;} <body> <div id="wrap"> CONTENT.... all my div content is absolute position with in this wrapper. so the content always stays centered. </div> <div id="footer"> <table width="85" align="center" > <tr> <td>This is the Footer</td> </tr> </table></div></body></html> Link to comment Share on other sites More sharing options...
Don E Posted March 6, 2012 Share Posted March 6, 2012 Based on the code you provided, when you use percent for min-height, it will only expand based on the content inside of the element or/and if you set it to position: absolute;http://reference.sitepoint.com/css/min-height (scroll down to 'values') Link to comment Share on other sites More sharing options...
dsonesuk Posted March 6, 2012 Share Posted March 6, 2012 Never, EVER! use position absolute to centre content, as the height of this element is undistinguishable from other element as it is invisible to them, set the width of content and use margin: 0 auto; then the problem should go away. Link to comment Share on other sites More sharing options...
Shadowing Posted March 6, 2012 Author Share Posted March 6, 2012 Thanks for the responces guys, i'll try what you guys mentioned, if i shouldnt use absolute position to keep the content of the page always centered. how else can I do that? what I mean by center is when you increase the width of the screen past 950px the whole page will always stay center.. making all the divs with in my wrapper absolute was the only way i could make the content move with the wrapper Link to comment Share on other sites More sharing options...
Shadowing Posted March 6, 2012 Author Share Posted March 6, 2012 thats wierd i put all the center content as relative now with in the wrapper and no problems. it all moves with the wrapper. I must of not tried that lol. One issue with using relative that I noticed though is that when i change from absolute to relative all the content moves down like 100px. whats the reason for that? Its like the position for relative starts at a differant 0 px then absolute Link to comment Share on other sites More sharing options...
Shadowing Posted March 6, 2012 Author Share Posted March 6, 2012 I notice with me using relative i have to use negitive top px to put two things side by side of each other. All my pages has differant lenght of content "top to bottom. So im wanting ot make a footer where i have one setting where the footer will be at the bottom. I took another picture where im at now. I tried to apply what you guys were saying. Notice the change planet name form in the picture. right now that form is sitting at left:300px; and top:0px;. If change that to say top 60px it wont force the footer to go down. the footer will over lap the form. I'm using IE8 and im using the Doctype at the top #wrap {position:relative;width: 950px;margin: 0 auto;border:2px solid black;} div.content {margin: 0 auto; position:relative;left:300px;top:40px;width:300px;background-color:transparent;} #footer {margin: 0 auto;height:80px;width:950px;border:2px solid white;position:relative;} <body> <div id="wrap"> <div class="content"></div> </div> <div id="footer"> <table width="85" align="center" > <tr> <td>This is the Footer</td> </tr> </table></div> </body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted March 6, 2012 Share Posted March 6, 2012 NO position should be required with below #wrap {/*position:relative; not required */width: 950px;margin: 0 auto;border:2px solid black;} div.content {margin: 0 auto; /*position:relative; not required *//*left:300px; not required *//*top:40px; not required */width:300px;background-color:transparent;} #footer {margin: 0 auto;height:80px;width:950px;border:2px solid white;/*position:relative; not required */} you have centred content, and the footer will always be below the content div, whatever height the content is within it Link to comment Share on other sites More sharing options...
Shadowing Posted March 6, 2012 Author Share Posted March 6, 2012 OMG thank you dsonesuk!wow my whole entire idea of how to do this was so far off. and thats amazing how it auto centers it for me. Link to comment Share on other sites More sharing options...
Shadowing Posted March 6, 2012 Author Share Posted March 6, 2012 One more problem though how do I put the arrows left and right on this map using this idea. picture below Link to comment Share on other sites More sharing options...
dsonesuk Posted March 6, 2012 Share Posted March 6, 2012 Are they just images at a fixed position? or have some click functionality? Link to comment Share on other sites More sharing options...
Shadowing Posted March 6, 2012 Author Share Posted March 6, 2012 I think my real question is with using this new method. how do I move things left or right on the screen? right now my advertisments and menu is being floated left or right. but i notice that if i use two float for left it will not let them over lap. Link to comment Share on other sites More sharing options...
Shadowing Posted March 6, 2012 Author Share Posted March 6, 2012 when you click on a arrow it makes the screen refresh to a new area of the map. so if im on sector x2 y3 then clicking on the left arrow would refresh the screen and put me on x1 y3. but yah they are a clickable image that i was using absolute position for Link to comment Share on other sites More sharing options...
Shadowing Posted March 6, 2012 Author Share Posted March 6, 2012 here is another left and right situation I have right now im floating the registration to the right. If i try to float the log in to the right it wont clip and go on top of the registration.is this done with margins or something? Link to comment Share on other sites More sharing options...
dsonesuk Posted March 6, 2012 Share Posted March 6, 2012 One more problem though how do I put the arrows left and right on this map using this idea. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">#wrapper {width:730px; margin:0 auto;}#top {height:32px; background-color:#FF0033;}#main_wrap {background-color:#FF9966;}#left {width: 140px; float:left; background-color:#FF9966}#content { margin-left: 140px; background-color:#FFCC00}#map, #left, #map_left_nav, #map_right_nav {height: 400px;}#map {width:590px; background-color:#333333;}#map_top_nav, #map_bottom_nav {height: 20px; background-color:#009933;}#map_left_nav, #map_right_nav {width:20px; background-color:#0033FF;}#map_left_nav {float: left;}#map_right_nav {float: right;}#map_top_nav a, #map_bottom_nav a, #map_left_nav a, #map_right_nav a { display: block; height:20px; width: 20px; background-color:#CCFF99;}#map_top_nav a, #map_bottom_nav a {margin:0 auto;}#map_left_nav a, #map_right_nav a {margin-top:190px;}#sector {float:right; margin-right: 20px;}</style></head><body><div id="wrapper"><div id="main_wrap"><div id="left"></div><div id="content"><div id="top"></div><div id="map_wrapper"><div id="map_top_nav"> <a href="#"></a></div><div id="map_left_nav"><a href="#"></a></div><div id="map_right_nav"><a href="#"></a></div><div id="map"></div><div id="map_bottom_nav"><div id="sector">Sector whatever</div><a href="#"></a> </div></div></div></div></div></body></html> right now im floating the registration to the right. If i try to float the log in to the right it wont clip and go on top of the registration.is this done with margins or something? ??? They would only overlap if position absolute is used. Is the login supposed to be the same layout as registration and stack above each other? they should all be place in a right container, whose width should force them to stack, maybe try to insert a element with clear:both, this should prevent top areas of register content merging with login inputs. Link to comment Share on other sites More sharing options...
Shadowing Posted March 6, 2012 Author Share Posted March 6, 2012 oh yah good point lol. I didnt think about just making one container lol. my bad. Thanks alot for that map example. Will give it a go. But really seriously thanks for taking the time out for your replies. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.