Adblock breaks this site

Grrr website problems. [Help Please]

Discussion in 'Web Programming' started by Covey, Sep 2, 2008.

Thread Tools

Thread Tools

  • Thread ID:
  1. Covey

    Covey Creator of EliteSwitch
    Retired Sectional Moderator Visual Basic Programmers

    Joined:
    Sep 9, 2005
    Posts:
    4,510
    Referrals:
    9
    Sythe Gold:
    9
    Discord Unique ID:
    807246764155338833
    Discord Username:
    Covey#1816
    Grrr website problems. [Help Please]
    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).
     
    Covey, Sep 2, 2008
    #1
  2. Deacon Frost

    Deacon Frost Grand Master
    Banned

    Joined:
    Jan 30, 2007
    Posts:
    2,905
    Referrals:
    3
    Sythe Gold:
    57
    Grrr website problems. [Help Please]
    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 :p... 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>
     
    Deacon Frost, Sep 2, 2008
    #2
  3. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Grrr website problems. [Help Please]
    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:
     
    SuF, Sep 2, 2008
    #3
  4. Covey

    Covey Creator of EliteSwitch
    Retired Sectional Moderator Visual Basic Programmers

    Joined:
    Sep 9, 2005
    Posts:
    4,510
    Referrals:
    9
    Sythe Gold:
    9
    Discord Unique ID:
    807246764155338833
    Discord Username:
    Covey#1816
    Grrr website problems. [Help Please]
    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.
    [​IMG]
     
    Covey, Sep 3, 2008
    #4
  5. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Grrr website problems. [Help Please]
    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.
     
    SuF, Sep 3, 2008
    #5
  6. Covey

    Covey Creator of EliteSwitch
    Retired Sectional Moderator Visual Basic Programmers

    Joined:
    Sep 9, 2005
    Posts:
    4,510
    Referrals:
    9
    Sythe Gold:
    9
    Discord Unique ID:
    807246764155338833
    Discord Username:
    Covey#1816
    Grrr website problems. [Help Please]
    It doesn't matter, 2 or 3 will be fine what ever is easier for you to try and do.
    Thanks for the help.
     
    Covey, Sep 3, 2008
    #6
  7. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Grrr website problems. [Help Please]
    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
     
    SuF, Sep 3, 2008
    #7
  8. Covey

    Covey Creator of EliteSwitch
    Retired Sectional Moderator Visual Basic Programmers

    Joined:
    Sep 9, 2005
    Posts:
    4,510
    Referrals:
    9
    Sythe Gold:
    9
    Discord Unique ID:
    807246764155338833
    Discord Username:
    Covey#1816
    Grrr website problems. [Help Please]
    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.
     
    Covey, Sep 3, 2008
    #8
  9. Deacon Frost

    Deacon Frost Grand Master
    Banned

    Joined:
    Jan 30, 2007
    Posts:
    2,905
    Referrals:
    3
    Sythe Gold:
    57
    Grrr website problems. [Help Please]
    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.
     
    Deacon Frost, Sep 3, 2008
    #9
  10. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Grrr website problems. [Help Please]
    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:
     
    SuF, Sep 3, 2008
    #10
  11. Deacon Frost

    Deacon Frost Grand Master
    Banned

    Joined:
    Jan 30, 2007
    Posts:
    2,905
    Referrals:
    3
    Sythe Gold:
    57
    Grrr website problems. [Help Please]
    Your best bet is to code using opera's guidelines ;).
     
    Deacon Frost, Sep 3, 2008
    #11
  12. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Grrr website problems. [Help Please]
    i just make it look nice in ff or ie, then make it look the same in the other. D:
     
    SuF, Sep 3, 2008
    #12
  13. Covey

    Covey Creator of EliteSwitch
    Retired Sectional Moderator Visual Basic Programmers

    Joined:
    Sep 9, 2005
    Posts:
    4,510
    Referrals:
    9
    Sythe Gold:
    9
    Discord Unique ID:
    807246764155338833
    Discord Username:
    Covey#1816
    Grrr website problems. [Help Please]
    I love you :D
     
    Covey, Sep 4, 2008
    #13
  14. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Grrr website problems. [Help Please]
    Here is a few pics of what it looks like right now:

    In Google Chrome / FireFox

    [​IMG]

    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.


    [​IMG]






    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)
     
    SuF, Sep 4, 2008
    #14
  15. Covey

    Covey Creator of EliteSwitch
    Retired Sectional Moderator Visual Basic Programmers

    Joined:
    Sep 9, 2005
    Posts:
    4,510
    Referrals:
    9
    Sythe Gold:
    9
    Discord Unique ID:
    807246764155338833
    Discord Username:
    Covey#1816
    Grrr website problems. [Help Please]
    Covey, Sep 5, 2008
    #15
  16. SuF

    SuF Legend
    Pirate Retired Global Moderator

    Joined:
    Jan 21, 2007
    Posts:
    14,212
    Referrals:
    28
    Sythe Gold:
    1,234
    Discord Unique ID:
    203283096668340224
    <3 n4n0 Two Factor Authentication User Community Participant Spam Forum Participant Sythe's 10th Anniversary
    Grrr website problems. [Help Please]
    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:
     
    SuF, Sep 5, 2008
    #16
< Need someone good with CSS | Extremely basic Auto-Clicker Needed >


 
 
Adblock breaks this site