Ver Mensaje Individual
  #19 (permalink)  
Antiguo 15/12/2011, 15:33
kseso?
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 11 meses
Puntos: 539
Respuesta: Marco "outerglow" para una imagen

@emprear:
creo que no me expliqué bien.

No me refería a que fuese correcto o no (en función de qué doctype se declare) su propuesta.
Era una manifestación de mis preferencias. O de lo que yo creo que es más acertado.
Soy de los que opinan que todo aquello que sea contenido (información) debería colocarse en el html.
Y todo aquello que sea ornamental (parte del layout o maquetación) vía css.
Así que como yo veo esa imagen como parte de la información facilitada a los posibles compradores de la "oferta" por eso mi enfoque a que esté vía img src.

A lo 2ª que decía sobre tantos #id´s como ofertas mostradas (para poder poner una imagen distinta en cada oferta) es porque presupuse que no sólo habrá 1 oferta (y siempre la misma). Por esto mismo me refería al uso de listas.
Vamos, que mi propuesta era para el siguiente caso:



La imagen sin redimensionar por el foro para que se aprecie un poco mejor el glow: http://img543.imageshack.us/img543/783/glowcss.jpg

El css, ahora ya con un poco más de tiempo para lograr el glow, es básicamente el mismo de mi anterior comentario:
Código CSS:
Ver original
  1. a.pic_detalle {
  2.     display: block;
  3.     float: left;
  4.     margin-right: 10px;
  5.     position: relative;
  6. }
  7. a.pic_detalle::after {
  8.     background: transparent;
  9.     box-shadow: 0 0 10px 10px #CFFFB9 inset;
  10.     content: "";
  11.     left: 0;
  12.     position: absolute;
  13.     right: 0;
  14.     top: 0;
  15.     bottom: 0;
  16.     z-index: 5;
  17. }
Y el marcado con listas:
Código HTML:
Ver original
  1. <dl id="novedades">
  2.     <dt>NOVEDADES</dt>
  3.       <dd>
  4.         <a class="pic_detalle" href="detalle.php"><img src="loast-tags.jpg" width="158" height="119" class="img_left" alt="alt" /></a>
  5.         <p> LOREM IPSUM DOLOR SIT AMET.</p>
  6.         <a class="more_info" href="#">Más Información</a>
  7.        </dd>
  8.        
  9.       <dd>
  10.         <a class="pic_detalle" href="detalle.php"><img src="301923114.jpg" width="158" height="119" class="img_left" alt="alt" /></a>
  11.         <p> LOREM IPSUM DOLOR SIT AMET</p>
  12.         <a class="more_info" href="#">Más Información</a>
  13.        </dd>
  14.        
  15.       <dd>
  16.         <a class="pic_detalle" href="detalle.php"><img src="t0alt.jpg" width="158" height="119" class="img_left" alt="alt" /></a>
  17.         <p> LOREM IPSUM DOLOR SIT AMET</p>
  18.         <a class="more_info" href="#">Más Información</a>
  19.        </dd>
  20.  </dl>

Que lo bueno de los enfoques distintos es que se encuentras diferentes soluciones y así se puede escoger.