Grrr website problems. [Help Please]

Covey · Sep 2, 2008

Hey i'm a bit of a beginner HTML coder and i'm updating my site. But i'm having a problem with layering <div>'s. It's causing my page to become to large in height.

You can see the site in action here - http://www.coveyinc.com/new/index.htm

or download the files here - http://www.coveyinc.com/new/Site.zip

Here is a pic to show you what i mean. - http://img255.imageshack.us/img255/7120/screenyho4.png (1440 x 900)

I know it's caused by how im layering my <div>'s im using the "position: relative" style which is causing them to leave a ghost which inturn makes the page think its bigger than it actually as, but due to my lack of knowledge i don't know any other way in which i can make layers.

Any help is appreciated, thanks.
If you need any more information just post and ill try and give it to you.

**NOTE
The images and color scheme on this is just standard and are being used just to make a quick demo of it, i'm in need of actuall coding help not artistic help (if that makes any sense).

Deacon Frost · Sep 2, 2008

Fixed it.

FYI: I changed your center sections from relative to absolute, and added a set height. Using 100% can get nasty, so if you just set the height to what you want, you're better off. If you want to make it longer, change the height, and then on the right advertisement, simply change the style to fixed instead of absolute. That'll make your ad scroll with the page

.

EDIT: However, you would have to mess around with the positions tho XD. Using fixed right now won't work

... But there's a better way to get it done.

I'd say the problem with this was that you used one single element for the entire page. If you were to break the different tables up into different heights, you'd probably have better luck with setting it up.

Code:


<!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>.:Official EliteSwitch Website:.</title>
		<style type="text/css">
			UNKNOWN {COLOR: #ffffff; FONT-FAMILY: Verdana}
			A:link {COLOR: #ffffff; TEXT-DECORATION: none}
			A:active {COLOR: #ffffff; TEXT-DECORATION: none}
			A:visited {COLOR: #ffffff; TEXT-DECORATION: none}
			A:hover {COLOR: #000000; TEXT-DECORATION: none}
		</style>
	</head>
	
	<body style="background-color: #7F7F7F">

		<center>

		<div id="MainBody" style="width: 780px; height:800px; background-image:url('Images/Background.png')">
			
				<img src="Images/Header.png" alt=""></img>
				
				<div id="TopTextAd" style="position:relative; left: -155px; top: -250px; width: 468px; height: 15px; z-index: 

1">
					<script type="text/javascript"><!--
						google_ad_client = "pub-2459385528246331";
						/* 468x15, created 02/08/08 */
						google_ad_slot = "6839840421";
						google_ad_width = 468;
						google_ad_height = 15;
						//-->
					</script>
					<script type="text/javascript"
						src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
					</script>	
				</div>
					
				<div id="CentreBanner" style="position:relative; left: 0px; top: -231px; width: 468px; height: 60px; z-index: 

2">
					<script type="text/javascript"><!--
						google_ad_client = "pub-2459385528246331";
						/* 468x60, created 02/08/08 */
						google_ad_slot = "9762693960";
						google_ad_width = 468;
						google_ad_height = 60;
						//-->
					</script>
					<script type="text/javascript"
						src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
					</script>				
				</div>
				
				<div id="Donations" style="position:relative; left: 316px; top: -291px; width: 143px; height: 60px; z-index: 

3">
					<a href="?id=donate">
						<img border="0" alt="" title="Help the EliteSwitch project by donating easily and securely 

using PayPal." src="Images/Donations.png" width="143" height="60"></img>
					</a>
				</div>

				
				<div id="NavLinksTop" style="position:relative; left: 275px; top: -385px; width: 235px; z-index:4">
					<p>
					<font style="font-size:x-small; font-family:Verdana">
						<a href="?id=home">
							Home
						</a> | 
						<a href="?id=sources">
							Sources
						</a> | 
						<a href="?id=downloads">
							Downloads
						</a> | 
						<a href="?id=donate">
							Donate
						</a>
					</font>
					</p>
				</div>
				
				<div id="RightSkyscrapper" style="position:absolute; right: 187px; top: 170px; width: 160px; z-index:5">
					<script type="text/javascript"><!--
						google_ad_client = "pub-2459385528246331";
						/* 160x600, created 02/08/08 */
						google_ad_slot = "7254946014";
						google_ad_width = 160;
						google_ad_height = 600;
						//-->
					</script>
					<script type="text/javascript"
						src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
					</script>				
				</div>
				
				<div id="LeftNavLinks" align="left" style="position:absolute; left: 187px; top: 172px; width: 160px;  z-

index:6">
					<p>
					<font style="font-family:Verdana; font-size:x-small">
					<a href="?id=home">
						Home
					</a><br/>
					<a href="?id=about">
						About
					</a><br/>
					<a href="?id=donate">
						Donate
					</a><br/>
					<a href="?id=contact">
						Contact
					</a><br/>
					<a href="?id=staff">
						Staff
					</a><br/>
					<a href="?id=link">
						Link to us
					</a><br/>
					<a href="?id=sources">
						Sources
					</a><br/>
					<a href="?id=downloads">
						Downloads
					</a>
					</font>
					</p>
				</div>

				<div id="EliteSwitchNav" style="position: absolute;left: 177px; width: 160px; top: 293px; height: 45px; z-

index:7">
					<img src="Images/Left Menu 2.png" alt=""></img>
				</div>
				
				<div id="EliteSwitchNavLinks" align="left" style="position: absolute; left: 187px; width: 160px; top: 338px; 

height: 45px; z-index:8">
					<p>
					<font style="font-family: Verdana; font-size: x-small">
					<a href="eliteswitchinstall.exe">
						Download Now!
					</a><br/>
					<a href="?id=screenshots">
						Screenshots
					</a><br/>
					<a href="news.php">
						News
					</a><br/>
					<a href="?id=faq">
						F.A.Q
					</a><br/>
					<a href="?id=legal">
						Legal
					</a>
					</font>
					</p>
				</div>

			</div>	
			
			<div id="Footer">
				<div id="FooterContent" style="position: relative; width: 780px; top: -14px; height: 10px">
					<img src="Images/Footer.png" alt=""></img>
				</div>
				<p>
				<font style="font-family: Verdana; font-size: x-small">
					Copyright Â© 2007 - 2008 CoveyInc.com. All rights reserved.<br/>
					This site is in no way affiliated with JaGeX Ltd. RuneScape is registered trademark of JaGeX 

Ltd.<br/>
					Website hosted by <a href="http://precision-media.net/?ref=eliteswitch" target="_blank" title="Great 

affordable web-hosting starting at $2 a month">Precision-Media.net</a> - Affordable Web-Hosting starting at $2 a month or $10 a year!
				</font>
				</p>
			</div>			

		</center>

	</body>
	
	
</html>

SuF · Sep 2, 2008

You can goto: http://www.ejeliot.com/blog/61

Its how to make Equal Height Columns using CSS...

if one of their content is longer than the other, it makes them equal height. D:

Also, go here: http://friendlybit.com/css/simple-css-templates/

it gives VERY simple column layouts, which can be modified to suit your needs...

use those 2 things together and it should work... I will try and whip something up in a couple of minutes. D:

EDIT... Its being a bitch... nothing working right... D:

Covey · Sep 3, 2008

thanks guys but it still isn't working correctly.
Deacon i copied and pasted your code, and it made alot of things out of line, and SuF i indeed fail at CSS i can't get the columns to "float" correctly.

This is kinda what im trying to achieve.

SuF · Sep 3, 2008

Hey, I fought with the top two divs for like 30 mins and made then work, then i said fuck it.. i will go back to working on it sometime. D:

So you want it changed to a 2 column layout?

I will try and get the 3 image divs working.

Covey · Sep 3, 2008

SuF said: ↑

Hey, I fought with the top two divs for like 30 mins and made then work, then i said fuck it.. i will go back to working on it sometime. D:

So you want it changed to a 2 column layout?

I will try and get the 3 image divs working.
Click to expand...

It doesn't matter, 2 or 3 will be fine what ever is easier for you to try and do.
Thanks for the help.

SuF · Sep 3, 2008

I got the 3 image divs working. Now just for the columns. D:

BTW, i am using an external style sheet... its easier. I am also saying fuck your huge image that you make divs over idea... i say NAH. I will make it work though. D:

But I gtg. I have 20 minutes till my dad leaves.. i gotta make lunch, eat breakfast, feed my pony, and my moms horse (damn her horse, its been back here for like 2 days), and then leave. D: ok bye

Covey · Sep 3, 2008

SuF said: ↑

I got the 3 image divs working. Now just for the columns. D:

BTW, i am using an external style sheet... its easier. I am also saying fuck your huge image that you make divs over idea... i say NAH. I will make it work though. D:

But I gtg. I have 20 minutes till my dad leaves.. i gotta make lunch, eat breakfast, feed my pony, and my moms horse (damn her horse, its been back here for like 2 days), and then leave. D: ok bye
Click to expand...

It doesn't necasarily (spelling?) have to have that big image header thing, i just did it like that because i don't know of any better ways of making all the images line up. So if theres is an easier way by all means do that.

Deacon Frost · Sep 3, 2008

Could you take a picture of what messed up and is outta line?

It's all perfect for me, but maybe that's because I just changed a few things.

I'll give er a go and upload it in a second so I can see from opera and such I guess.

SuF · Sep 3, 2008

Ok, the nav div is now working in ff, and chrome (I think chrome stole ffs way of displaying info. D:..) in ie its a bit fucked up... will try and fix that later... i want to finish the other ones first. D:

Deacon Frost · Sep 3, 2008

SuF said: ↑

Ok, the nav div is now working in ff, and chrome (I think chrome stole ffs way of displaying info. D:..) in ie its a bit fucked up... will try and fix that later... i want to finish the other ones first. D:
Click to expand...

Your best bet is to code using opera's guidelines .

SuF · Sep 3, 2008

Deacon Frost said: ↑

Your best bet is to code using opera's guidelines .
Click to expand...

i just make it look nice in ff or ie, then make it look the same in the other. D:

Covey · Sep 4, 2008

SuF said: ↑

i just make it look nice in ff or ie, then make it look the same in the other. D:
Click to expand...

I love you

SuF · Sep 4, 2008

Here is a few pics of what it looks like right now:

In Google Chrome / FireFox

and here is IE... I think i just need to remove image padding or sumthing to make ie look nice.. the sponsers div won't move over for some reason... i am working on that now.

EDIT: Done basicly! It still looks bad in IE, but I don't know how to fix it. The main body will only be as far down as the content it displays, which I hope is ok since you have a super long ad on the right still. I could try and make the content as large as the ad, but i do not think it would be easy. D:

I attached it in zip form... i hope you like it... i think it will look better at lower resolutions now, and the code is better i thinks. (Kinda confusing, but better)

Covey · Sep 5, 2008

Thanks soo much SuF, i think i managed to fix up the small problems you couldn't get out. i just had to set the margin-top value to -4px.

FireFox screeny:
http://img295.imageshack.us/my.php?image=firefoxwi9.png

Internet Explorer screeny:
http://img165.imageshack.us/my.php?image=internetexploreraa8.png

SuF · Sep 5, 2008

I never thought of that. I tried margin-top: 0px; and that didn't work. D:

And your Welcome... It even looks at lower resolutions. D:

Log in or Sign up

Grrr website problems. [Help Please]

Covey Creator of EliteSwitch

Deacon Frost Grand Master

SuF Legend

Covey Creator of EliteSwitch

SuF Legend

Covey Creator of EliteSwitch

SuF Legend

Covey Creator of EliteSwitch

Deacon Frost Grand Master

SuF Legend

Deacon Frost Grand Master

SuF Legend

Covey Creator of EliteSwitch

SuF Legend

Covey Creator of EliteSwitch

SuF Legend

Log in or Sign up

Grrr website problems. [Help Please]

Thread Tools

Covey Creator of EliteSwitch

Deacon Frost Grand Master

SuF Legend

Covey Creator of EliteSwitch

SuF Legend

Covey Creator of EliteSwitch

SuF Legend

Covey Creator of EliteSwitch

Deacon Frost Grand Master

SuF Legend

Deacon Frost Grand Master

SuF Legend

Covey Creator of EliteSwitch

SuF Legend

Covey Creator of EliteSwitch

SuF Legend