HTML Help

puzzonline · Joined: 21 Oct 2009 Posts: 4

Hi all,

I'm relatively new to HTML, so apologies if this question is in the wrong forum.

I designed a Web site -- www.puzzlement.us -- and it looked great until just the other day when the background image began to be centered for no reason I can see.

Before, the text aligned correctly under the three headings on the home page.

Any idea why this is happening?

You can see the source code by right-clicking on the site.

Also, since I do prefer the image to be centered rather than flush left, is there a way I can have the text line up under the headings without using absolute positions? (That is, so the text aligns properly on the centered image despite the width of the browser window.)

Thanks in advance! And I appreciate any feedback you can give me on the site design itself. (Note that only the home page is finished...)

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

Hi, Puzzleonline. Just a few errors in your HTML need to be cleaned up first:

HTML Errors

These errors are only referring to your home page. All pages need to be checked and corrected.

You must always use a proper document type. Right now your page is putting browsers in their Quirks Mode and they do not parse your page as you want them to. Once you have corrected the errors, we can get to the text positioning with no absolute positioning required.

Your problem with absolute positioning is that it is not flexible and is dependent on the browser's window size. The dimensions set are referenced to the edges of the browser's window so will be different for different sized windows.

HTML Tidy flagged these:
Quote: Result: 0 errors / 11 warnings

line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 17 column 1 - Warning: inserting implicit <body>
line 46 column 1 - Warning: missing </div>
line 43 column 1 - Warning: missing </div>
line 40 column 1 - Warning: missing </div>
line 19 column 1 - Warning: <map> attribute "id" has invalid value "_Image-Maps_9200910141832338"
line 19 column 1 - Warning: <map> anchor "Image-Maps_9200910141832338" already defined
line 41 column 1 - Warning: <font> attribute "color" had invalid value "000000" and has been replaced
line 44 column 1 - Warning: <font> attribute "color" had invalid value "000000" and has been replaced
line 47 column 1 - Warning: <font> attribute "color" had invalid value "000000" and has been replaced
line 19 column 1 - Warning: <map> id and name attribute value mismatch

Some of these are self explanatory as the complete tag is missing in many. The colors must be either in "rgb" or hex color code form. You should use a common CSS file for all your pages.

Thank you for NOT using tables. :P BTW, I love puzzles so hope you got some good ones.

puzzonline · Joined: 21 Oct 2009 Posts: 4

Thanks for the information! I never knew there were HTML bug-finding programs. Very cool.

I think I fixed most if not all of the issues. See updated site at www.puzzlement.us

So you say there's a way to place the text over the image without using absolute positioning? I read of relative positioning, but I couldn't get that to work and wasn't sure if that's what I want.

Thanks for any additional help you can provide!

And yes, I hope they'll be great puzzles. Click Biography on the home page to see (off-center) my credentials. Note that HTML isn't one of them! :)

sticks464 · Joined: 31 Dec 2006 Posts: 2311

First and foremost you have to use a doctype so browsers know what code they're parsing. Secondly, proper tags must be used to separate markup from the head section. Absolute positioned elements need another element to base their positioning x-y coordinates on other than the screen. That's why they move around when screen size changes.

Here's how to fix it.
Once a body section is defined, make the first div the container for all the other content and give it relative positioning. Since this div now becomes the parent of all the content, they will inherit some styles like font, color and font size. Now you can position all absolute positioned off the top left corner of this main div. Since browser are now more sophisticated, tags must be closed even if your using plain html.

I put an html transitional doctype on this but it will not validate, you are using xhtml short tags to close your image map and area shapes. You are also using uppercase text in tags which xhtml forbids.

The following code will validate if you change the id of the map (it can't begin with an underscore). id's and classes cannot begin with anything except an alphabetic letter (a-z...A-Z).
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="title" content="Puzzlement Online">
<meta name="description" content="Word Games, Crosswords, Cryptograms, Mysteries and Logic Puzzles">
<meta name="keywords" content="puzzles, puzzlement, crosswords, games, shawn kennedy, mysteries, puzzle">
<meta name="owner" content="puzzlementsubatyahoo.com">
<meta name="author" content="Shawn Kennedy">
<meta http-equiv="expires" content="">
<meta http-equiv="charset" content="ISO-8859-1">
<meta http-equiv="content-language" content="English">
<meta http-equiv="VW96.objectType" content="Document">
<meta name="rating" content="General">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="4 days">

<title>Puzzlement - Word Games, Crosswords, and Logic Puzzles by Shawn Kennedy</title>
</head>
<body>
<div style="text-align:left; width:837px; margin:0 auto; position:relative; font-size:12px; font-family:verdana;">
<img id="Image-Maps_9200910141832338" src="home4.gif" usemap="#Image-Maps_9200910141832338" border="0" width="837" height="422" alt="" >
<map id="_Image-Maps_9200910141832338" name="Image-Maps_9200910141832338">
<area shape="rect" coords="24,141,79,168" href="http://www.puzzlement.us/" alt="home" title="home">
<area shape="rect" coords="24,181,94,209" href="puzzles.htm" alt="puzzles" title="puzzles">
<area shape="rect" coords="24,218,119,246" href="bio.htm" alt="bio" title="bio">
<area shape="rect" coords="24,260,92,283" href="contact.htm" alt="contact" title="contact">
<area shape="rect" coords="24,297,72,320" href="links.htm" alt="links" title="links">
<area shape="rect" coords="165,324,290,346" href="bio.htm" alt="" title="">
<area shape="rect" coords="374,325,499,362" href="puzzles.htm" alt="" title="">
<area shape="rect" coords="587,324,721,346" href="contact.htm" alt="" title="">

</map>
<div style="text-align:center;">
<a style="text-decoration:none;" href="http://www.puzzlement.us/" title="home">home</a>
| <a style="text-decoration:none;" href="http://www.puzzlement.us/puzzles.htm" title="puzzles">puzzles</a>
| <a style="text-decoration:none;" href="http://www.puzzlement.us/bio.htm" title="bio">bio</a>
| <a style="text-decoration:none;" href="http://www.puzzlement.us/contact.htm" title="contact">contact</a>
| <a style="text-decoration:none;" href="http://www.puzzlement.us/links.htm" title="links">links</a>
</div>



<div style="position:absolute; top:228px; left:170px; width:160px; height:25px">
<font face="arial" size="2" color="000000">These aren't your typical crosswords and word games. Puzzlement puzzles have unique twists and eye-catching graphics that set them apart. </font></div>

<div style="position:absolute; top:228px; left:380px; width:160px; height:25px">
<font face="arial" size="2" color="000000">Limber up your brain and sample my work with this regularly updated collection of variety puzzles. New puzzles added each Wednesday.</font></div>

<div style="position:absolute; top:228px; left:590px; width:160px; height:25px">
<font face="arial" size="2" color="000000">Need creative, engaging puzzles for your TV show, book, magazine or Web site? Just want to say hi? Here's where you can <br>drop me a line. </font></div>
</div>
</body>
</html>

puzzonline · Joined: 21 Oct 2009 Posts: 4

Thanks, Sticks & Payneless.

Exactly what I'd pictured in my head. I made the image map using an online tool, so it must have used xhtml. I'll poke around and find out how to swap the tags over to html.

Thanks again! :)

sticks464 · Joined: 31 Dec 2006 Posts: 2311

It's already done in the code I posted. Do a comparison and see what errors you have.

puzzonline · Joined: 21 Oct 2009 Posts: 4

Thanks, Sticks!

I used your code as a template for the site's other pages, and it looks great.

www.puzzlement.us

The puzzles links don't link anywhere yet, but they will soon.

Thanks again! :)

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

Sticks always saves me a lot of time. Wish we had a dozen more like him here in the forum.