Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

Accueil > SPIP > Aide à la rédaction > Mettre une « pseudo-bordure » aux images insérées dans le texte d’un (...)

Mettre une « pseudo-bordure » aux images insérées dans le texte d’un article

vendredi 16 décembre 2016, par François Daniel Giezendanner

Notez cet article
0 vote

 Une méthode simple et rapide

Une méthode simple, rapide mais approximative pour mettre une « pseudo-bordure » aux images insérées dans le texte d’un article consiste à :

  • mettre une bordure à la div qui encadre l’image ;
  • insérer l’image dans un tableau à une ligne (utiliser les pipes).

« Cette méthode sera obsolète lorsque la communauté SPIP créera un modèle adapté à cet usage (permettant de créer un cadre aux images). »

Il suffit d’encadrer l’image avec l’instruction :

<div style="border:2px solid gray;"></div>

Pour obtenir une bordure grise de largeur 2 px en trait continu.

Voici divers exemples :

<div style="border:2px solid #CECDCD;">
<div style="border:2px solid #B0AFAF;">
<div style="border:2px solid black;">
<div style="border:2px solid dimgray;">
<div style="border:2px solid gray;">
<div style="border:2px solid darkgray;">
<div style="border:2px solid silver;">
<div style="border:2px solid lightgray;">
<div style="border:2px solid gainsboro;">
<div style="border:2px solid red;">
<div style="border:2px solid blue;">

Ou en utilisant le format explicite :

<div style="border:2px; border-style:solid; border-color:#CECDCD;">
<div style="border-width:2px; border-style:solid; border-color:#B0AFAF;">
<div style="border-width:2px; border-style:solid; border-color:gray;">
<div style="border-width:2px; border-style:solid; border-color:red;">
<div style="border-width:2px; border-style:solid; border-color:blue;">

 Style de bordures border-style (CSS 2.1)

Huit styles sont possibles en CSS 2.1 avec border-style (la valeur par défaut étant none) :

  1. dotted (pointillé)
  2. dashed (tirets)
  3. solid (solide)
  4. double (double)
  5. groove (rainurée)
  6. ridge (relief)
  7. inset (relief intérieur)
  8. outset (relief extérieur)

 Fixer la largeur maximale avec max-width

Par exemple pour une image de largeur 285 pixels, nous fixons la largeur du cadre à par exemple 287 pixels :

<center>
<div style="border:3px double #CECDCD; max-width: 287px;">
[<doc759|center>->http://css.mammouthland.net/border-css.php]
</div>
</center>
PNG - 3 ko
Rendu avec border-style
(Source : http://css.mammouthland.net/border-css.php)

Cette instruction permet de conserver la propriété responsive aux images ainsi traitées.

 Exemple avec une copie d’écran pour les couleurs grises

Voici le résultat de l’encadrement avec le code :

<div style="border:2px solid #CECDCD;">
[<doc758|center>->http://www.letoileauxsecrets.fr/couleurs/couleurs-web.html]
</div>
PNG - 20.4 ko
Nuances de gris extraites d’un tableau
(Source : http://www.letoileauxsecrets.fr/couleurs/couleurs-web.html)

... et si l’on tient compte de la largeur de l’image, ici 342 pixels, nous fixons la largeur du cadre à par exemple 344 pixels :

<center>
<div style="border:2px solid #CECDCD; max-width: 344px;">
[<doc758|center>->http://www.letoileauxsecrets.fr/couleurs/couleurs-web.html]
</div>
</center>
PNG - 20.4 ko
Nuances de gris extraites d’un tableau
(Source : http://www.letoileauxsecrets.fr/couleurs/couleurs-web.html)

Et voici ce que l’on obtient avec les pipes pour un tableau :

|[<doc758|center>->http://www.letoileauxsecrets.fr/couleurs/couleurs-web.html]|

PNG - 20.4 ko
Nuances de gris extraites d’un tableau
(Source : http://www.letoileauxsecrets.fr/couleurs/couleurs-web.html)

L’utilisation du tableau fait perdre la propriété responsive aux images ainsi traitées.

 Images Border dans SPIP

 Sites pour codes des couleurs

SPIP

Dans la même rubrique

1995 - 2024 Ici & Là
Plan du site | | Contact | RSS 2.0

SPIP