Colocar 2 bordes a un solo div, podré hacerlo?

marcosr · #1 (**permalink**) 02/04/2007, 15:38

Hola, estoy intentando hacer lo que Yahoo answers hace con los avatars (imágenes de los usuarios) pero no lo he logrado aún.

Les dejo una página cualquiera de Yahoo answers para que vean lo que digo:

What kinds of pet food were not affected by the recall?

Como pueden ver Yahoo lo realiza agregando un borde blanco a la imágen y luego un borde negro mediante CSS a el div que contiene la imágen pero yo no quiero agregar un borde blanco a las imágenes, quiero ponerle 2 bordes a un div o 1 borde blanco a 1 div y uno negro a otro div que lo contenga, cualquier otro modo es aceptado también.

Muchas gracias de antemano.

floren · #2 (**permalink**) 03/04/2007, 14:41

Hola marcosr, hay una propiedad que se llama padding: Creas un div con el borde negro y fondo blanco y un padding a tu gusto.

Código HTML:

.cajafoto{
   border: 1px solid #CCCCCC;
   padding: 5px;
   background-color: #FFFFFF;
}

No son dos divs, sino uno al cual se le ve el borde negro y algo de fondo blanco. Ojalá te sirva.

AlZuwaga · #3 (**permalink**) 03/04/2007, 14:52

Hola, no son dos bordes sino uno. Y lo logran de la siguiente manera:

Código HTML:

<img width="48" height="48" border="0" align="middle" src="http://l.yimg.com/img.avatars.yahoo.com/users/1ffG0nN__AAEB4ISu6BcXAw==.medium.jpg" class="picture" style="width: 48px; height: 48px;"/>

Fijate que es una imagen que tiene un class llamado picture que por un lado tiene un borde de 1px y por el otro un padding de 2px.

Código:

.picture { border:1px solid #999;padding:2px;margin-bottom:3px; }

Saludos

marcosr · #4 (**permalink**) 03/04/2007, 15:31

A decir verdad, no había revisado el código, simplemente supuse ya que al mirar la imágen sola en Firefox me pareció que tenía un marco blanco. Jaja Vale la experiencia.

Por otro lado no se me había ocurrido hacer padding + borde y era lógicamente la mejor opción.

Agradezco mucho toda la ayuda brindada !

Un abrazo