Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Notas y más notas

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.

GuillermoZ0009 dice...

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

Jaime Trujillo Escobedo dice...

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!

GuillermoZ0009 dice...

Hola Jaime, nadamas una observacion, en tus sitios amigos me tienes como Lunix + Blogger, y es Linux mas Blogger, jeje

De nuevo un Saludo

Jaime Trujillo Escobedo dice...

GuillermoZ0009, es cierto, (lo escribí como lo tienes en tu cabecera) ahora lo cambio. ^_^

Gra dice...

Impecable!!!!.Justo lo que estaba buscando!!!
Pero si pareces conectada a mi cabeza!!!!

Gra dice...

Está genial !!!
Pero si es justo lo que necesitaba!!!.parece cosa de magia!!!!
Gracias como siempre!!!

Jaime Trujillo Escobedo dice...

Puede ser eso, Gra... núnca se sabe :D.

¡Gracias a ti por comentar!

Fuentecillas dice...

Gracias Jaime
Esto también mola¡¡¡¡
Voy haciendo cosillas.
Gracias

Jaime Trujillo Escobedo dice...

¡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 ;).

Laube dice...

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

Laube dice...

A ver si lo pongo en funcionamiento... Gracias Jaime!

Jaime Trujillo Escobedo dice...

Podrás personalizarlas a tu gusto. Incluso añadirle una imagen de fondo es posible. Gracias por tu comentario, Laube.

Jaime Trujillo Escobedo dice...

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 ;).

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo