Hace unos días me llegó un correo (por cierto, sin firmar :-S) en el que me preguntaban como crear una especie de cajitas para incluir avisos, notas o simplemente para resaltar parte de un texto.
Pensando y pensando, dí con un modelo que se ajustaba perfectamente a lo que este usuario deseaba:
Para insertarla en una entrada utiliza el siguiente código:
<fieldset>
<legend>Aquí escribe el título</legend>Escribe aquí el contenido de la nota.
</fieldset>
Tal vez quieras darle un poquito de estilo a la cajita...
En ese caso debes ir jugando con los estilos disponibles, que se agregarán en la línea de <fieldset> utilizando el atributo style.
Entre muchas cosas, lo principal que podremos decorar es el borde. Para ello utilizaremos la definición de CSS adecuada. Lo pondríamos así:
<fieldset style="border: 1px dashed #99CC99; width: 367px;">
<legend>Aquí escribe el título</legend>Escribe aquí el contenido de la nota.
</fieldset>
Cambiando el grosor del borde (señalado en naranja) el estilo (señalado en verde) y el color (señalado en rojo).
La línea width: 367px; que aparece a continuación de la línea del borde es la que indica el grosor de la caja. Puedes aumentarlo o disminuirlo cambiando las cifras numéricas.
Es posible añadir un fondo a la caja. En ese caso, agregaremos la propiedad background dentro de las comillas de la línea style, como se muestra a continuación...
<fieldset style="border: 1px dashed #99CC99; background: #99CCCC; width: 367px;">
<legend>Aquí escribe el título</legend>Escribe aquí el contenido de la nota.
</fieldset>
Debes agregar la línea background (señalada en verde) en el código e incluir el color de fondo (señalado en rojo).
También puedes agregar un fondo de imagen a la caja. En ese caso usa la siguiente línea, en lugar de la anterior:
background:#FFFFFF url(URL DE TU IMAGEN) repeat;
y sustituir URL DE TU IMAGEN por la dirección de la imagend e fondo.
Notas:
Para conseguir el código de cualquier color, usa la tabla de colores.
Para ver más estilos de borde, echa un vistazo a esta entrada.
Para ver más estilos de borde, echa un vistazo a esta entrada.
¿Problemas al comentar? Utiliza 
Muy bien Jaime, avaces esta clase de HTML basico es necesario saberlo (aunque ya lo sabia) jeje
Bueno mi amigo, felicidades por el blof siempre va bien
Saludos y cuidate
GuillermoZ0009, ¡Cuánto tiempo! es cierto que siempre es bueno conocer algo nuevo en HTML. ^_^
Muchas gracias por tus felicitaciones.
Me gustó tu entrada acerca del Download helper (yo lo tenía) de Firefox.
¡Saludos!
Hola Jaime, nadamas una observacion, en tus sitios amigos me tienes como Lunix + Blogger, y es Linux mas Blogger, jeje
De nuevo un Saludo
GuillermoZ0009, es cierto, (lo escribí como lo tienes en tu cabecera) ahora lo cambio. ^_^
Impecable!!!!.Justo lo que estaba buscando!!!
Pero si pareces conectada a mi cabeza!!!!
Está genial !!!
Pero si es justo lo que necesitaba!!!.parece cosa de magia!!!!
Gracias como siempre!!!
Puede ser eso, Gra... núnca se sabe :D.
¡Gracias a ti por comentar!
Gracias Jaime
Esto también mola¡¡¡¡
Voy haciendo cosillas.
Gracias
¡Me alegro mucho, Fuentecillas! Creo que encontrarás numerosos trucos para insertar notas o cajas de texto en el blog ya que he publicado varias entradas al respecto.
Ahora simplemente falta que las decores a tu gusto ;).
Jaime, si yo quiero poner una nota en todas las entradas, necesito hacer este procedimeinto en cada entrada?. No hay alguna manera de insertar una cajita en todas las entradas?. No sé, a lo mejor pido mucho o alucino, que todo puede ser... jejejeje
Un besote
A ver si lo pongo en funcionamiento... Gracias Jaime!
Podrás personalizarlas a tu gusto. Incluso añadirle una imagen de fondo es posible. Gracias por tu comentario, Laube.
Laube, no niego que se trate de una alucinación dado que yo pensé lo mismo hace años, al introducirme en este mundo. Te comento que lo que deseas puede hacerse y además es fácil.
Pronto dispondrás de una entrada al respecto ;).