Layout help...tell me what I'm doing wrong.

liunx

Guest
I got bored of my like tenth layout, so I made a new one featuring cats (not the musical). Heh. Anyway, I made it on my friend's computer, and he has 1024 x 768 resolution, I was in a hurry, and it looked fine there. Okay, it's a pixel off but that's easy to fix.<br />
<br />
Anyway. For some reason, on 800 x 600 resolution, it gets really messed up. At first glance, it seems as if my layout image is too big, but it's not, it's 780 pixels. For some reason, there's a bottom menubar and the lines for my background and main image don't match. So if you could please help me in my dilemma I'd be forever grateful.<br />
<br />
<!-- m --><a class="postlink" href="http://www.injenn.net/~tania/main.html">http://www.injenn.net/~tania/main.html</a><!-- m --> wherin lies the problem.<!--content-->This is going to need quite a bit of work, but none of it is really difficult. A little time consuming perhaps, but do-able. <br />
<br />
<br />
<br />
If I check it as an XHTML document there are 521 errors: <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.injenn.net%2F%7Etania%2Fmain.html&charset=iso-8859-1+%28Western+Europe%29&doctype=XHTML+1.0+Transitional&ss=1&outline=1&sp=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a><!-- m --><br />
<br />
Don't bother with XHTML. Do it as HTML 4.01 instead. There are 157 errors when checked as HTML. See: <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.injenn.net%2F%7Etania%2Fmain.html&charset=iso-8859-1+%28Western+Europe%29&doctype=HTML+4.01+Transitional&ss=1&outline=1&sp=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a><!-- m --><br />
<br />
Fix the code, by editing the source code by hand in a text editor. Save it to disk after a few edits so as not to lose anything. Save the file as "Text" _not_ as a "Word Document".<br />
<br />
<br />
<br />
<br />
Remove the ending / out of all of the <meta ... /> tags.<br />
<br />
<br />
<br />
Add type="text/javascript" to every <script> tag.<br />
<br />
<br />
<br />
Add a type="text/css" attribute to every <style> tag.<br />
<br />
<br />
<br />
It never used to matter if tags used upper or lower case. In HTML 4.01 it is recommended to write all tags and attributes in lower case. For XHTML an XML it then becomes a requirement.<br />
<br />
<br />
<br />
You have:<br />
<br />
</head><br />
</HEAD><br />
<br />
Delete one of them.<br />
<br />
<br />
<br />
Add alt="some text" to every <img > tag, the text reflecting what is in the dispayed image. On unimportant images, like spacer elements, a minimum of alt="" is fine. For bullet-point images, alt="*" is often used. Search engines do index the alt text. The alt attribute is a required element.<br />
<br />
<br />
<br />
Errors like these next few appear in dozens of places. Correct each one:<br />
<br />
</tr></td></table> should be </td></tr></table> instead.<br />
<br />
</b></font></tr></td> should be </b></font></td></tr> instead.<br />
<br />
</TD></Table> should be </td></tr></table> instead.<br />
<br />
<br />
<br />
Correct the entity errors by changing every & in the URLs to be &amp; instead.<br />
<br />
<br />
<br />
Add this as the very first line of the file:<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<br />
<html><br />
<br />
<br />
<br />
Fix all of the above and you will be left with less than 20 errors. It will then be clearer to see how to fix those. Post again when you have done that or if you get stuck.<!--content-->Okay, I'm working on fixing the errors. Thank you VERY much for your help!<br />
<br />
<br />
Fix the code, by editing the source code by hand in a text editor. Save it to disk after a few edits so as not to lose anything. Save the file as "Text" _not_ as a "Word Document".<br />
<br />
<br />
I've only ever used Notepad for everything HTML I do, never in Word and Frontpage or whatever.<br />
<br />
<br />
It never used to matter if tags used upper or lower case. In HTML 4.01 it is recommended to write all tags and attributes in lower case. For XHTML an XML it then becomes a requirement.<br />
<br />
<br />
<br />
You have:<br />
<br />
</head><br />
</HEAD><br />
<br />
Delete one of them.<br />
<br />
<br />
Well, I don't use XHTML/XML at all. So I'm changing all my codes to lowercase. Okay. It doesn't matter which one though?<br />
<br />
<br />
Correct the entity errors by changing every & in the URLs to be & instead.<br />
& codes? The only ones I have are &nbsp and the odd &copy for copywrite, etc. Where would I put these?<br />
<br />
And would I still use the DOCTYPE code for a notepad file?<!--content-->Click the validator link above. Can you see all the errors where it says "entity not defined"?<br />
<br />
Those errors are all inside URLs. The browser knows that &nbsp; is a space, and &pound; is a Pound sign, but when it sees &id inside a URL it tries to find an entity called ID to display. There isn't one, so it chokes on it.<br />
<br />
Correct those entity errors by changing every & in the URLs to be &amp; instead. The browser knows to send the unescaped & to the server, whilst displaying the correct stuff on screen.<br />
<br />
<br />
<br />
Yeah, you need the DOCTYPE. It tells the browser what sort of HTML code is coming up in the file.<!--content-->Okay, I updated my website, or attempted to, with the information you gave me. But it hasn't made the space around the content go away. Should I just make everything smaller?<br />
<br />
<!-- m --><a class="postlink" href="http://injenn.net/~tania/main.html">http://injenn.net/~tania/main.html</a><!-- m --><br />
<br />
I don't know how to validate it.<!--content-->Down from 157 errors to 123. Moving in the right direction. Check this link: <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.injenn.net%2F%7Etania%2Fmain.html&charset=iso-8859-1+%28Western+Europe%29&doctype=HTML+4.01+Transitional&ss=1&outline=1&sp=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a><!-- m --><br />
<br />
<br />
<br />
Some stuff still to do:<br />
<br />
<br />
<br />
<meta http-equiv="Content-Type" content="text/html"> is not correct.<br />
<br />
This should be:<br />
<br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<meta http-equiv="Content-Language" content="en"><br />
<br />
<br />
<br />
Add type="text/javascript" to every <script> tag.<br />
<br />
<br />
Correct the entity errors by changing every & in the URLs to be &amp; instead.<br />
<br />
<br />
Add alt="some text" to every <img > tag, the text reflecting what is in the dispayed image. On unimportant images, like spacer elements, a minimum of alt="" is fine. For bullet-point images, alt="*" is often used. Search engines do index the alt text. The alt attribute is a required element.<br />
<br />
<br />
<br />
Post again when you have done all that.<!--content-->
 
Back
Top