Eliminating Image Map for Easier CSS

This is what Adobe Fireworks Wysiwyg for the Slice Tool. It’s really cool, but I can’t use all this code to just do a rectangle on this. Can you help me accomplish this?

Currently:


<!-- fwtable fwsrc="header.png" fwpage="Page 1" fwbase="headerslice" fwstyle="Dreamweaver" fwdocid = "1957171909" fwnested="0" -->
  <tr>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="87" height="1" border="0" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="464" height="1" border="0" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="84" height="1" border="0" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td>
  </tr>
  <tr>
    <td colspan="3"><img name="headerslice_r1_c1_s1" src="style/headerslice_r1_c1_s1.jpg" width="635" height="19" border="0" id="headerslice_r1_c1_s1" alt="" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="19" border="0" /></td>
  </tr>
  <tr>
    <td rowspan="2"><img name="headerslice_r2_c1_s1" src="style/headerslice_r2_c1_s1.jpg" width="87" height="107" border="0" id="headerslice_r2_c1_s1" alt="" /></td>
    <td><img name="headerslice_r2_c2_s1" src="style/headerslice_r2_c2_s1.jpg" width="464" height="80" border="0" id="headerslice_r2_c2_s1" usemap="#m_headerslice_r2_c2_s1" alt="" /></td>
    <td rowspan="2"><img name="headerslice_r2_c3_s1" src="style/headerslice_r2_c3_s1.jpg" width="84" height="107" border="0" id="headerslice_r2_c3_s1" alt="" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="80" border="0" /></td>
  </tr>
  <tr>
    <td><img name="headerslice_r3_c2_s1" src="style/headerslice_r3_c2_s1.jpg" width="464" height="27" border="0" id="headerslice_r3_c2_s1" alt="" /></td>
    <td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="27" border="0" /></td>
  </tr>
</table>
<map name="m_headerslice_r2_c2_s1" id="m_headerslice_r2_c2_s1">
  <area shape="poly" coords="22,49,36,18,45,9,57,2,60,8,56,17,54,25,52,32,53,38,55,33,57,28,63,29,64,32,65,36,63,42,59,47,55,50,57,53,59,57,63,59,66,58,68,53,68,49,67,46,66,43,65,37,69,37,70,31,71,23,74,16,79,11,82,7,83,10,83,15,87,11,92,8,96,8,100,10,104,15,106,22,106,27,104,34,99,43,95,50,91,55,95,55,100,53,101,47,103,39,107,35,112,33,117,34,121,31,125,31,139,29,145,28,150,27,150,23,151,13,151,13,152,10,163,0,164,6,164,15,163,24,166,26,171,24,177,24,181,24,185,23,192,24,202,24,212,24,220,28,222,31,228,28,234,28,244,28,252,28,258,36,262,28,264,24,271,22,278,23,280,28,280,32,285,30,292,29,296,28,303,28,313,30,322,29,340,30,345,25,352,24,359,24,365,27,370,30,374,30,381,30,390,29,397,29,406,30,460,30,464,36,464,44,460,52,450,54,192,54,184,56,176,55,170,58,164,57,156,60,151,59,144,61,137,59,132,62,128,63,116,63,104,64,97,66,90,68,84,66,78,70,70,70,63,72,54,70,50,65,44,59,42,56,32,58,30,66,28,70,22,77,14,80,6,78,1,73,0,67,3,62,9,64,14,65,13,59,16,53,22,49" href="javascript:;" alt="" onmouseout="MM_swapImage('headerslice_r2_c2_s1','','style/headerslice_r2_c2_s1.jpg',1);"  onmouseover="MM_swapImage('headerslice_r2_c2_s1','','style/headerslice_r2_c2_s4.jpg',1);"  />
</map>

Which right here is a perfect example of what’s WRONG with using tools like fireworks – spacer gif’s, tables for layout, presentational images in the markup, name attributes on elements that don’t have a name attribute, no alt text, attributes like border that have no business in HTML after 2001, and nothing remotely resembling content anywhere to be found. That people even deploy websites with code like that is outright shameful – but again the only thing from Adobe that can be considered professional grade tools are the people promoting their use.

It’s near impossible to say what the proper content for the page is, and therein the proper markup. What I can tell you is that you have the wrong markup for ANY page.

Without the CSS or the images being used, we can’t tell you what your HTML or CSS should be… This is a perfect example of why drawing a pretty picture and slicing it up is the road to failure at web design… as there’s no rhyme nor reason to the code you presented.

So… can we see what it is Fireworks made this mess from?

Yes, I realize it’s wrong. It’s Fireworks CS4.

… and can we see what it is fireworks made this mess FROM? As in the source image you are trying to turn into a page?

We can’t tell you what the proper markup for the section is if you don’t show us what the content is. Right now you’ve shown us no content to build actual useful/meaningful HTML from.

As Jason said we’d need to know what its supposed to look like before we can offer some real help.

If you just want a background image with some text on top and have the whole thing clickable then just do this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
    width:300px;/* or whatever is needed */
    height:300px;/* or whatever is needed */
    background:url(image.gif) no-repeat 0 0;
}
.test a {
    display:block;
    width:300px;
    height:300px;
}
</style>
</head>
<body>
<div class="test"><a href="#">Some text</a></div>
</body>
</html>


Here is what the image is supposed to look like. I just bought the Sitepoint Ebook for HTML/CSS basics.

I believe I gave you some code for this in a previous thread?

Never mind - you can do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.logo, .logo a,.logo span {
    width:635px;
    height:126px;
    display:block;
    text-decoration:none;
    text-align:center;
    line-height:126px;
    font-size:200%;
    overflow:hidden;
    position:relative;
}
.logo span {
    position:absolute;
    top:0;
    left:0;
    background:url(images/atlanta.jpg) no-repeat 0 0;
}
</style>
</head>
<body>
<h1 class="logo"><a href="#">Atlanta Review Group<span></span></a></h1>
</body>
</html>