help with coding xhtml

**cbleep** · 10-29-2007, 11:22 AM

i made a template in photoshop sliced it and coded the it but i don't understand how to code the side bars i try but the way i do by making them background images doesn't make it validate when submitted to the W3C Mark Up Validator can someone help me please

Thanks in advance

**boogyman** · 10-29-2007, 12:10 PM

can you post the photoshop image and what you have so far?
post the url if available if not use the the [code] tags to wrap the code

**cbleep** · 10-29-2007, 02:43 PM

here is the code

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>....................</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="809" border="0" align="center" cellpadding="0" cellspacing="0" id="cb">
  <tr>
    <td width="29" height="641" rowspan="10" bgcolor="#FFFFFF"><img src="images/left_border.jpg" alt="" width="29" height="641" /></td>
    <td width="751" height="148" colspan="7" valign="top" bgcolor="#C9443F"><img src="images/header.jpg" alt="" width="751" height="148" /></td>
    <td width="29" height="641" rowspan="10" bgcolor="#FFFFFF"><img src="images/right_border.jpg" alt="" width="29" height="641" /></td>
  </tr>
  <tr>
    <td colspan="7" bgcolor="#FFFFFF"><img src="images/right_arrows.jpg" alt="" width="38" height="38" /><img src="images/home.jpg" alt="home" width="87" height="38" /><img src="images/articles.jpg" alt="articles" width="98" height="38" /><img src="images/learn+.jpg" alt="learn+" width="98" height="38" /><img src="images/tools.jpg" alt="tools" width="98" height="38" /><img src="images/advertise.jpg" alt="advertise" width="98" height="38" /><img src="images/contacts.jpg" alt="contacts" width="98" height="38" /><img src="images/links.jpg" alt="licks" width="96" height="38" /><img src="images/right_arrows-15.jpg" alt="" width="40" height="38" /></td>
  </tr>
  <tr>
    <td colspan="7" bgcolor="#FFFFFF"><img src="images/top_white.jpg" width="751" height="8" alt="" /></td>
  </tr>
  <tr>
    <td width="10" height="408" rowspan="4" bgcolor="#FFFFFF">&nbsp;</td>
    <td width="289" height="26" valign="top" bgcolor="#FFFFFF"><img src="images/chra.jpg" alt="" width="289" height="26" /></td>
    <td width="16" height="408" rowspan="4" bgcolor="#FFFFFF">&nbsp;</td>
    <td width="289" height="26" valign="top" bgcolor="#FFFFFF"><img src="images/lnava.jpg" alt="" width="289" height="26" /></td>
    <td width="12" height="408" rowspan="4" bgcolor="#FFFFFF">&nbsp;</td>
    <td width="124" height="26" valign="top" bgcolor="#FFFFFF"><img src="images/adtmt.jpg" alt="" width="124" height="26" /></td>
    <td width="11" height="408" rowspan="4" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td width="289" height="168" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="chra">
      <tr>
        <td><p>&nbsp;</p>
          </td>
      </tr>
    </table></td>
    <td width="289" height="168" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="lnava">
      <tr>
        <td><p>&nbsp;</p>
          <p>&nbsp;</p></td>
      </tr>
    </table></td>
    <td width="124" height="382" rowspan="3" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="ads">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="16" bgcolor="#FFFFFF"><img src="images/htau.jpg" alt="" width="289" height="26" /></td>
    <td height="16" bgcolor="#FFFFFF"><img src="images/lsr.jpg" alt="" width="289" height="26" /></td>
  </tr>
  <tr>
    <td width="289" height="188" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="htau">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>      </td>
    <td width="289" height="188" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="lst">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="2" colspan="7" bgcolor="#FFFFFF"><img src="images/redline.jpg" width="751" height="2" alt="" /></td>
  </tr>
  <tr>
    <td height="30" colspan="7" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="2" id="footer">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td colspan="7" bgcolor="#FFFFFF"><img src="images/redline.jpg" width="751" height="2" alt="" /></td>
  </tr>
</table>
</body>
</html>

**boogyman** · 10-29-2007, 03:43 PM

Thanks for posting that info. There are a few things I see right from the get go.

First is that you shouldn't be using the Transitional DOCTYPE as it was created like 10 years ago when CSS was first coming of age. also you shouldn't be using the XHTML DOCTYPE because IE still doesnt support it, and thus you take advantage of its "improvements" instead you should use the HTML 4.01 Strict DOCTYPE.

Second is that you aren't using the proper layout schema of DIV's and CSS. Tables are designed for records and data, not page layout.

now getting to your specific question. there are a bunch of tutorial websites on the way to create proper 3 column layouts, that will be fluid and scale depending on resolution allowing for maximum accessibility.
take a look at these templates http://www.dynamicdrive.com/style/layouts/category/C9/

and also look on http://howtocreate.co.uk

those should give you a good starting point

**cbleep** · 10-29-2007, 05:37 PM

ok thanks man

**djr33** · 10-29-2007, 06:17 PM

Well, using slices without tables will be extremely difficult. It should be possible to have the page validate including the tables, though a table-less page would render faster.

**Twey** · 10-29-2007, 06:45 PM

Image slices make for fragile, inflexible pages.

**jscheuer1** · 10-30-2007, 04:39 AM

The slow load time for image slices are the images. Despite the claims often made for slices, they take longer to load than a single optimized and otherwise identical image. Absolute positioning can be used to place links and what not over the single image. This is still a poor layout technique.

As far as a table goes though, if the table is laid out with all dimensions present and accounted for, as is the case with virtually all image slice tables generated by software for that, the browser can just go right ahead and render it.

A table can validate as strict HTML 4.01 if all of its attributes (except colspan and rowspan, which are valid strict) are removed and rendered as valid style property/value pairs. This will even give it a rendering speed boost if the:

table-layout:fixed;

property/value is assigned to the table itself.

Slices still have several drawbacks besides the time it takes to load the images (most of these also apply to the single image alternative I mentioned). Font sizes are inflexible, as is the overall size of the layout area. Unless cleverly designed, slices are inaccessible for the blind and those with images disabled. Slices are hard to edit once setup and, for complex layouts, tax the limits of many of the programs designed to produce them.

**djr33** · 10-30-2007, 05:11 AM

If you use slices properly, it can be much smaller than a full image; for example, as is common with layouts, a solid color region can be replaced by a background color, and that's a chunk of image data gone; additionally, it allows mixing formats, such as gifs for simple parts of the image and jpgs for photo regions.
However, slices certainly CAN be misused, and are, frequently.

**jscheuer1** · 10-30-2007, 05:40 AM

Originally Posted by djr33

If you use slices properly, it can be much smaller than a full image; for example, as is common with layouts, a solid color region can be replaced by a background color, and that's a chunk of image data gone; additionally, it allows mixing formats, such as gifs for simple parts of the image and jpgs for photo regions.
However, slices certainly CAN be misused, and are, frequently.

Yes and no, probably no. I imagine that mixing of formats might be beneficial to overall byte load, but with modern image optimizing techniques, certain regions of an image can be more compressed than others.

No matter what you do, once you start slicing up images, you add to their byte load because each slice requires header and other generic code of the format. You can use background color for solid regions, but in tests I ran, this didn't make up for the bytes required by each separate image. Remember, in one large image, a plain area can be represented by very few bytes, generally less than it takes to write:

Code: