Foros del Web » Creando para Internet » CSS »

Como hacer esto?

Estas en el tema de Como hacer esto? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/09/2006, 14:17
 
Fecha de Ingreso: julio-2006
Mensajes: 46
Antigüedad: 11 años, 5 meses
Puntos: 0
Como hacer esto?

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?
  #2 (permalink)  
Antiguo 22/09/2006, 14:30
 
Fecha de Ingreso: junio-2006
Mensajes: 133
Antigüedad: 11 años, 6 meses
Puntos: 5
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>
.
.
.
.
  #3 (permalink)  
Antiguo 22/09/2006, 15:41
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
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.
__________________
| Cabeza De Raton |
  #4 (permalink)  
Antiguo 22/09/2006, 16:38
Avatar de praetor2004  
Fecha de Ingreso: julio-2004
Ubicación: Bogotá - Colombia
Mensajes: 90
Antigüedad: 13 años, 4 meses
Puntos: 0
Usando listas desordenadas y CSS

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;
}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:45.