CSS-Sésamo II: Cabeceras
Permalink | Archivado en: CSS, Diseño y Desarrollo Web, Tutoriales, XHTML
Hola, soy Coco, y en este capítulo de CSS-Sésamo vamos a ver cómo podemos hacer una cabecera con una imagen chula, a la vez que mantener la semántica de nuestro documento. Lo que queremos es una cabecera que al hacer clic sobre ella nos lleve a la página principal.
Los estándares nos dicen que el título (cabecera) principal del documento se pone con la etiqueta h1. Como queremos meterle un link, también usaremos la etiqueta a. Dentro del link, hay una etiqueta span que nos servirá más adelante para ocultar con CSS el texto y dejar que asome la imagen de la cabecera… pero nos estamos adelantando. El código XHTML sería el siguiente:
<div id='header'> <h1><a href='...' title='...'> <span>Título</span></a></h1> </div>
Primero tocaremos el CSS de la capa de header. Establecemos el ancho y el alto de la capa con las medidas que tenga la imagen. Además, ponemos la imagen de fondo y quitamos el margin y el padding:
#header {
background: url('imagen.png') top left no-repeat;
width: 400px;
height: 100px;
margin: 0px;
padding: 0px;
}
También quitamos los márgenes a la etiqueta h1 (para que la capa mida exactamente lo que la imagen) y hacemos invisible el contenido de la etiqueta span, para que el texto de la cabecera sólo se muestre en navegadores no visuales (aurales, de texto, etc):
#header h1 {
margin: 0px;
}
#header a span {
visibility: hidden;
}
Ahora sólo nos queda la etiqueta a. Lo que queremos conseguir es que se pueda hacer clic en todo el área de la cabecera; para eso, tenemos que transformar el link en un bloque y darle las medidas de la imagen. Además, quitamos márgenes y padding y no nos olvidamos de quitar la decoración de texto, para que no salga subrayado en algunos navegadores:
#header a {
width: 400px;
height: 100px;
display: block;
padding: 0px;
margin: 0px;
text-decoration: none;
}
¡Nos vemos en el próximo capítulo!
12 comentarios »
Si quieres hacer un trackback, usa esta TrackBack URI
Escribe un comentario
Los párrafos y saltos de línea se ponen de forma automática. La dirección de e-mail no se mostrará nunca. Se permiten las siguientes etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Desde que vi tu blog he intentado hacer una web con css, me surgio la duda de poner una imagen en el header y ahora me la has resuelto (tampoco era muy dificil) pero se me descompensa con el fondo, me sale mas a la izquierda el header que el fondo. hice el tutorial de verlee (es decir creo un fondo con photoshop, un header y tal…) y nada me sale mas a la izquierda y no se me centra con el fondo, con lo cual no pega nada.
y por cierto ¿donde esta la primera parte del css sesamo?? que no la encuentro y me desespero.
ahhh que se me olvida, muchas gracias por hacer estos tutos simpaticos.
saludos
Comentario de Trisky — 03-04-05 11:54 pm
Se hace bastante difícil si no dejas un enlace para que los demás podamos ver el código y el resultado xD Pero bueno, si he entendido lo que quieres decir, es que posicionas mal la capa del header. Mírate el primer capítulo de CSS-Sésamo (antes estaba en el blog, pero con la mudanza a wordpress está aquí: http://cafeina.ladybenko.net/index.php?page_id=5 ) y mira cómo hacen allí para centrar todo. Y combinando los dos tutos, pues…
Comentario de BenKo — 04-04-05 12:00 am
Ojo con ese metodo porque la moyoria de los screen readers no van a leer el texto oculto con
.
visibility: hiddenComentario de Federico — 04-04-05 3:07 am
Uff, muchas gracias señorita, ya me lo aprendí!!. Recien descubierto este blog, creo q va directo a mis favoritos, felicitaciones
Comentario de Iván — 04-04-05 11:59 am
¿Los screen readers son los aurales? No sabía lo de que no leían el
visibility: hidden, pero vamos, siempre se puede tener una hoja de estilos alternativa para este medio. Gracias por el comentarioComentario de BenKo — 04-04-05 12:09 pm
[...] Y ahora toca el chanchullo del que os hablaba antes para hacer el hover. Consiste en poner el enlace como si fuera un bloque, y así ocupará todo el li y podremos manipular sus dimensiones (esto mismo es lo que utilizábamos en un capítulo anterior para hacer cabeceras): [...]
Pingback de demasiada Cafeína v3.0 — 02-11-05 1:58 pm
Estaba yo tratando de hacer algo parecido cuando caí en la cuenta de que si la imagen no carga nos quedamos sin nada, pues aquí no puedes poner un ‘alt’ que la sustituya.
Así que ahora nos toca pensar cómo resolvemos casos como este, porque si se trata del título de una web, es interesante que se vea como sea.
Un saludo.
Comentario de Jake — 04-12-05 5:56 pm
Como puedo maquetar sin tablas?, es mediante las CCS de posicionamiento?, como se utilizan?
Estaría muy bien que hicieras un capítulo de esto. Muchas gracias por tu atención y por tu tutorial.
Comentario de Joaquin — 03-02-06 1:28 pm
Mira en la sección de stuff, que hay un tutorial justo para eso.
Comentario de BenKo — 03-02-06 3:06 pm
Mil gracias por la información. Me ha sido de mucha ayuda!!!! Saludos!!!
Comentario de magacín66 — 05-08-06 11:29 pm
[...] CSS-Sésamo II: Cabeceras (Recomendamos usar con h1 en header) [...]
Pingback de Los mejores textos sobre CSS y estándares web en castellano « Disenia — 09-05-07 4:57 pm
[...] CSS-Sésamo II: Cabeceras (Recomendamos usar con h1 en header) [...]
Pingback de » Textos sobre CSS y estándares web en Español — 03-07-08 3:12 am