Coverting tabular images to CSS

HTML & CSS
1

Should I just leave it as such or could someone show me how I would go about exchanging the tables for CSS, please?

This is what I have so far in my CSS file.


#wrapper {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  text-align: center;
}

Here is the code with the tables.


<div id="wrapper">
  <!-- BANNER -->
  <table width="960" height="100" background="images/top_banner_background.jpg" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="left" valign="top"><img src="images/top_banner_left.jpg" width="345" height="100" border="0"></td>
      <td align="right" valign="top"><img src="images/top_banner_right.jpg" width="405" height="100" border="0"></td>
    </tr>
  </table>
 
  <!-- GRID & GIF -->
  <table width="960" height="100" background="images/grid.gif" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" valign="center"><img src="images/motion.gif"></td>
    </tr>
  </table>
 
  <table width="960" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" width="150">
        <img src="images/menu_top.jpg">
        <ul id="Menu1" class="MM">
          <li><a href="#[">Home</a></li](http://www.wynnesports.com/">Home</a></li)>
          <li><a href="#">Forums</a></li>
          <li class="NOSEPARATOR"><a href="#">Admin</a></li>
        </ul>
      </td>
      <td width="660" valign="top">
          {{content}}
      </td>
      <td width="150" align="right" valign="top" width="150">
        <img src="images/1.jpg" /><br />
        <img src="images/2.gif" /><br />
      </td>
    </tr>
  </table>
 
</div>
2

Hey there.

The way you need to think about it is using HTML to get all the elements you need onto the webpage, and using the CSS stylesheet to move and colour and style them into place.

So for the first part, the top banner you could maybe wrap into a <div> and put the two images into that <div> ;

<div id="TopBanner">
 <img src="top_banner_left.jpg" alt="" />
 <img src="top_banner_right.jpg" alt="" />
</div>

If you’re using XHTML I believe those two images should already sit side by side, and by removing all margins as you already seemed to do, they ought to line up nicely.

But to make things even neater, how about merging those two left and right images together in your image editor (Photoshop or whatever you use) and load it onto your webpage whole? It’d be less code and it’d make styling easier too.

If that background to the top table is important, put that into the stylesheet too;

#TopBanner{background:url(top_banner_background.jpg);}

And continue with that methodology throughout. Replace tables with containers (if necessary), load images onto webpage, style them into place.

3

I had been using the two images as links to elsewhere when you hovered over them. I used to have Paint Shop that I did all my work in but don’t have anything like that now, so making them into one image isn’t possible at this time. The background image is a filler BETWEEN the two images that I used when I was using a percentage width. I really need the two images to split, one left and one right and let the background image still link them.

The reason I chose 960px for width is I want consistancy. I am not a percentage type person. I hated that aspect before and finally just had to get back to set pixels.

4

I did this and it SEEMS to work.


html, body {
  color: black;
  font: 12px verdana;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  text-align: center;
}

#TopBanner {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  background:url(images/top_banner_background.jpg);
}



<!-- BANNER -->
<div id="TopBanner">
<img style="float:left" src="images/top_banner_left.jpg" />
<img style="float:right" src="images/top_banner_right.jpg" />
</div>
5

Why will the image swarm.gif not vertical align in the center of this div?
The image size changes from time to time. The Div will always be height:100. I want this image placed directly in the middle of the DiV, both horizontal and vertical.


html, body {
  color: black;
  font: 12px verdana;
}
#wrapper {
  width: 960px;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}

#TopBanner {
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  background:url(images/top_banner_background.jpg);
}

#TopGrid {
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  background:url(images/grid.gif);
}



  <!-- GRID & GIF -->
  <div id="TopGrid">
    <img style="vertical-align:middle" src="images/swarm.gif" />
  </div>