Jump to content

CSS & HTML Situation


killah

Recommended Posts

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
Share on other sites

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
Share on other sites

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
Share on other sites

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
Share on other sites

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
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.