|
|
Posted by BobaBird on 01/18/08 17:36
On Thu, 17 Jan 2008 13:38:47 -0800 (PST), Andrew H
<ahodsdon@gmail.com> wrote:
> I just uploaded ... to my website which is
> located @ http://www.jessicahodsdon.com
A few suggestions:
The <h1> does not need to be part of the layout table. Put it by
itself above <table> and delete that row/td. Keep it simple.
Put your paragraphs within <p>...</p> markup. Only use <br> to force
a new line without the default blank line, such as for your "designed
by" note.
The <img> is on the same site, so you can use a relative URL rather
than specifying the whole thing. Also, for those who can't see the
image, provide some alternate text that describes what they're missing
(required for 4.01 Strict). Specifying the size of the img is
optional, but allows the browser to reserve space for it before it's
loaded.
I see how the layout table keeps the text to the right of the photo,
but you can get much the same effect without it. (Take this as
showing you another way.)
Start by clearing out all the table/row/td markup. Next, apply some
in-line CSS to the image. (If you want all images to have this CSS,
put it in your internal or external stylesheet instead.) First,
"float:left" keeps the img on the left side, with the rest of the <p>
on the right, then wrapping underneath as you add paragraphs. Then,
to keep the text from touching the img and allow for easier reading,
add "margin-right:1em". (An "em" is a unit of line /height/ that is
frequently recommended for specifying width because it will adjust as
the user adjusts the text size.)
Link text should be descriptive of the destination.
http://www.w3.org/QA/Tips/noClickHere
Your page with revised markup:
<body>
<h1>In Loving Memory of Jessica Hodsdon</h1>
<p><img style="float:left; margin-right:1em"
src="images/jess_obit.gif" alt="Photo of Jessica" width="215"
height="320">Jessica Hodsdon, after years of struggling ...</p>
<p>Thank You,</p>
<p>Andrew Y. Hodsdon</p>
<p>Also please visit
the <a href="http://photo.jessicahodsdon.com">Jessica Hodsdon photo
gallery</a></p>
<p style="clear:left;">Website Designed by Andrew Y. Hodsdon<br>
ahodsdon@gmail.com</p>
</body>
The final <p> adds "clear:left;" to break the float and allows the <p>
to be placed under the photo when there is not enough content to
extend below it. (Or, if you keep the table, move this <p> below the
table, but without the inline style, just like we moved <h1> above
it.)
--
Charles
Navigation:
[Reply to this message]
|