Bordure latérale de page 2

Nous avons vu comment placer, en fond d'un cadre, une image qui se répète horizontalement ou verticalement et une texture de fond.

Voyons comment organiser notre article avec tout ça:

1/ vous avez noté que pour placer une image et une texture de fond, il fallait écrire en premier l'adresse de l'image puis celle de la texture ou la couleur:

<div style="width: 600px; height: 400px; border: 1px solid black; background: url('http://ekladata.com/SWvNFJMEwS0p4MV57Qb6u5k7J-s.gif') repeat-y top left, linear-gradient(to right,rgba(0,100,0,0.6) 0%, rgba(0,0,0,0.3) 100%);">&nbsp;</div>

Je profite de cet exemple pour rappeler que la couleur de fond peut être un dégradé (gradient)

2/ Si nous souhaitons une bordure du côté droit:

<div style="width: 600px; height: 400px; float: left; border: 1px solid black; background: url('http://ekladata.com/SWvNFJMEwS0p4MV57Qb6u5k7J-s.gif') repeat-y top left, url('http://ekladata.com/H8KvI_UvU04BztKk8b51h-b6WeI.gif') repeat-y top right,linear-gradient(to right,rgba(0,100,0,0.6) 0%, rgba(0,0,0,0.3) 100%);">&nbsp;</div>

Le positionnement de la seconde image est à droite.

3/ La taille de nos images n'est peut-être pas la bonne: il faut ajouter la taille désirée dans l'adresse: les attributs ne semblent pas acceptés.

L'image d'origine fait 150x164px; réduisons-là de moitié, pour l'exemple:

taille d'origine: http://ekladata.com/Rapa2Ncotm9ffO3Ngp5dC7j2kjk.gif

taille moitié: http://ekladata.com/Rapa2Ncotm9ffO3Ngp5dC7j2kjk@75x82.gif

<div style="width: 600px; height: 400px; float: left; border: 1px solid black; background: url('http://ekladata.com/Rapa2Ncotm9ffO3Ngp5dC7j2kjk@75x82.gif') repeat-y top left, url('http://ekladata.com/FjlXA7mOIOoekt6Sp43ftdJJle0/marble03.jpg');">&nbsp;</div>box-sizing: border-box;

4/ Nous allons écrire notre article, en laissant la bordure latérale apparente: J'ai mis une couleur de fond et une bordure, uniquement pour l'exemple.

<div style="width: 600px; height: 400px;  border: 1px solid black; background: url('http://ekladata.com/ngwgkwDSRFNy5NYWZdXzYJWxBdM.gif') repeat-y top left, url('http://ekladata.com/FjlXA7mOIOoekt6Sp43ftdJJle0/marble03.jpg');">
<p style="box-sizing: border-box; width: 450px; height: 350px; border: 1px solid black; text-align: center; margin: 30px 0 0 100px; background: rgba(255,155,255,0.5);">votre article</p>
</div>

Le positionnement du cadre article se fait par margin.
Si vous souhaitez que les dimensions de ce cadre, ne soient pas affectées par les bordures ou espaces intérieurs (padding), vous ajouterez box-sizing.

5/ Taille image de fond: de la même façon que nous avons redimensionné la petite image, nous pouvons redimensionner une image de fond.

<div style="width: 600px; height: 400px; float: left; border: 1px solid black; background: url('http://ekladata.com/6asfUoGwFnSn15lqBsdQPlfuQ-w.gif') repeat-y top left, url('http://ekladata.com/_sxARtVPVoC_kfXx5-CSBaJq6Is@600x400.jpg');">
<p style="box-sizing: border-box; width: 450px; height: 350px; border: 1px solid black; text-align: center; margin: 30px 0 0 100px; background: rgba(255,255,255,0.5);">votre article</p>
</div>

6/Espacer les images de la bordure: nous pouvons souhaiter que la bordure latérale ne colle pas les images les unes contre les autres; je ne sais pas s'il est possible d'ajouter un attribut pour ça !

Une solution est de reprendre l'image, dans un cadre transparent avec la hauteur ou la largeur permettant un espace entre 2 images consécutives.

130x130 130x160  la bordure n'est qu'indicative.