Foros del Web » Creando para Internet » CSS »

Simular td con divs

Estas en el tema de Simular td con divs en el foro de CSS en Foros del Web. Buenas tardes amigos, creo que el título no es demasiado descriptivo, así que paso a explicarlo en detalle. Resulta que estoy haciendo un boletín informativo, ...
  #1 (permalink)  
Antiguo 09/06/2011, 14:22
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 6 meses
Puntos: 309
Simular td con divs

Buenas tardes amigos, creo que el título no es demasiado descriptivo, así que paso a explicarlo en detalle. Resulta que estoy haciendo un boletín informativo, y me interesa que por cada noticia haya una imagen a la izquierda y el texto a la derecha a la misma altura. El ejemplo es el boletín de desarrolloweb.com.
Pues bien, traté de hacerlo aplicándole vertical-align:middle a la imagen, y todo bien, hasta que añadí un br, entonces se descuadró todo
Viendo el DOM generado, está maquetado con tablas, pero, aunque no voy a entrar a discutir esto ahora, prefiero hacerlo con divs.
Probé con display:table-cell, pero como quien oye llover.
Así que a ver a quién se le ocurre qué es lo que está pasando, o más bien como hacer para que quede como yo quiero.
Saludos y gracias desde ya :3
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #2 (permalink)  
Antiguo 09/06/2011, 14:39
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Simular td con divs

Mostrar el código que estas usando, vale más que mil palabras.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 09/06/2011, 14:46
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: Simular td con divs

No entiendo el BR donde ni porque lo añades.

Te recomiendo crear una lista.

Código HTML:
<ul>
<li>
<img src="ruta de img" alt="necesario para validar"/><span>Texto de noticia</span>
</li>
</ul> 
Más o menos armalo de ese modo, puedes crear un <A que englobe todo.

Luego ve jugando en el css con las propiedades como altura, padding del LI y el line-height para acomodar al centro las letras.

Juega, ve probando con el css hasta lograrlo.

A partir de ahi, bordes a los LI etc etc.

Saludos!.
  #4 (permalink)  
Antiguo 09/06/2011, 14:47
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 6 meses
Puntos: 309
Respuesta: Simular td con divs

Ups, siempre me pasa lo mismo
Código CSS:
Ver original
  1. #container {
  2.  height:80%;
  3.  margin:20px;
  4.  overflow:auto;
  5. }
  6.  
  7. #content {
  8.  min-height:65%;
  9.  margin-bottom:0;
  10.  padding:20px;
  11.  background:#987;
  12. }
  13.  
  14. b {
  15.  font:18px Consolas bold;
  16. }
  17.  
  18. #content .apartado {
  19.  margin-bottom:20px;
  20.  padding:5px;
  21.  background:#CC6600;
  22.  font:20px Consolas bold;
  23. }
  24.  
  25. #content .contenido {
  26.  min-height:100px;
  27.  margin-bottom:20px;
  28.  margin-left:5px;
  29.  padding:5px;
  30. }
  31.  
  32. #content .contenido .thumbnail {
  33.  min-width:100px;
  34.  height:100px;
  35.  vertical-align:middle;
  36. }
  37.  
  38. #content .contenido .texto {
  39.  height:100px;
  40.  display:table-cell;
  41. }

Código HTML:
Ver original
  1. <div id="container">
  2. <div id="content">
  3. <div class="apartado"><a name="viajes">Viajes</a></div>
  4. <div class="contenido">
  5. <img src="images/cantábrico/sendaviva.jpg" alt="Parque Sendaviva" title="Parque Sendaviva" class="thumbnail" />
  6. <div class="texto">
  7. Viaje al parque natural Sendaviva<br />
  8. <b>28 / 06 / 11</b> - Visitamos el parque natural Sendaviva, para poder admirar la belleza del entorno y los animales en todo su esplendor.
  9. </div>
  10. </div>
  11. <!-- ... -->
  12. </div>
  13. </div>
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #5 (permalink)  
Antiguo 10/06/2011, 16:52
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 6 meses
Puntos: 309
Respuesta: Simular td con divs

¿De verdad que a nadie se le ocurre cómo solucionarlo?
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #6 (permalink)  
Antiguo 10/06/2011, 17:49
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Simular td con divs

_cronos2:

Hace poco contesté algo similar, revisá este código a ver si te sirve.

http://foros.emprear.com/css/alinear.html

saludos, no seas tan impaciente
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 11/06/2011, 14:26
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 6 meses
Puntos: 309
Respuesta: Simular td con divs

Muchas gracias @emprear, me funcionó perfectamente!
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red

Etiquetas: divs, simular
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 22:44.