Website help!

Want to just shoot the breeze? Forum 42 is the place!

Moderator: Moderators

ghosstt
Senior Member
Posts: 1551
Joined: Mon Feb 26, 2007 4:14 pm

Website help!

Post by ghosstt »

http://www.freewebs.com/wii_reviews/Index.htm

EDIT: ok, thats the my site. how do i make it so that i get rid of the blue link stuff around the link? here is my HTML code.

Code: Select all

<html>
<head>


<title>Wii Reviews! Wii Review The Full Game</title>

</head>
<body >
<body background="http://i6.photobucket.com/albums/y205/mustangman77/bggreen.png">
<body link="00000" alink="black" vlink="black">
<center><img src="http://i6.photobucket.com/albums/y205/mustangman77/logo.png" width="728" height="224"></center>
<center>
<center>
<map name="FPMap0">
<area href="http://www.freewebs.com/wii_reviews/reviews.htm" shape="rect" coords="130, 15, 197, 31">
<area href="http://z7.invisionfree.com/ForeverKnights/index.php?act=idx" shape="rect" coords="223, 14, 366, 33">
<area href="http://www.freewebs.com/wii_reviews/rumors.htm" shape="rect" coords="395, 14, 457, 33">
<area href="http://www.freewebs.com/wii_reviews/contactus.htm" shape="rect" coords="485, 14, 587, 34">
</map>
<img src="http://i6.photobucket.com/albums/y205/mustangman77/Linkbanner.png" width="700" height="46" usemap="#FPMap0"></center>
<br>
<img src="http://i6.photobucket.com/albums/y205/mustangman77/infostuff.png" width="600" height="517" style="border: 2px solid #00000;"></center>

<div style="overflow; height:454; width:477; position:absolute; left:225; top:327">
			<tr>
			<td>Welcome to Wii Reviews! We are a review site for Nintendo Wii games. On thing that makes us different is that we complete the game BEFORE we review it. That way, if the game gets really good after the first couple of levels, we will know this and we will review the game more accurately.</td>
		</tr>
</div>
		
</html>
myuusmeow
Posts: 83
Joined: Fri Nov 17, 2006 9:28 pm

Post by myuusmeow »

The text isn't right in Firefox or IE.

Nevermind, you made it for a specific resolution...not good. :p

I'm currently fixing a few things, changing the divs to tables etc. (I hate divs. :p)
Last edited by myuusmeow on Sat Jul 14, 2007 4:00 pm, edited 1 time in total.
Radica 6-in-1p:
Currently: received Radica, bored of Sonic and Golden Axe, now waiting for Christmas break.
Kurt_
Portablizer
Posts: 5748
Joined: Thu Nov 24, 2005 10:32 am
Steam ID: kurbert
Location: Ontario, Canada
Contact:

Post by Kurt_ »

Yup. The text isn't right on a monitor other than his.

Here's what I see:
Image
Hey, sup?
bicostp
Moderator
Posts: 10491
Joined: Mon Mar 07, 2005 5:47 pm
Steam ID: bicostp
Location: Spamalot
Contact:

Post by bicostp »

Don't make your site like that. :P Use relative positioning so the page doesn't go crazy when you use it at different resolutions.

@ myuusmeow: Tables are the old crappy way of doing page layout. A div can be any size, anywhere. Tables are a lot more restrictive.
myuusmeow
Posts: 83
Joined: Fri Nov 17, 2006 9:28 pm

Post by myuusmeow »

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">	
<html>
<head>
<title>Wii Reviews! Wii Review The Full Game</title>
</head>
<body background="http://i6.photobucket.com/albums/y205/mustangman77/bggreen.png" link="black" alink="black" vlink="black" style="border: 0px;">
<!--Myuusmeow was here-->
<center><img src="http://i6.photobucket.com/albums/y205/mustangman77/logo.png" width="728" height="224" alt=""border="0">
<map name="FPMap0">
<area href="http://www.freewebs.com/wii_reviews/reviews.htm" shape="rect" coords="130, 15, 197, 31" alt="" style="border: 0px;">
<area href="http://z7.invisionfree.com/ForeverKnights/index.php?act=idx" shape="rect" coords="223, 14, 366, 33" alt="" style="border: 0px;">
<area href="http://www.freewebs.com/wii_reviews/rumors.htm" shape="rect" coords="395, 14, 457, 33" alt="" style="border: 0px;">
<area href="http://www.freewebs.com/wii_reviews/contactus.htm" shape="rect" coords="485, 14, 587, 34" alt="" style="border: 0px;">
</map>
<img src="http://i6.photobucket.com/albums/y205/mustangman77/Linkbanner.png" width="700" height="46" usemap="#FPMap0" alt=""border="0">
<br>
<!--Myuusmeow practically lived here-->
<table style="background-image:url(http://i6.photobucket.com/albums/y205/mustangman77/infostuff.png); height: 517px" width="600"><tr><td>Welcome to Wii Reviews! We are a review site for Nintendo Wii games. On thing that makes us different is that we complete the game BEFORE we review it. That way, if the game gets really good after the first couple of levels, we will know this and we will review the game more accurately.</td></tr></table></center>      
</html>
There we go.

@bic: Still, I never use divs, just don't like them. :p
@ghostt: Unless you want to keep the divs, just use the table part.
Last edited by myuusmeow on Sat Jul 14, 2007 4:17 pm, edited 5 times in total.
Radica 6-in-1p:
Currently: received Radica, bored of Sonic and Golden Axe, now waiting for Christmas break.
ghosstt
Senior Member
Posts: 1551
Joined: Mon Feb 26, 2007 4:14 pm

Post by ghosstt »

ok, i fixed all the stuff i asked help for. but how do i make it so it works on EVERY monitor..

make it to relative position? btw im using MS frontpage. how do i move the div once its in a relative position
bicostp
Moderator
Posts: 10491
Joined: Mon Mar 07, 2005 5:47 pm
Steam ID: bicostp
Location: Spamalot
Contact:

Post by bicostp »

This page shows another problem with tables: when the cells are huge they tend to stick the text in the middle of a white void.

Here's a cleaned up copy of the page:

Code: Select all

<html><head>
<title>Wii Reviews! Wii Review The Full Game</title>
</head>
<body background="http://i6.photobucket.com/albums/y205/mustangman77/bggreen.png" link="black" alink="black" vlink="black" border="0">
<center><img src="http://i6.photobucket.com/albums/y205/mustangman77/logo.png" width="728" height="224" border="0">
<map name="FPMap0">
<area href="http://www.freewebs.com/wii_reviews/reviews.htm" shape="rect" coords="130, 15, 197, 31" border="0">
<area href="http://z7.invisionfree.com/ForeverKnights/index.php?act=idx" shape="rect" coords="223, 14, 366, 33" border="0">
<area href="http://www.freewebs.com/wii_reviews/rumors.htm" shape="rect" coords="395, 14, 457, 33" border="0">
<area href="http://www.freewebs.com/wii_reviews/contactus.htm" shape="rect" coords="485, 14, 587, 34" alt="" border="0">
</map>
<img src="http://i6.photobucket.com/albums/y205/mustangman77/Linkbanner.png" usemap="#FPMap0" border="0">
<br>
<div style="background-image:url(http://i6.photobucket.com/albums/y205/mustangman77/infostuff.png); width:60%; min-width:728px;" align="center">Welcome to Wii Reviews! We are a review site for Nintendo Wii games. On thing that makes us different is that we complete the game BEFORE we review it. That way, if the game gets really good after the first couple of levels, we will know this and we will review the game more accurately.</div>     
</html>
I also got rid of the doctype junk; I don't think any browser made since 1994 really cares about that anymore. And it would probably be cleaner to break up your navigation bar into separate images and put them side by side inside a div instead of using link maps, and use CSS instead of redundant HTML attributes.
ghosstt
Senior Member
Posts: 1551
Joined: Mon Feb 26, 2007 4:14 pm

Post by ghosstt »

ok, i revamped the main page. i base all the other pages off of it, so can someone take this page, and JUST make it so it works on all browsers. THANKS SO MUCH

Code: Select all

<html>
<head>


<title>Wii Reviews! Wii Review The Full Game</title>

</head>
<body >
<body background="http://i6.photobucket.com/albums/y205/mustangman77/bggreen.png">
<body link="00000 alink="00000" vlink="00000">
<center><a href="http://www.freewebs.com/wii_reviews"><img src="http://i6.photobucket.com/albums/y205/mustangman77/logo.png" width="728" height="224" border="0"></a></center>
<center>
<center>
<map name="FPMap0">
<area href="http://www.freewebs.com/wii_reviews/reviews.htm" shape="rect" coords="130, 15, 197, 31">
<area href="http://z7.invisionfree.com/ForeverKnights/index.php?act=idx" shape="rect" coords="223, 14, 366, 33">
<area href="http://www.freewebs.com/wii_reviews/rumors.htm" shape="rect" coords="395, 14, 457, 33">
<area href="http://www.freewebs.com/wii_reviews/contactus.htm" shape="rect" coords="485, 14, 587, 34">
</map>
<img src="http://i6.photobucket.com/albums/y205/mustangman77/Linkbanner.png" width="700" height="46" usemap="#FPMap0" border="0"></center>
<br>
<img src="http://i6.photobucket.com/albums/y205/mustangman77/infostuff.png" width="600" height="517" border="1"></center>

<div style="overflow; height:454; width:477; position:absolute; left:225; top:327">
			<tr>
			<td>Welcome to Wii Reviews! We are a review site for Nintendo Wii games. On thing that makes us different is that we complete the game BEFORE we review it. That way, if the game gets really good after the first couple of levels, we will know this and we will review the game more accurately.</td>
		</tr>
</div>
		
</html>
gannon
Moderator
Posts: 6974
Joined: Sun Apr 04, 2004 4:48 pm
Location: Near that one big lake
Contact:

Post by gannon »

Gotta say, that bg is horrible to look at :P
ghosstt
Senior Member
Posts: 1551
Joined: Mon Feb 26, 2007 4:14 pm

Post by ghosstt »

lol. i like the look though
bicostp
Moderator
Posts: 10491
Joined: Mon Mar 07, 2005 5:47 pm
Steam ID: bicostp
Location: Spamalot
Contact:

Post by bicostp »

Wow. I'm sorry but your code's a mess. You don't need TD and TR for divs, the box is all the way on the left of the screen, an extra image for the content is unnecessary, and don't ever use absolute positioning unless you have to. Use percentages and minimums. :)

Code: Select all

<html><head>
<title>Wii Reviews! Wii Review The Full Game</title>
<style type="text/css">
#content {
background-color:FFF; height:454; width:477; align:center; text-align:left; border-style: solid; padding:10px;
}
</style>
</head>
<body background="http://i6.photobucket.com/albums/y205/mustangman77/bggreen.png" link="00000 alink="00000" vlink="00000">
<center><a href="http://www.freewebs.com/wii_reviews"><img src="http://i6.photobucket.com/albums/y205/mustangman77/logo.png" border="0">
</a></center>
<center>
<map name="FPMap0">
<area href="http://www.freewebs.com/wii_reviews/reviews.htm" shape="rect" coords="130, 15, 197, 31">
<area href="http://z7.invisionfree.com/ForeverKnights/index.php?act=idx" shape="rect" coords="223, 14, 366, 33">
<area href="http://www.freewebs.com/wii_reviews/rumors.htm" shape="rect" coords="395, 14, 457, 33">
<area href="http://www.freewebs.com/wii_reviews/contactus.htm" shape="rect" coords="485, 14, 587, 34">
</map>
<img src="http://i6.photobucket.com/albums/y205/mustangman77/Linkbanner.png" width="700" height="46" usemap="#FPMap0" border="0">
<br>
<div id="content">
Welcome to Wii Reviews! We are a review site for Nintendo Wii games. On thing that makes us different is that we complete the game BEFORE we review it. That way, if the game gets really good after the first couple of levels, we will know this and we will review the game more accurately.     
</div></center></html> 
This should render properly in just about anything; it works on IE 6, Firefox 2, and Opera Mobile on my PDA.

Try to get used to using CSS, it makes it easier to manually edit pages (instead of wading through your formatting), and depending on how you style the pages an external CSS file will save you bandwidth.

Here's a copy that has almost all the formatting in the style tags:

Code: Select all

<html><head>
<title>Wii Reviews! Wii Review The Full Game</title>
<style type="text/css">
#content {background-color:FFF; height:454; width:477; align:center; text-align:left; border-style: solid; padding:10px;}
body {background-image: url('http://i6.photobucket.com/albums/y205/mustangman77/bggreen.png');}
A:link {color:000}
A:visited {color:000}
img {border:0}
</style></head><body>
<center><a href="http://www.freewebs.com/wii_reviews"><img src="http://i6.photobucket.com/albums/y205/mustangman77/logo.png">
</a></center>
<center>
<map name="FPMap0">
<area href="http://www.freewebs.com/wii_reviews/reviews.htm" shape="rect" coords="130, 15, 197, 31">
<area href="http://z7.invisionfree.com/ForeverKnights/index.php?act=idx" shape="rect" coords="223, 14, 366, 33">
<area href="http://www.freewebs.com/wii_reviews/rumors.htm" shape="rect" coords="395, 14, 457, 33">
<area href="http://www.freewebs.com/wii_reviews/contactus.htm" shape="rect" coords="485, 14, 587, 34">
</map>
<img src="http://i6.photobucket.com/albums/y205/mustangman77/Linkbanner.png" width="700" height="46" usemap="#FPMap0">
<br>
<div id="content">
Welcome to Wii Reviews! We are a review site for Nintendo Wii games. On thing that makes us different is that we complete the game BEFORE we review it. That way, if the game gets really good after the first couple of levels, we will know this and we will review the game more accurately.<br>
</div></center></html> 
Let's see tables do THAT! :P

You can take everything between the style tags and put it in an external CSS file and link to it like this:

Code: Select all

<link rel="stylesheet" type="text/css" href="http://www.freewebs.com/yourdomain/path/to/stylesheet.css"/>
(You can get rid of the style stuff in the individual pages if you do it this way.)

Separating your content and formatting as much as possible makes editing pages a lot easier, and you won't waste space on repetitive formatting. :D
Last edited by bicostp on Sat Jul 14, 2007 5:22 pm, edited 2 times in total.
Kurt_
Portablizer
Posts: 5748
Joined: Thu Nov 24, 2005 10:32 am
Steam ID: kurbert
Location: Ontario, Canada
Contact:

Post by Kurt_ »

ghost, let these guys fight over which is best. Come back tomorrow for your protected run-on-everything bulletproof code. :P
Hey, sup?
ghosstt
Senior Member
Posts: 1551
Joined: Mon Feb 26, 2007 4:14 pm

Post by ghosstt »

Kurt_ wrote:ghost, let these guys fight over which is best. Come back tomorrow for your protected run-on-everything bulletproof code. :P
thats what im hoping for :lol:

im just woundering.. whats so bad bout my coding! :lol: its just what i can figure out that works... but w.e just tell me whatever is the BEST and will work on ALL resolutions and stuff
gannon
Moderator
Posts: 6974
Joined: Sun Apr 04, 2004 4:48 pm
Location: Near that one big lake
Contact:

Post by gannon »

They already told you what's best and will work on all (well, at least most) resolutions, CSS, divs, and relative positioning :P
bicostp
Moderator
Posts: 10491
Joined: Mon Mar 07, 2005 5:47 pm
Steam ID: bicostp
Location: Spamalot
Contact:

Post by bicostp »

Your coding isn't really bad, you just have a little debris here and there, and straight HTML isn't the easiest way to do what you want to do. :)

Here's my final entry, no more tweaking. (Any more optimization would delve into my shoddy, pathetic PHP skills. You don't wanna go there.) It should work at any resolution. 640x480 users will need to scroll, but if you run at that res you're used to it. :P

Put this in a file called stylesheet.css and put it in the same directory as your pages. (The root directory in this case.)

Code: Select all

#content {background-color:FFF; height:454; width:477; align:center;  text-align:left; border-style:solid; padding:10px; }
body {background-image:url('http://i6.photobucket.com/albums/y205/mustangman77/bggreen.png');}
A:link {color:000;}
A:visited {color:000;}
img {border:0;}
Here's your page template:

Code: Select all

<html><head>
<title>Wii Reviews! Wii Review The Full Game</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body><center>
<a href="http://www.freewebs.com/wii_reviews"><img src="http://i6.photobucket.com/albums/y205/mustangman77/logo.png"></a>
<map name="FPMap0">
<area href="http://www.freewebs.com/wii_reviews/reviews.htm" shape="rect" coords="130, 15, 197, 31">
<area href="http://z7.invisionfree.com/ForeverKnights/index.php?act=idx" shape="rect" coords="223, 14, 366, 33">
<area href="http://www.freewebs.com/wii_reviews/rumors.htm" shape="rect" coords="395, 14, 457, 33">
<area href="http://www.freewebs.com/wii_reviews/contactus.htm" shape="rect" coords="485, 14, 587, 34">
</map>
<img src="http://i6.photobucket.com/albums/y205/mustangman77/Linkbanner.png" usemap="#FPMap0">
<br>
<div id="content">
Welcome to Wii Reviews! We are a review site for Nintendo Wii games. On thing that makes us different is that we complete the game BEFORE we review it. That way, if the game gets really good after the first couple of levels, we will know this and we will review the game more accurately.
</div></center>
</html> 
You don't even need to upload these to the server; just put both files into a folder on your desktop and open the HTML page. (If you're using Notepad, make sure you call the style sheet stylesheet.css, not stylesheet.css.txt. Windows will do that if you have file extensions hidden. And if you're going to use Notepad to edit pages, don't. Get Notepad Plus http://notepad-plus.sourceforge.net . It does syntax highlighting, which makes the tags really stand out so it's easier to edit the pages.

Image
Post Reply