Jump to content

Problem with a relative postion footer


Shadowing
 Share

Recommended Posts

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>

footer.jpg

Edited by Shadowing
Link to comment
Share on other sites

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

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

Edited by Shadowing
Link to comment
Share on other sites

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>

footer2.jpg

Edited by Shadowing
Link to comment
Share on other sites

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

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 :)

Edited by Shadowing
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...