Ver Mensaje Individual
  #5 (permalink)  
Antiguo 12/12/2010, 19:46
Portgaz
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 13 años, 3 meses
Puntos: 3
Respuesta: Convertir Tabla HTML a CSS

Cita:
Iniciado por eragas Ver Mensaje
Estimados, en una web había puesto unso anuncios como los que ven pero en HTML, o sea con tabla..., pero es necesario convertirlo a CSS con estilos inline, he estado luchando con el CSS y la verdad no me sale, si alguien me puede instruir , sería genial.
Es que con CSS puedo lograr el espacio entre anuncios de manera uniforme.



Tabla en HTML
Código HTML:
<table width="100%" border="0">
  <tr>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/1500/29443-1277299322.gif" width="200" height="125" border="0" /></a></td>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/2114/24180-1272296841.jpg" alt="" width="200" height="125" border="0" /></a></td>
  </tr>
  <tr>
    <td align="center"><a href="http://scriptmafia.org"><img src="http://s3.buysellads.com/1500/18309-1268240174.jpg" alt="" width="200" height="125" border="0" /></a></td>
    <td align="center"><a href="http://scriptmafia.org"><img src="http://s3.buysellads.com/1246383/27133-1278417830.png" alt="" width="200" height="125" border="0" /></a></td>
  </tr>
  <tr>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/2114/17919-1267845746.png" alt="" width="200" height="125" border="0" /></a></td>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://s3.buysellads.com/1616/31303-1279041711.jpg" alt="" width="200" height="125" border="0" /></a></td>
  </tr>
  <tr>
    <td align="center"><a href="http://psd.tutsplus.com"><img src="http://a.imageshack.us/img30/4701/publicidadhy.png" alt="" width="200" height="125" border="0" /></a></td>
    <td align="right" valign="bottom"><a href="http://vector.tutsplus.com/"><p style="font-family:Verdana, Geneva, sans-serif; font-size: 9px; color: #791C41"> Anuncie en esta web</p></a></td>
  </tr>
</table> 
Mil gracias,

Si esos anuncios que mencionas, van a ser dinamicos, es decir, no variara el altura debido al contenido.

O en otras palabras, va a ser una imagen fija, podrias editar la imagen, agregarle ese marco inline.
Veo que lo tiene en tablas y asi lograr que queden en posicion uniforme y relativas una de otra.

Otra manera seria agregarle un estilo al borde de las celdas.

Pero antes dejame decir que...
Las tablas fueron concebidas para representar datos de forma tabular, no porciones de una página en diferentes celdas.

Mira este pedazo de cacho. http://www.scourdesign.com/articulos/tutoriales/css/css7.php

te servira para tus anuncios ya que son datos en forma tabular

Saludos