encadrer

obtenir ces boutons

Cadres

On peut améliorer la présentation des éléments (colonnes, images, gadgets, ...) d'un blog en les encadrant comme dans l'exemple suivant :


Pour ajouter le cadre dans la version HTML d'un message ou d'un gadget, le code est le suivant :

padding: 4px;border: 1px solid #bbb;

On peut aussi ajouter un cadre directement autour de l'image (sans cadre blanc) : remplacer "padding:4px;" par "padding:0px;".

Pour encadrer un gadget, il faut connaître son nom : cliquer ici.

Pour ajouter un cadre à toutes les images se trouvant dans les messages, le code à ajouter dans le modèle (template) du blog est le suivant :
.post img {
padding:4px;
border:1px solid #bbbbbb;
}
Pour obtenir des lignes en pointillés, remplacer "solid" par "dotted" :


"dashed" : le cadre est constitué de tirets :


"double" : le cadre est formé de deux traits pleins séparés :


"ridge", "groove", "outset", "inset" : le cadre donne une impression de relief :





On peut changer la couleur du cadre (gris : "border: #bbb;) et de l'espace entre le cadre et l'image (blanc : "background-color: #fff;"). On peut aussi changer l'épaisseur du cadre ("border: 1px;" - "2px" pour les pointillés et tirets - "8px" pour les cadres avec effet de relief) ou de l'espace entre l'image et le cadre ("padding: 4px;").

* * * * *
A l'inverse, cette page permet aussi de repérer les codes à enlever pour supprimer des encadrements ou des bordures : rechercher l'instruction "border" et la transformer en : "border:none;".

* * * * *
On peut aussi n'ajouter une bordure (en fait une ligne) que dans une, deux ou trois direction(s) (en haut, à droite, en bas, à gauche), soit, dans l'ordre :

"border-top: 1px solid #00000;
"border-right: ..."
"border-bottom: ..."
"border-left: ...".

On peut aussi écrire :
border-style: solid; border-color: rgb(187, 187, 187) rgb(187, 187, 187) rgb(44, 117, 255); border-width: 1px 1px 8px;

Dans ces cas, l'ordre retenu est toujours :
1. haut
2. droite
3. bas
4. gauche

Les 3° et 4° mentions sont facultatives. Si elles sont absentes, la valeur de la première mention sera appliquée à la 3°, et celle de la seconde est appliquée à la 4°. Par exemple, "border-width: 10px 20px;" correspond à "border-width: 10px 20px 10px 20px;".
* * * * *
POUR AJOUTER UN EFFET DE RELIEF AUX IMAGES , consulter cette page.

* * * * *
Pour ajouter simplement une légende à une image, on peut ajouter ce code après celui de l'image :
<div class="separator" style="clear: both; text-align: center;">Titre de l'image</div>
On peut aussi se connecter au nouvel éditeur provisoire de Blogger ("Blogger in draft") et cliquer sur une image pour pouvoir y ajouter une légende. Mais des utilisateurs rencontrent des problèmes avec cette procédure.

4 commentaires:

Sandrine a dit…

Bonjour,
JE n'arrive pas à savoir où il faut que je mette le code "
padding: 4px;border: 1px solid #bbb;"
Merci de votre aide

Meiser a dit…

Bonjour.

Dans la version HTML d'un article d'un blog, le code pour afficher une image est comme ceci :

<img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 240px; padding: 4px; border: 1px solid rgb(187, 187, 187);" src="http://3.bp.blogspot.com/_sPwH_KmuNT8/SucKqRVQ4YI/AAAAAAAAAFc/9g9ZlpHR3f8/s800/z+ArcRail+1.JPG" alt="" border="0" />

Le code de mise en page s'ajoute juste après : style="


TwoSisters a dit…

Bonjour,
Je voudrais enlever le cardre gris qu'il y autour de mes onglets, comment je dois faire ?

Merci de votre aide.

Mezou a dit…

Bonjour,

Je n'arrive pas à retirer les cadres des images, malgré ce tuto ... Il y a énormément de "border" dans le HTML, faut-il mettre "border:none;" pour tous ? Comment retirer uniquement le cadre des images ?

Merci d'avance,

Mezou