Como hacer esto?

[imagenarte]

Esta pregunta es facil.

tengo unas fotos son su correspondiente descripcion y me gustaria visualizarlas asi...

FOTO1 FOTO2 FOTO3 FOTO4
desc1 desc2 desc3 desc4


cual seria la mejor forma de hacerlo???

a mi se me ocurrio una lista asi

<ul>
<li>foto<p>texto 1</p></li>
<li>foto<p>texto 2</p></li>
<li>foto<p>texto 3</p></li>
</ul>

poniendo los li inline y limpiando las p hacia la izquierda...

alguna otra forma de hacerlo?

[Mauricio Acosta Vene]

Hola,

podrias manejar cada foto con su descripcion con una tabla, algo asi:
<table><tr><td>foto1</td></tr><td>desc 1</td</tr></table>
<table><tr><td>foto2</td></tr><td>desc 2</td</tr></table>
.
.
.
.

[Calisco]

es que es menos codigo html utilizando <ul><li> que tablas. Por ahi tendrias que ver cuantas fotos vas a mostrar en pantalla. Yo por lo menos soy muy esterico del tamaño del archivo html generado.
Saludos.

[praetor2004]

Y si usás éste codigo, yo lo uso para mis galerias de imagenes y funciona bien (ojo que en IE 6.0 no funciona el img:hover, tendrias que buscar una solucion alternativa en otro lado) en Firefox y Opera. Juega con los margin y padding de acuerdo al espacio que tengas.

Obviamente tienes que crear una lista desordenada para ello.

Código:

#gallery{
    padding: 10px;
    width: 500px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}

#gallery ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#gallery li{
    display: inline;
    margin: 0px;
    padding: 0px;
}

#gallery h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
margin-top: 20px;
}

#gallery img {
margin: 5px;
padding: 2px;
border: 1px solid #CCCCCC;
}

#gallery img:hover{
margin: 5px;
padding: 2px;
border: 1px solid #C50E0E;
background-color: #EFD41E;
}