2 row each 4 pictures and 4 titles

[egturnkey]

Hello dear friends,

 

How can i write the html code doing this as show

 

 

2 row on each 4 pictures below it 4 titles

 

thank you so much for helping

[prestonwinfrey]

Ideally, you would use divs and position them accordingly via CSS.

 

An easier approach would be to create a table as such:

 

<table>
  <tr>
    <td>Pic</td>
    <td>Pic</td>
    <td>Pic</td>
    <td>Pic</td>
  </tr>
  <tr>
    <td>Title</td>
    <td>Title</td>
    <td>Title</td>
    <td>Title</td>
  </tr>
  <tr>
    <td>Pic</td>
    <td>Pic</td>
    <td>Pic</td>
    <td>Pic</td>
  </tr>
  <tr>
    <td>Title</td>
    <td>Title</td>
    <td>Title</td>
    <td>Title</td>
  </tr>
</table>

[haku]

HTML:

<ul id="pic_list">
  <li>
    <img />
    <p>title</title>
  </li>
  <li>
    <img />
    <p>title</title>
  </li>
  <li>
    <img />
    <p>title</title>
  </li>
  <li>
    <img />
    <p>title</title>
  </li>
  <li class="fourth">
    <img />
    <p>title</title>
  </li>
  <li>
    <img />
    <p>title</title>
  </li>
  <li>
    <img />
    <p>title</title>
  </li>
  <li>
    <img />
    <p>title</title>
  </li>
</ul>

CSS:

#pic_list
{
  list-style:none;
}
#pic_list li
{
  float:left;
  margin:0;
  padding:0;
  width: __px; // set this as the width of your images
}

#pic_list li.fourth
{
  clear:left;
}

#pic_list li p
{
  text-align:center;
}