» » Caja para tres imagenes en CSS y DIV

Caja para tres imagenes en CSS y DIV

Publicado en: Tecnología | 2

Hola afición!

Quería poner en el blog de wordpress una caja para meter tres imagenes. Según el funcionamiento de este blog, que no admite el tag table, debe hacerse con el tag div. De esta forma, primero configuramos la estructura general de la caja que albergará la página, algo como esto:

<div class="cajamensaje">
<div class="cajaizqcentro">
<h5 class="mensaje">Hueco 1</h5>
</div>
<div class="cajaizqcentro">
<h5 class="mensaje">Hueco 2</h5>
</div>
<div class="cajadcha">
<h5 class="mensaje">Hueco 3</h5>
</div>
<div class="space-line"></div>
</div>

Este código, con sus clases o al gusto, lo escribimos en el cuerpo de nuestro mensaje. En los diferentes Huecos podemos poner imágenes (img) o texto, eso es al gusto y la necesidad.

Ahora llega el turno de modificar o añadir a nuestro archivo .css el siguiente código:

div.cajamensaje{
margin: 0 auto 0 auto;
padding: 5px;
text-align: center;
width: 98%;
border-color: #dbdbdb;
border-width: 1px;
border-style: solid;
}
div.cajaizqcentro{
float: left;
margin: 0;
padding: 0;
width: 33%;
border-style: none;
}
div.cajadcha{
float: right;
margin: 0;
padding: 0;
width: 34%;
border-style: none;
}
div.space-line{
clear: both;
margin: 0;
padding: 0;
width: auto;
}
h5.mensaje{
margin: 0;
padding: 0;
text-align: center;
width: auto;
vertical-align: top;
}

Un poco largo, si, pero necesario, de otra manera obtendríamos resultados inesperados.
Adicionalmente, podemos limitar a que no exista borde en las imágenes que enlacen a su vez a un hipervínculo (a href) escribiendo en el .css de nuestro blog:

a img { border: none; }

Y de esta manera conseguimos introducir en nuestro mensaje una vistosa caja con tres imágenes.

SaludoX

2 Comentarios

  1. Mapi
    | Responder

    Magnífico truco, al fin lo he conseguido. Gracias

  2. monalcar
    | Responder

    Que raro escribes ¿no?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.