Elementos en Listas

[vitinx]

Buenos dias.

Como es mi primer mensaje, me presento. Mi nombre es VIctor, soy fotográfo y vengo aqui ya que estoy creando mi propia pagina web pero necesito ayuda con CSS.

Sin mas dilación, queria preguntaros una duda. Tengo el siguiente código, que hace que se me presente en pantalla un listado con mis galerias fotográficas.


<style type="text/css">



UL.thumbs LI {
height: 250px;
height: 250px;
}

DIV.pagbar {
float: right;
border-style: solid;
border-width: 20px;
}

</style>

<h2>Colecciones</h2>
[[gallery_collection_list style=list name size=200 num_galleries]]

<div class="clear" style="height:20px"></div>

<h2>Reportajes Fotográficos</h2>

<div class="pagbar">


<table class="pag cell">
<tr>
<td class="pagSel">[[page_select widget=gallery_list]]</td> <td>[[page_previous text="&lt;&nbsp;ANTERIOR" widget=gallery_list]]</td>
<td>[[page_next text="SIGUIENTE&nbsp;&gt;" widget=gallery_list]]</td>
</tr>
</table>
</div> <div class="clear"></div>

[[gallery_list style=list name size=200 num_images]]
<div class="clear" style="height:20px;"></div>


Lo que he puesto en negrita y cursiva es un widgetr que te facilita los diseñadores de la pagina para darle un estilo a tu listado de una manera sencilla pero tambien con muy poco control. El Aspecto con este código es el siguiente:

http://www.victorgonzalo.com/gallery-list

Lo que pasa es que por mas que meto codigo ahi entre lineas (así segun he ido investigando), todos los cambios se me generan a nivel de la lista global y no elemento por elemento. Ejemplo, si le pongo margin-top: 100px; me aplica el margen al listado completo y no al elemento por elemento.

¿Podriais por favor decirme como tendria que hacerlo para que las propiedades que yo quiera establecer, sean a nivel de elemento por elemento de la lista?

Siento si no me explico bien, pero no tengo ni pajolera de CSS.

Muchas gracias.

[kseso?]

Por todos los demonios del Css, ¿quién hizo el marcado html y cuándo?

Código HTML:

<li>
    <table cellspacing="0" cellpadding="3" border="0">
      <tbody>
      <tr>
             <td width="210" valign="top" align="center"><a href="http://victorgonzalo.photoshelter.com/gallery/G00007fmFoemTRsA/">
             <img border="0" title="Turquia" alt="Turquia" src="http://cdn.c.photoshelter.com/img-get/I0000sonrZHvUrgU/t/200/I0000sonrZHvUrgU.jpg"></a>
         </td>
             <td valign="top" class="gallery_list_description">
                         <a class="gallery_list_name" href="http://victorgonzalo.photoshelter.com/gallery/G00007fmFoemTRsA/">Turquia</a>
               <br>
                                    <span class="gallery_list_num_images">8 images</span>
               <br>
             </td>
      </tr>
      </tbody>
  </table>
</li>
 

Eso para cada | li |

Pero bueno, eso no era lo preguntado.

¿Qué quiere hacer? ¿Separar un poco más cada imagen de la siguiente en esa página?
Añada en su hoja de estilos base.css lo siguiente:

Código CSS:

ul.thumbsList.gallery_list li {
    margin-bottom: 10px;
}
 

[vitinx]

Mil GRACIAS!!!

Me acabas de hacer dar un paso de gigante.

Ahora ya le estoy poniendo bordes, colores.... y dejandolo mas o menos como a mi me gusta y siguiendo un tuto que he encontrado por la web.

Otra pregunta. Sería posible definir la distancia entre la imagen y el propio borde del elemento de la lista. Es que he puesto bordes a cada elemento pero me quedan muy cerca de la imagen.

Muchas gracias de antemano de nuevo.

[kseso?]

Sí claro que sería posible.

Pero mejor hago una cosa.
Pase por www.librosweb.es
Tiene unos manuales de css (y html) que le van a ser de utilidad. Versión .pdf para descargar o versión de consulta en línea.
Écheles un vistazo y si no encuentra como separar elementos (margin o padding según convenga) comenta de nuevo.

[ZoroRoronoa]

a la imagen (elemento <img>) ponle un padding.

img {padding: 10px;}

[vitinx]

Gracias por las respuestas, tanto por el libro como por las indicaciones.

He estado siguiendo el libro de CSS que he podido descargar en esa página web y la verdad que he avanzado. Como soy de los que les gusta investigar, me gustaría que me respondieráis a un pregunta para que yo pueda encontrar la solucion.

Estas cajas con márgenes que he puesto y que tienen un padding y todo eso... van una serie de elementos dentro (imágenes, textos...) que me gustaría customizar, pero no se como se llaman esos elementos de dentro. Por ejemplo, hay una imágen a la que le quiero poner un borde y un tamaño concreto. ¿Como se llaman esos elementos? Asi you podría asignarles las propiedades.... segun mi criterio.

Muchas gracias por vuestra respuesta

[kseso?]

Sinceramente, antes de seguir aplicando estilos y en lo que se informa algo más sobre el tema, optaría por limpiar código html.
Fíjese, frente a lo que le copié en #2 (que es su código actual), la diferencia con lo siguiente:

Código HTML:

<ul class="thumbs collections_galleries_list">
  <li>
      <a href="http://victorgonzalo.photoshelter.com/gallery/G00007fmFoemTRsA/"><img border="0" title="Turquia" alt="Turquia" src="http://cdn.c.photoshelter.com/img-get/I0000sonrZHvUrgU/t/200/I0000sonrZHvUrgU.jpg" /></a>
      <h3>Turquía <span>8 fotos</span></h3>
 </li>
 

Y en el css algo tan sencillo como:

Código CSS:

ul.thumbs.collections_galleries_list {}
ul.thumbs.collections_galleries_list li {}
ul.thumbs.collections_galleries_list a {}
ul.thumbs.collections_galleries_list img {}
ul.thumbs.collections_galleries_list h3 {}
ul.thumbs.collections_galleries_list h3 span {}
 

Debería ver si corresponde un h3 u otro.

Y llendo un paso más allá, yo optaría por una lista de definición (dl, dt, dd) Pero esto quizás sea mejor dejarlo por el momento.

Por cierto, mucho y a mejor a cambiado la apariencia de la página de ayer a hoy.

[vitinx]

Gracias por lo de que la página tiene mejor aspecto, jeje. Ya digo que algo voy avanzando.

Entiendo lo primero que me pones, el tema de reducir código. Pero no entiendo lo segundo que me dices. ¿Para que es esto?:

ul.thumbs.collections_galleries_list {}
ul.thumbs.collections_galleries_list li {}
ul.thumbs.collections_galleries_list a {}
ul.thumbs.collections_galleries_list img {}
ul.thumbs.collections_galleries_list h3 {}
ul.thumbs.collections_galleries_list h3 span {}

Perdon por mi ignorancia, pero es que me pierdo en seguida. Creo que es para los elementos de dentro del listado UL.thumbs, pero es que no se como darle valores, como por ejemplo, el color del texto... menudo lio tengo, jeje.