Haut du blog
Exemple N°04
Titre du blog en image, cette image est mise comme fond du bloc "H1".
Le but de cet exemple est de mettre le bloc titre "H1" en
superposition sur le logo.
Le fond de l'image est transparent pour qu'il cache le moins possible le logo. Dans cet exemple l'image doit avoir comme dimensions 960x80.
Vous remarquerez que la hauteur du bloc "header" a diminué du fait que le titre est en au-dessus du logo.
Les propriétés "position" et "top" sont utilisées comme dans l'exemple N°2. En plus une nouvelle propriété "z-index" apparait pour faire
passer le bloc titre au-dessus du bloc logo, sur une couche supérieure.
CSS personnalisé
.diz-entete {
height: 200px;
position: relative;
}
.diz-entete-image{
height: 200px;
}
.diz-entete-titre{
background-image: url('http://static.blog4ever.com/2012/06/704535/Titre-TexteImage_trans_3678250.png');
position: absolute;
width: 960px;
top: 0;
left: 0;
border-top-style: none;
z-index: 20;
}
#titre_lien {
visibility: hidden;
}
Page exemple
Sur cette page externe, les liens dans les menus "Barres de navigation" et "Menu latéral" sont inactifs.