CSS: Trabajando con espacios en blanco

Cuando trabajamos con espacios en blanco sobre html lo normal es que nuestro navegador los elimine, interpretando sólamente aquellos que aparecen entre palabras. Para mí eso es perfecto, pero habrá quien añore el preformato tipo procesador de texto, para vosotros aquí tenéis una solución con css. La propiedad white-space te permite manejar los espacios en blanco a tu antojo ¿Cómo? Simple, con un mismo ejemplo os demuestro su funcionamiento, el código que voy a usar es el mismo, cambiaré solo la propiedad en css. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet mauris et sapien sollicitudin semper…

Leer más

CSS: Posicionar elementos con z-index

Flickr: CSS z-index Muchas veces queremos posicionar un elemento delante de otro, ya sea por estética o por optimizar, y no encontramos la forma de hacerlo o tiramos por el camino más fácil. Por ejemplo, la imagen que he puesto en la cabecera del artículo, más de una vez me he encontrado con eso, una imagen. El hecho de no saber cómo superponer un bloque con otro hace que tengamos que añadir un peso extra a nuestra web. Por eso, para quienes no sepáis como hacerlo (quienes lo sepáis ya, también podéis leer eh) os lo explico: Con la propiedad…

Leer más

CSS: background-position el gran desconocido

La verdad es que no es tan tan desconocido, pero el título queda mas bonito poniéndolo así xD A la hora de añadir una imagen de fondo a un elemento mediante css tenemos varias opciones para organizarlas, lo primero que tenemos que tener en cuenta es que esta propiedad debe añadirse a un elemento bloque, por lo que si es un enlace (a) debemos añadirle la propiedad: display:block. Un ejemplo básico, tenemos una imagen de 100x100px y la queremos poner como fondo: #ejemplo { width:100px; height:100px; background-image:url(iconos.gif); } Pero podemos complicarlo un poquito más, vamos a crear un archivo que…

Leer más

CSS: Deja constancia de tu trabajo

Suele pasar que tengas varias versiones de tus hojas de estilos y surja la duda de cuál es la más reciente. Para solucionar esto, y para facilitar un poco el trabajo a quienes tengan que editar tu hoja de estilos, que mejor que dejar una nota al comiendo del archivo, especificando unos cuantos datos básicos. Puedes añadir la fecha de creación del documento, o sólamente la fecha de última actualización, tu nombre e información de contacto (web / email) para que si en un futuro debe editarlo otra persona y tenga una duda sepa a quién acudir (puede que quieran…

Leer más

No os asustéis, hoy es el día del CSS desnudo

Si acabas de descubrir que mi blog se ve horrorosamente soso, no te preocupes no me ha dado la locura, simplemente me he unido a la iniciativa CSS Naked Day (día del CSS desnudo). Durante las 24 horas el 9 de abril (España), mantendré el blog sin estilos (css) para reivindicar con ello un buen uso de los estándares web. Si quieres unirte a la causa, aquí tienes toda la información necesaria.

Leer más