Jump to content

CSS & HTML Situation

killah

By killah
in HTML Help

 Share

Recommended Posts

killah Member

killah

Posted
Posted

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
TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

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
killah Member

killah

Posted
  • Author
Posted

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
killah Member

killah

Posted
  • Author
Posted

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
dropfaith Advanced Member

dropfaith

Posted
Posted

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
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.