JMiur [E]

¿Qué son las cajas de mensajes?

Seguramente los habrán visto muchas veces. Tal vez es difícil de explicar, lo mejor es mirarlas:


Fundamentalmente, se utiliza para mostrar textos resaltados, diferenciados del resto y suele haber varios modelos, uno para cada tipo de información.

Hacerlos no es difícil y si usamos CSS, podemos generar varios, transformarlos en clases y utilizarlos cuantas veces los necesitemos sin tener que escribir mucho código. Básicamente, lo que necesitamos es establecer las propiedades y tener un conjunto de imágenes o íconos representativos

Como en Janko at Warp Speed ya hay un artículo bastante claro al respecto, vamos a usarlo y ahorrarnos trabajo.


Los mensajes, los colocaremos en un DIV (o cualquier etiqueta de bloque) y la clase tendrá una imagen de fondo que, en este caso, será un CSSGIF transparente de 32x32 a la que posicionaremos 10 pixeles a la izquierda y centraremos verticalmente. Eso, lo hacemos con estas propiedades:

background-repeat: no-repeat;
background-position: 10px center;

Para que el texto se separe de los bordes y no se superponga con la imagen, agregamos la propiedad padding:

padding:15px 10px 15px 55px; /* arriba derecha abajo izquierda */

Así, dejamos un espacio de 15 pixeles arriba y abajo, 10 pixeles a la derecha y lo separamos mucho de la izquierda, tanto como sea necesario para que la imagen quede intacta.

Lo ideal es crear clases con nombres que recordemos con facilidad y las propiedades comunes las agrupamos. Por ejemplo:
.informacion, .descarga, .referencia {
background-position: 10px center;
background-repeat: no-repeat;
font-family: Tahoma;
font-size: 14px;
margin: 10px 0px;
padding: 15px 10px 15px 55px;
}
Y luego, los detalles individuales de cada una:
.informacion {
background-color: #F7F79C; /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #002299; /* el color del texto */
}
.descarga {
background-color: #94F79C; /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #000000; /* el color del texto */
}
.referencia {
background-color: #6B9CFF; /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #FFFFFF; /* el color del texto */
}
Las clases, las usamos en cualquier etiqueta "contenedora":
<div class="informacion">el contenido del mensaje</div>

<p class="descarga">el contenido del mensaje</p>

De esta manera, la caja del mensaje se adaptará automáticamente al tamaño del contenido y no tendremos que preocuparnos por su altura:

MODELO 1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 2: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 3: Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Como son etiquetas de bloque, ocupan todo el ancho, si quisiéramos que fueran más chicas y aparecieran centradas deberíamos agregar las propiedades correspondientes:

width:80%; /* el ancho puede ser un porcentaje o una medida fija */
margin-left: auto; /* centrada con respecto a la izquierda */
margin-right: auto; /* centrada con respecto a la derecha */

Esto, lo podemos poner en las clases o, hacer variaciones específicas en alguna etiqueta:
<div class="referencia" style="width: 80%; margin-left: auto; margin-right: auto;">
el contenido del mensaje
</div>
MODELO 4: Ut wisi enim ad minim veniam.

MODELO 5: Ut wisi enim ad minim veniam.

MODELO 6: Ut wisi enim ad minim veniam.

Le podemos agregar bordes:

border:1px solid #C7C7C7;
border:3px ridge #FFAD08;

MODELO 7: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 8: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

O poner una al lado de otra si les damos anchos pequeños y las hacemos flotar:
<div class="referencia" style="float: left; width:150px;">
el contenido de una
</div>
<div class="descarga" style="float:left;width:150px;margin-left:5px;">
el contenido de otra
</div>
<div style="clear:both;"></div>
MODELO 9: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
MODELO 10: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.

12 comentarios:

Monoblock  

Hola me gustaria saber como hago para poner una galeria de imagenes con menu como en esta pagina.

http://www.bloody-disgusting.com/index.php

o parecido como las de 3djuegos o Meristation que es similar.

espero una respuesta gracias.

Responder
Graciela  

Buen día!!!, siempre haces entradas excelentes. Me has sacado la incóngnita de cómo se llaman, las buscaba como letreros de distintas maneras sin resultados, saludos!!!

Responder
Anónimo  

Muy bueno

Responder
ARETINO  

¿Habría posibilidades de implementarlos en los comentarios de blogger. Uno para el administrador del sitio y otro para los que comentan?

Responder
JMiur  

Monoblock:
Lo que se ve en esa página no es una "galería de imágenes" sino un archivo de Flash, un SWF.

Graciela:
Me alegro que te sea úitl :)

Aretino:
Lo veo inconvenientes en hacerlo. Habría que ver cómo pero algo de eso se puede ver en estos posts: [1 2 3]

Detectar quién comenta y crear un estilo especial para esos comentarios es relativamente sencillo.

Responder
Graciela de Palomas  

JMIUR visitando las cajas nuevamente!!!...un ejemplo de lo que yo te comentaba de Downloads, es cuando dices:
"tener un conjunto de imágenes o íconos representativos" DESCARGAR...eso es lo que no puedo hacer más descargar...el programa se venció :S pero si hace tan solo unos meses que el chiquillo me cobró un montón de pesos jajaja...es programita de descarga tengo que comprarlo :S o puede ser descargado gratuitamente :D...te estoy poniendo caritas para no decir ninguna mala palabra...
Besos y allá voy a inventarme una cajita!!!

Responder
JMiur  

No sé cuál programa de descargas usas ¿Quieres que te envie el ZIP por mail?

Responder
deni  

hola, bueno, esque tengo un problema y me gustaria que me ayudaras,bueno, esque acabo de cambiar la plantilla, antes tenía una de blogger y ahora una de otra página y cuando la puse me apareció el título a un lado, podras verlo si entras en mi blog (http://www.denisa-mimundo.blogspot.com/)
y no sé como ponerlo en el medio, porfavor ayudame .
por cierto me sierve mucho tu información

Responder
JMiur  

Si se trata del tçitulo del blog (Mi mundo) lo veo centrado. No sé si es ese el problema. Lo único que noto erróneo es que deberías configurar las fechas para que funcione el calendario que se muestra al lado de los títulos de las entradas. Para eso, debes fijarte en la página del autor. Allí dbe estar indicado el tipo de formato de fecha que debes usar.

Responder
Dag  

Muchas gracias por la info! La usaré en mi nuevo sitio.

Saludos

Responder
Dani López  

Hola JMiur!
No entiendo en que parte del blog tengo que insertar los códigos para crear estos mensajes con estilo...

En uno de los blogs que gestiono he puesto una marquesina utilzando pero no se visualiza utilizando Explorer, y al ver estos mensajes creo que son más efectivos.

El blog donde tengo la marquesina es: http://clubsaloufs.blogspot.com
Mi blog personal es: http://danilopezsalou.blogspot.com


Muchas gracias de antemano!

Responder
JMiur  

El CSS lo puedes agregar en la plantilla, junto con el resto, antes de </:skin>

El HTML en cualquier parte, justo allí donde quieras que se meustre el mensaje.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR