Jump to content

help please..

brown2005

By brown2005
in CSS Help

Recommended Posts

brown2005 Advanced Member

brown2005

Posted
  • Author
Posted

#main{

background: #EAEAEA;

padding: 10px;

}

 

i have that, which is the grey area on the site above that contains the stuff i want.

 

if i add say

 

height: 500px;

 

the site looks fine on the different browsers. but obviously i want it the height of the bottom box..... as it is appearing in internet explorer.

Link to comment
https://forums.phpfreaks.com/topic/69750-help-please/#findComment-350486
Share on other sites
dbrimlow Member

dbrimlow

Posted
Posted

It works when I try it.

 

The footer now slides below the boxes in FF 2.06 and it looks the same in IE 6.0.

 

Here is the sample code I used:

 

<!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=iso-8859-1" /><title>fantasy-comps.com - The worlds biggest fantasy games site.</title>
<style type="text/css">
/* CLEAR */

	*
	{

		margin: 0px;
		padding: 0px;

	}

/* BODY */

	body
	{

		background: #ffffff;

		margin: 0px;
		padding: 0px 15px 15px 15px;

	}	
	/* FOOTER */



	#footer 

	{
clear:both;
		margin: 0 auto;

		background-color: #c00;

		border-bottom: 5px solid #730101;

		height: 20px;

		padding: 7px 10px 0px 10px;

		color: #ffffff;



	}



/* FOOTER-LOGO */



	#footer-logo

	{



		float: left;



		width: 400px;



		font-family: Arial;

		font-size: 11px;

		font-weight: bold;



		color: #ffffff;			



	}



/* FOOTER-INFORMATION */



	#footer-information ul

	{



		font-family: Arial;

		font-size: 11px;



		position: relative;

		float: right;



	}



	#footer-information li 

	{	



		display: inline;

		position: relative;



	}



	#footer-information li a 

	{



		color: #e9e9e9;

		text-decoration: none;



	}



	#footer-information li a:hover

	{



		color: #fff;

		text-decoration: underline;



	}		
	/* HEADER */



	#header

	{



		height: 70px;



		padding: 10px 10px 0px 10px;



		background-image: url(http://www.fantasy-comps.com/include/images/header-background.jpg);			



	}



	#header-logo

	{



		float: left;			



	}		



	#header-banner

	{



		float: right;	}
		/* HOME LEFT */



	#home-left

	{

	  

		float: left;



		width: 730px;



		padding: 0px;

		margin: 0px;



	}



/* HOME LEFT LI */



	#home-left a:link

	{



		border: 1px solid #999999;

		background: #ffffff;



		height: 100px;

		width: 230px;



		text-align: center;



		padding: 5px 0px 5px 0px;



		float: left;



		margin-right: 10px;

		margin-bottom: 10px;			



	}



	#home-left a:visited

	{



		border: 1px solid #999999;

		background: #ffffff;



		height: 100px;

		width: 230px;



		text-align: center;



		padding: 5px 0px 5px 0px;



		float: left;



		margin-right: 10px;

		margin-bottom: 10px;			



	}		



	#home-left a:hover

	{



		border: 1px solid #999999;

		background: #FFFF00;



		height: 100px;

		width: 230px;



		text-align: center;



		padding: 5px 0px 5px 0px;



		float: left;



		margin-right: 10px;

		margin-bottom: 10px;			



	}					



/* HOME RIGHT */



	#home-right

	{



		float: right;



		border: 1px solid #999999;

		background: #ffffff;



		width: 210px;

		height: 233px;		



	}	
	/* MAIN */



	#main

	{



		background: #EAEAEA;

		padding: 10px;



		height: 100%;



	}



/* MAIN NAVIGATION */



	#main-navigation

	{



		border: 1px solid #999999;



		height: 25px;

		padding: 5px 10px 0px 10px;



		margin-bottom: 10px;			



		background: #808080;



		color: #ffffff;

		font-weight: bold;

		font-size: 11px;



	}



	#main-navigation-links

	{



		padding: 2px 0px 0px 0px;		

		float: left;



	}



	#main-navigation-links a:link

	{



		color: #ffffff;

		font-weight: bold;

		font-size: 11px;



	}	



	#main-navigation-links a:visited

	{



		color: #ffffff;

		font-weight: bold;

		font-size: 11px;



	}



	#main-navigation-links a:hover

	{



		color: #FFFF00;

		font-weight: bold;

		font-size: 11px;



	}					



	#main-navigation-select

	{



		float: right;



	}



	#main-navigation-select select

	{



		color: #999999;

		font-weight: bold;

		font-size: 11px;



	}									



/* MAIN HEADER */



	#main-header

	{



		border: 1px solid #999999;



		height: 70px;



		padding: 10px 10px 0px 10px;

		margin-bottom: 10px;			



		background: #ffffff;



	}



/* MAIN HEADER TITLE */



	#main-header-title

	{



		float: left;



		color: #FF0000;



		font-size: 50px;



	}



/* MAIN HEADER SPONSOR */



	#main-header-sponsor

	{



		float: right;



	}	



/* MAIN CONTENT */



	#main-content

	{



		width: 100%;



	}	
	#top

	{



		height: 20px;



		padding: 5px 25px 0px 25px;



		font-family: Arial;

		font-size: 11px;



		color:	#730101;



	}



/* TOP ACCOUNT */



	#top-account

	{



		float: left;



	}	



/* TOP HELP */



	#top-help

	{



		float: right;



	}	



/* TOP A */



	#top a:link

	{



		color:	#730101;



	}



	#top a:visited

	{



		color:	#730101;



	}		



	#top a:hover

	{



		color:	#999999;



	}												
	</style>
	<!--[if lt ie 7]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="ie0nly.css" />
<![endif]-->
</head><body><div id='top'><div id='top-account'>Welcome, Guest.
	   | 
 	  <a href='http://www.fantasy-comps.com/index/index.php?page=account&action=login'>Login</a>
	   | 
 	  <a href='http://www.fantasy-comps.com/index/index.php?page=account&action=register'>Register</a></div><div id='top-help'>
 	<a href='http://www.fantasy-comps.com/index/index.php?page=help'>Help</a>
 	 | 

 	<a href='http://www.fantasy-comps.com/index/index.php?page=help&action=responsible'>Responsible Gaming</a>
 	 | 
 	<a href='http://www.fantasy-comps.com/index/index.php?page=advertising&action=partners'>Partners</a>	 		 	 	
 	 | 
 	<a href='http://www.fantasy-comps.com/index/index.php?page=statistics'>Statistics</a>	 
 </div></div><div id='header'><div id='header-logo'>
	<a href='index.php?page=home'><img src='http://www.fantasy-comps.com/include/images/header.JPG' border='0' width='200' height='60'></a>	
 </div><div id='header-banner'>

	<img src='' border='0' width='468' height='60'>	
 </div></div><div id='main'><div id='main-navigation'>	<div id='main-navigation-links'>

		<a href='http://www.fantasy-comps.com/index/index.php?page=home'>HOME</a> 	</div>	<div id="main-navigation-select">

		<select>

			<option>Quick Links</option>

			<option>                                 </option>


			<option>Home</option>
			<option>Fantasy - Paid</option>
			<option>Fantasy - Free</option>								

			<option> </option>					

		</select>			

	</div></div><div id="main-header">	<div id='main-header-title'>home</div>	<div id="main-header-sponsor"><img src="" border="0" width="468" height="60"></div></div><div id="main-content"><div id='home-left'>
 	<a href='test.php'>Test1</a>

 	<a href='test.php'>Test1</a>
 	<a href='test.php'>Test1</a>
 	<a href='test.php'>Test1</a>
 	<a href='test.php'>Test1</a>	
 	<a href='test.php'>Test1</a>		 	 			 			 	 		
 </div><div id='home-right'> </div></div></div><div id='footer'><div id='footer-logo'>© Copyright 2007 - fantasy-comps.com</div><div id='footer-information'>

 	<ul>
		<li><a href=''>About Us</a></li>
		 | 
		<li><a href=''>Contact Us</a></li>
		 | 					
		<li><a href=''>Advertise</a></li>
		 | 

		<li><a href=''>Affiliates</a></li>
		 | 
		<li><a href=''>Careers</a></li>
		 | 
		<li><a href=''>Terms & Conditions</a></li>
		 | 

		<li><a href=''>Privacy Policy</a></li>										
	</ul>																				
 </div></div></body></html>

Link to comment
https://forums.phpfreaks.com/topic/69750-help-please/#findComment-350506
Share on other sites
brown2005 Advanced Member

brown2005

Posted
  • Author
Posted

#main{

background: #EAEAEA;

padding: 10px;

height: 100%;

}

 

is the grey background i am referring too... in internet explorer.. it goes directly down in a straight line from the top red bar to the bottom red bar....

 

but in firefox.. it stops just after it reaches the first test1 box..

 

 

Link to comment
https://forums.phpfreaks.com/topic/69750-help-please/#findComment-350537
Share on other sites
dbrimlow Member

dbrimlow

Posted
Posted

Okay, you must be using a high resolution LCD monitor (at least 17inch).

 

I use an old 15" crt monitor - because, a). if my site looks good on an old crt monitor it will look good on an LCD; b). I want to be sure my layouts will fit in screen ranges of 1024 x 768 to 800 x 600 screen; c). I want to accommodate the widest range of visitor, world-wide, as possible. Many people and businesses around the world still use old crt monitors.

 

As such, colors like #EEEEEE and similar, do not show up on older CRT monitors. I can't see it at all.

 

So, to understand what your problem is, I made it #666666.

 

It is a float issue. Give main a float:left and it will work.

 

In general, your layout, however, will blow up if anyone reduces their window size. It is fixed for a minimum of 940px wide. I would advise that the home left and home right use percentages instead of px. 74.5% for left 24.5% for right (you have to allow for padding and margin).

 

Just a thought.

Link to comment
https://forums.phpfreaks.com/topic/69750-help-please/#findComment-350563
Share on other sites
  • 1 month later...
brown2005 Advanced Member

brown2005

Posted
  • Author
Posted

ok thanks mate. done that and it works fine now.. the background has stretched the whole div..

 

but now i face another problem.. the bottom of the page there should be a 10px gap as i have used

 

margin-bottom: 10px;

 

this works fine on internet explorer, firefox, netscape but not opera? ne ideas please?

Link to comment
https://forums.phpfreaks.com/topic/69750-help-please/#findComment-383009
Share on other sites
dbrimlow Member

dbrimlow

Posted
Posted

Actually, it blows up in FF, too.

 

There are just WAY too many individual css files for me to event get a handle on which is what.

 

It is very important when using PHP, to FIRST get your html markup and css layout working as a general template.

 

You have syntax and markup errors for the xhtml transitional doctype. you site's validation page.

 

xhtml requires ALL lowercase. <SCRIPT> must be <script>. Also, the <form> tag cannot be embedded in a <p> tag - change p class="select" to div class="select" .

Change the mime-type charset to utf-8, and convert your & to & (and any other characters to html characters).

 

Actually, you are even better off using an HTML 4 strict DOCTYPE. Since it seems as if you are more comfortable coding with less restriction and a little more "optional" tag syntax.

 

It's easy, all you need to do is "find and replace" the free standing closing tags from "/>" to ">", and remove the language="" from your scripts.

 

I'll look at the layout, but off the bat I see you have no main container.

 

You will have to use block level tags inside your form inputs

 

Link to comment
https://forums.phpfreaks.com/topic/69750-help-please/#findComment-384411
Share on other sites

Archived

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

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.