whats the best way? layout CSS

[benluke4]

Hi,

Was wondering whats the best way to achieve this table layout using CSS?

        <table width="80%" border="0" cellspacing="0" cellpadding="2">
          <tr> 
            <td width="24%"><img src="images/redstar.gif" width="19" height="19"></td>
            <td width="76%"><a class="but" href="#">Home</a></td>

          </tr>
          <tr> 
            <td><img src="images/redstar.gif" width="19" height="19"></td>
            <td><a class="but" href="#">Menu</a></td>
          </tr>
          <tr> 
            <td><img src="images/redstar.gif" width="19" height="19"></td>
            <td><a class="but" href="#">Home Delivery</a></td>
          </tr>

          <tr> 
            <td><img src="images/redstar.gif" width="19" height="19"></td>
            <td><a class="but" href="#">Location</a></td>
          </tr>
        </table>

Have been trying to work out the best way but i keep over complicating it.

any ides?

Thanks

Ben

 

[Vragabond]

Use unordered list and style it correctly. See this article for some guidance:

http://www.alistapart.com/articles/taminglists/

 

[benluke4]

thanks

much appreciated

 

[Biffy13]

You could try something along the lines of:

<style type="text/css">
<!--
ul {
list-style-image: url(images/redstar.gif);
}
ul li a {
/*value of the but class, or keep the class in the a tag and ignore this*/
}
-->
</style>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Home Delivery</a></li>
<li><a href="#">Location</a></li>
<ul>

This example is based on Vragabond's answer.

 

[benluke4]

nice one thanks again