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
Mapi
Magnífico truco, al fin lo he conseguido. Gracias
monalcar
Que raro escribes ¿no?