milmazz

Sustituyendo texto por una imagen

Desde mi punto de vista, es preferible no hacer uso de imágenes como título más importante, es conveniente utilizar un encabezado h1, pero a veces resulta conveniente sustituir ese título por el logo del sitio en particular, existen muchos métodos para hacerlo a través de CSS, yo utilizaré el método Shea Enhancement planteado por Dave Shea al final del artículo Revised Image Replacement

Nos aprovecharemos de la siguiente estructura en XHTML.

<h1 id="header" title="NNL Newsletter"><a href="http://www.nnlnews.com/"><span></span>NNL Newsletter</a></h1>

La imagen que sustituirá al título tiene una anchura de 134px y una altura de 130px. Ahora recurrimos a CSS y hacemos lo siguiente:

h1{
font-size: 1.2em;
}
#header{
  width: 134px;
  height: 130px;
  position: relative;
}
#header span{
  background: url(logo.png) no-repeat top left;
  width: 100%;
  height: 100%;
  position: absolute;
}

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

Notas

Carlos Tori, encargado de la redacción de NNL Newsletter, acostumbra colocar un párrafo de notas al principio de las distintas ediciones, para distinguir dicho párrafo, hemos creado un clase llamada note, funciona de la siguiente manera:

p{
  margin: 0 1em 0.5em 1em;
}
p.note{
  border-top: 2px solid #666;
  background: #f5f5f5;
  padding: 1em;
  margin: 1em 0;
}

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

En primera instancia declaramos los márgenes necesarios a todos los párrafos (p), luego vamos al caso particular de la nota, la cual, consiste de una párrafo cuya clase sea igual a note.

Listas Ordenadas

Carlos Tori, siempre coloca una lista ordenada de los puntos que tratará en la edición de NNL Newsletter, es conveniente implantar una lista ordenada de enlaces, esto facilitará el acceso a los diversos puntos que se tratan.

ol{
  margin: 1em 3em;
}
ol li{
  list-style-type: none;
  background: url(bullet.png) no-repeat left center;
  padding-left: 16px;
}

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

La primera regla aplica sobre las listas ordenadas, en ella establecemos los márgenes. En la segunda regla, en primera instancia evitamos mostrar el marcador de los ítems de la lista, esto lo hacemos a través de la propiedad list-style-type con un valor igual a none, luego empleamos la propiedad background para colocar un marcador de los ítems partiendo de una imagen, la cual estará posicionada hacia la izquierda horizontalmente y estará posicionada verticalmente en la parte central, esto se logra con las palabras claves left y center respectivamente, antes de finalizar la segunda regla, controlamos el relleno izquierdo con un valor fijo.

Pages: 1 2 3 4