22 mai 2013

Ajouter un séparateur d'article (2)

Il y a quelque temps je vous ai déjà expliqué une nouvelle astuce montrant comment séparer les articles les uns des autres (voir Ajouter un séparateur d'articles). Aujourd'hui je vous propose de vous en montrer une autre permettant de séparer un article des différents éléments qui se trouvent à sa suite (pied d'article, barre de partage, barre de vote, etc.).

Voici un exemple de ce que cela donne. L'image d'une gomme marque la fin de l'article avant le pied d'article :

divider3-ecrancopie écran

Pour réaliser cet effet sans modifier le HTML, il suffit d'apporter quelques petites modifications à la feuille de style (CSS).

1- Il faut tout d'abord ajouter le sélecteur .blogbody .itemfooter:before (juste avant le sélecteur .blogbody .itemfooter, ce sera plus pratique pour la suite) :

.blogbody .itemfooter:before {
    ...
}

2- Ensuite y insérer la propriété position avec la valeur absolute, puis insérez la propriété position avec la valeur relative dans le sélecteur .blogbody .itemfooter :

.blogbody .itemfooter:before {
    position: absolute;
}
.blogbody .itemfooter {
    ...
    position: relative;
}

 3- Dans le sélecteur .blogbody .itemfooter:before, ajoutez la propriété content suivie de l'URL de l'image :

.blogbody .itemfooter:before {
    position: absolute;
    content: url("https://p8.storage.canalblog.com/84/60/898602/85455338.png");
}

 4- Toujours dans le même sélecteur, ajoutez la propriété top suivie de la valeur numérique égale à la hauteur de l'image et précédée du signe négatif :

.blogbody .itemfooter:before {
    position: absolute;

    content: url("https://p8.storage.canalblog.com/84/60/898602/85455338.png");
    top: -76px;
}

5- Dans le sélecteur .blogbody .itemfooter, ajoutez la propriété margin-top suivie du même nombre (la valeur numérique de la hauteur de l'image) :

.blogbody .itemfooter:before {
    position: absolute;
    content: url("https://p8.storage.canalblog.com/84/60/898602/85455338.png");
    top: -76px;
}
.blogbody .itemfooter {
    ...
    position: relative;
    margin-top: 76px;
}

6- Enfin, ajoutez la propriété left suivie de sa valeur numérique (qui demande un petit calcul pour que l'image soit bien centrée - voir infra) :

.blogbody .itemfooter:before {
    position: absolute;
    content: url("https://p8.storage.canalblog.com/84/60/898602/85455338.png");
    top: -76px;
    left: 280px;
}
.blogbody .itemfooter {
    ...
    position: relative;
    margin-top: 76px;
}

 7- Ajoutez si nécessaire une marge extérieure supérieure à l'image (margin-top) :

.blogbody .itemfooter:before {
    position: absolute;
    content: url("https://p8.storage.canalblog.com/84/60/898602/85455338.png");
    top: -76px;
    left: 280px;
    margin-top: 10px;
}
.blogbody .itemfooter {
    ...
    position: relative;
    margin-top: 76px;
}

 

Explication du code CSS :

divider3 copie

 

Calcul de la valeur de left :

divider3-left

 

Cette méthode est bien plus complexe que celle que je vous ai expliquée dans un article précédent. On peut se demander pourquoi faire compliqué quand on a une méthode simple à notre disposition ? En fait, c'est le principe qu'il faut retenir car il peut être très utile dans certains cas avec d'autres éléments de la page, notamment ceux qui comportent déjà une image : ajouter une image au-dessus (ou en-dessous) d'une autre comme je l'ai fait dans certains designs personnalisés.

A noter que l'image ainsi définie ne peut être copiée ni par un clic droit ni par d'autres méthodes classiques.

Cet article vous a intéressé ? Cliquez sur l'une des étoiles ci-dessous.

N'oubliez pas de vous inscrire à la NEWSLETTER.

Soutenez-moi en m'ajoutant à vos liens !

 

Posté par Michal53 à 09:22 - - Permalien [#]
Tags : , , , , , , , , , , ,