killah Posted February 22, 2009 Share Posted February 22, 2009 Ok i have got 5 div's on my page and 1 span. 5 divs: content => user stats banner main menu body text 1 span: Footer => footer content Ok, my problem is that i made footer an "id" so i am using "<span id="footer">", how ever, my footer overlap's half of my body text if my body text starts scrolling down. I looked up the float: bottom but seem's it does not exist. Any idea's? Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/ Share on other sites More sharing options...
jackpf Posted February 22, 2009 Share Posted February 22, 2009 To my knowledge, the only way you can make a footer move with the height of the page is if you make it relative. Is it currently absolute? Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768232 Share on other sites More sharing options...
killah Posted February 22, 2009 Author Share Posted February 22, 2009 I added position: absolute; but it seem's to just stay to the height of the content div. But the content div height does not add more height according to the body content. Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768580 Share on other sites More sharing options...
TheFilmGod Posted February 22, 2009 Share Posted February 22, 2009 Ok i have got 5 div's on my page and 1 span. 5 divs: content => user stats banner main menu body text 1 span: Footer => footer content Ok, my problem is that i made footer an "id" so i am using "<span id="footer">", how ever, my footer overlap's half of my body text if my body text starts scrolling down. I looked up the float: bottom but seem's it does not exist. Any idea's? <span> is an inline text tag. It is no suprise then that it overlaps your text. Make the footer a div, or a <p>, since these tags are considered blocks. This should fix the issue. Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768591 Share on other sites More sharing options...
Goafer Posted February 22, 2009 Share Posted February 22, 2009 Just another idea, if you contain your page in a <div id="container"> or similar and set the css: #container { height: auto; } Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768603 Share on other sites More sharing options...
killah Posted February 22, 2009 Author Share Posted February 22, 2009 the height: auto; worked. But now it is alway's under the last div which is my body content. And my body content alway's vary's. Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768612 Share on other sites More sharing options...
Goafer Posted February 22, 2009 Share Posted February 22, 2009 not sure I follow you, don't you want the footer to be under the body content? Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768657 Share on other sites More sharing options...
killah Posted February 22, 2009 Author Share Posted February 22, 2009 yes. but this is how it's overlapping now +----------------------------------------------------+ | u.stats | banner + +----------------------------------------------------+ | M | B + | E | O + | N | D + | U | Y + | over | lapping footer + |---------| CONTENT + +----------------------------------------------------+ | this is where footer supposed to be + +----------------------------------------------------+ Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768773 Share on other sites More sharing options...
jackpf Posted February 22, 2009 Share Posted February 22, 2009 And you've given it a relative position? Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768776 Share on other sites More sharing options...
killah Posted February 23, 2009 Author Share Posted February 23, 2009 If i put absolute then it is ontop of page over lapping banner and u.stats Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768841 Share on other sites More sharing options...
haku Posted February 23, 2009 Share Posted February 23, 2009 Give us a link, or more code. There are various reasons for your problem. Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768861 Share on other sites More sharing options...
TheFilmGod Posted February 23, 2009 Share Posted February 23, 2009 You forgot to clear your floats! ADD this: <div style="clear: both;"></div> Right before you footer. It should work now. Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768872 Share on other sites More sharing options...
killah Posted February 23, 2009 Author Share Posted February 23, 2009 I already had the clear: both; on my css. www.deadlykillah.com/explore.php It will take you to the login page. Use this: username: HD password: DK_Owner Game is not open yet so i don't mind letting anyone use my account for now to see the problem. But a good example is on the explore.php page. Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768898 Share on other sites More sharing options...
dropfaith Posted February 23, 2009 Share Posted February 23, 2009 okay i didnt put alot of work into this but i think i got it i removed alot of the margin stuff you were using to move things around and set it up so it floats the user stats and manmenu left the banner and content to the right. based on the picture i saw of your goal and the site i kinda just tweaked it to what it seemed you were after css is all in the file becuase i was too lazy to create two files for testing and linlk them up <!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> <title>.:: Deadly - Killah::. | Re Development | - For your enjoy!</title> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" /> <meta name="description" content="Deadly Killah - A online game for your joy!" /> <meta name="keywords" content="RPG, FREE, free, rpg, online rpg, text based game, mmorpg, text games, action games, pbbg, pbbgs, PHP, MySQL, gaming"/> <meta name="author" content="DK Network Owner - Kyle Mulder" /> <meta name="copyright" content="DK Network Owner - Kyle Mulder" /> <meta name="revisit-after" content="2 days" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="images/styles/game.css" type="text/css"> <script language="javascript"> <!-- function logout() { var logout = confirm("Are you sure you want to logout?"); if(logout) { window.location = "/?y=logout"; } else { window.location = ""; } } //--> </script> <script type="text/javascript" src="/scripts/tabs.js"></script> <style> body { background: #585858; margin: 0px; padding: 0px; font-family: Lucida Sans Unicode; font-size: 11px; color: #C0C0C0; } #content {width:950px; background: #585858; margin: 0px; padding: 0px; font-family: Lucida Sans Unicode; font-size: 11px; color: #C0C0C0; height: auto; } #user_stats { background: #585858; border: 1px black solid; float:left; width: 140px; height: 180px; } #banner { background: #585858; border: 1px black solid; float:right; width: 800px; height: 150px; } #mainmenu { margin-top: 12px; background: #585858; border: 1px black solid; margin-right: 0px;float:left; margin-bottom: 0px; width: 140px;clear:left; height: 340px; } #voting_donating { background: #585858; border: none; border-top: 1px black solid; text-align:center; width: 800px; } #body_text { background: #585858; border: none; margin-top: 0px; margin-right: 0px;float:right; margin-bottom: 0px;text-align:left; width: 800px; } #footer { background: url('http://www.deadlykillah.com/layout/images/footer.png'); background-repeat: repeat-x; text-align: center; width: 100%; height: 26px; } #clear {clear:both;} img { border: none; } a:active,a:link,a:visited,a:hover { color: #C0C0C0; font-family: Lucida Sans Unicode; font-size: 11px; } </style> </head> <body> <div id="content"> <div id="user_stats"> Name [iD]<br> Level: 1<br> Money: $5,980<br> Diamonds: 776<br><br> Energy: Energy bar<br> Will: Will Bar<br> Health: Health Bar<br> Brave: Brave Bar<br> EXP: EXP Bar<br> </div> <div id="banner"> <img src="http://www.deadlykillah.com/layout/images/DKHeader.jpg" alt="DK Banner" /> </div> <div id="mainmenu"> link<br> link<br> link<br> link<br> link<br> link<br> link<br> link<br> link<br> link<br> link<br> link<br> link<br> link<br> link<br> link<br> link<br> </div> <div id="voting_donating"> <img src="http://www.deadlykillah.com/layout/images/donatenow.png" class="btn_hover" alt="Donate Now" /> <img src="http://www.deadlykillah.com/layout/images/votenow.png" class="btn_hover" alt="Vote Now" /> </div> <div id="body_text"> <h2>Hospital</h2> <table class="table" width="95%" height="100%" cellspacing="0" cellpadding="0"> <tr> <th width="10%">User</th> <th width="10%">Level</th> <th width="10%">Time</th> <th width="60">Reason</th> </tr> <tr> <td colspan="5"> No user's currently in hospital. </td> </tr> </table> </div> <div id="clear"></div> <div id="footer">CopyRight © 2009 - 2010. All right's reserved @ .:: Deadly - Killah::. | Re Development |. Pyth0n.</div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/146320-css-html-situation/#findComment-768958 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.