Saltar al contenido
Codif铆ca.me | Desarrollo web | Programaci贸n

Ocultar contenido con CSS

22 julio, 2014
css fijar contenido

Ya sea por una cuesti贸n de SEO o al estar dise帽ando un tema, en muchas ocasiones necesitamos ocultar contenido. Con CSS podemos hacerlo f谩cilmente, solo es necesario colocar un display: none al estilo del div en cuesti贸n.

css ocultar contenido

Veamos un ejemplo sobre c贸mo hacer que una etiqueta h1 contenga una imagen y as铆 hacer valido el documento HTML y ayudar a posicionar palabras clave.

C贸digo HTML:

<h1 id="logo"><a href="http://ejemplo.com/" ><span>TEXTO A POSICIONAR</span></a></h1>

C贸digo CSS:

 
#logo > a{
display: block;
width: 100px; /* ancho del logo */
height: 100px; /* alto de logo */
background: url(http://ejemplo.com/logo.png);
}
 
#logo > a > span{
display: none;
}

Lo que hicimos fue ocultar la etiqueta 鈥榮pan鈥 y a la etiqueta 鈥榓鈥 darle un ancho, un alto y colocarle de fondo la imagen que queremos en este caso. Si bien puse una url de ejemplo, ser铆a un logo. Esta pr谩ctica es la que utilizan la mayor铆a de las webs, las que no lo hacen de manera similar o de forma incorrecta.