mimic table rows

[flann]

I'm from the old school way of making websites using tables. I'm trying to show an icon and then right underneath the icon show a title. Similar to how it is on your desktop. I'm pulling the data out of a database, so I have no idea how many items there will be.

Normally I would use tables for this, however, people are always telling me I should learn to use just css, so i'm trying. I was able to use a span element to simply show the icon and it worked great, but I can't figure out where to look to try and get the title to align nicely underneath. I'll show you my "table way".

Code: Select all

<table>
 <tr>
  <td>
    <table>
     <tr>
      <td><img src='image1.gif'></td>
     </tr>
     <tr>
      <td>Title1</td>
     </tr>
    </table>
  </td>
  <td>
    <table>
     <tr>
      <td><img src='image2.gif'></td>
     </tr>
     <tr>
      <td>Title2</td>
     </tr>
    </table>
  </td>
  <td>
    <table>
     <tr>
      <td><img src='image3.gif'></td>
     </tr>
     <tr>
      <td>Title3</td>
     </tr>
    </table>
  </td>
 </tr>
 <tr>
  <td>
    <table>
     <tr>
      <td><img src='image4.gif'></td>
     </tr>
     <tr>
      <td>Title4</td>
     </tr>
    </table>
  </td>
  <td>
    <table>
     <tr>
      <td><img src='image5.gif'></td>
     </tr>
     <tr>
      <td>Title5</td>
     </tr>
    </table>
  </td>
  <td>
    <table>
     <tr>
      <td><img src='image6.gif'></td>
     </tr>
     <tr>
      <td>Title6</td>
     </tr>
    </table>
  </td>
 </tr>
</table>

i would really appreciate a good css explanation on how to accomplish this.

Thank you

[karinne]

Well ... the simplest way would be

HTML

Code: Select all

<div class="icons">
    <img src="image.jpg" width="" height="" alt="" /><br />
    Title1
</div>

CSS

Code: Select all

.icons {
   text-align: center;
   float: left;
   width: 200px;
   height: 200px;
}

Something like this ... haven't tested but that should be close enough with a few modifications like the width and height for the class. You might want to change those.

[flann]

wouldn't it break after each div? Or is that what the float:left is eliminating?

[karinne]

You got it

[Ryan Fait]

Just a note, if you want only three items per line, you can add an extra class to every third <div> so it will wrap without a container.

Code: Select all

<div class="icon">
    <img src="image1.gif" />
    Title
</div>
<div class="icon">
    <img src="image2.gif" />
    Title
</div>
<div class="icon clear">
    <img src="image3.gif" />
    Title
</div>

Code: Select all

.icon {
    width: 100px;
    text-align: center;
    float: left;
}
.clear {
    clear: left;
}

[Lchad]

That's a good tip. Had not thought of that!