03 décembre 2009

Le bandeau supérieur (1)

On peut placer une image de fond dans les sélecteurs "topbar-logo" ou "topbar".

Il faudra tout d'abord provoquer l'affichage de l'élément qu'on aura choisi et interdire celui de l'autre en utilisant la propriété "display".
La propriété "display" de l'élément choisi aura pour valeur "block" et l'autre "none".

Dans le "topbar-logo" :

#topbar-logo {
          display: block;
          background: url(URL de l'image);
          height: Xpx;*
}
div .logolink a **{
          display: block;
          height: Xpx*;
}
#topbar {
          display: none;
}

 

bandeau01

passez la souris sur l'image pour voir le curseur changer

 

Dans le "topbar" :

#topbar-logo {
          display: none;
}
div .logolink a {
          display: none;
}
#topbar {
          display: block;
          background: url(URL de l'image);
          height: Xpx;*
}

 


Le lys orangé
personnaliser son blog

passez la souris sur l'image pour voir où le curseur change

 

Les fonctionnalités disponibles varieront suivant le choix :

En insérant une image de fond dans "topbar-logo" le titre et le sous-titre que vous aurez entrés dans les paramètres du blog n'apparaîtront pas. Il faudra ajouter du texte au graphisme du bandeau pour avoir le même effet. En cliquant sur la totalité du bandeau on retournera à la page d'accueil.

En insérant une image dans "topbar", on pourra créer un bandeau dépourvu de texte. Titre et sous-titre s'afficheront par-dessus. Il faudra cliquer sur le titre du blog pour retourner à la page d'accueil.

Nota :
Si l'on écrit "display=none;" pour un sélecteur, inutile d'indiquer d'autres propriétés.
* Il est indispensable de préciser la hauteur du bandeau.
** "div .logolink a" va avec "topbar-logo".

Posté par Michal53 à 08:57 - - Permalien [#]
Tags : , , , , , , ,