ICI header("Location: http://www.mytesting.fr ");
TESTS ET ASTUCES DE BLOGUEUR

METTRE UNE LEGENDE A COTE OU SOUS UNE PHOTO.

par André Marini 28 Février 2015, 10:00 Images

METTRE UNE LEGENDE A COTE OU SOUS UNE PHOTO.

Voici d'abord l'exemple d'un commentaire qui se trouve à côté de la photo.

Il faut prendre garde que les dimensions de la photo n'excèdent pas celles du cadre défini.

Si les dimensions du cadre défini sont supérieures, la photo sera encadrée mais attention à l'inverse.

 

Dans cet exemple, les dimensiond du cadre et celles de la photo sont les mêmes.

 

DANS LES DEUX CAS, SI VOUS AGRANDISSEZ LE CADRE, LE COMMENTAIRE SE TROUVERA A L' INTERIEUR, CE QUI PEUT ETRE INTERESSANT. DANS CE CAS, IL FAUDRA DEFINIR LA COULEUR DU FOND. ICI, LA COULEUR DE FOND EST DEFINIE PAR #56890E MAIS NE SE VOIT PAS PUISQUE LE CADRE ET L'IMAGE ONT LES MËMES DIMENSIONS. 

 

CODE

 

<div style="float:left; height:217px; width:300px; border:solid 1px black; 
   background-color:#56890E; line-height:20px;"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20150228/ob_f3e071_voir.jpg" /></div>
<p><span style="clear:both;">&nbsp; &nbsp; &nbsp; &nbsp;<span style="font-size:20px;"> </span></span></p>
<p>&nbsp;</p>
<p ><span  style="clear:both;"><span  style="font-size:20px;">&nbsp; &nbsp; &nbsp; Exemple de photo<br />
&nbsp; &nbsp; &nbsp; illustrant un article<br />
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;d&#39;un autre blog</span></span></p>

 

RESULTAT

 

       

 

      Exemple de photo
      illustrant un article
        d'un autre blog

 

Voici maintenant un commentaire qui se trouve sous la photo.

Il faut prendre garde que les dimensions de la photo n'excèdent pas celles du cadre défini.

Si les dimensions du cadre défini sont supérieures, la photo sera encadrée mais attention à l'inverse.

 

Dans cet exemple, les dimensions du cadre et celles de la photo sont les mêmes.

 

CODE

<div style="float:left; height:217px; width:300px; border:solid 1px black; 
   background-color:#56890E; line-height:40px;"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20150228/ob_f3e071_voir.jpg" /></div>
<p style="clear:both;">&nbsp;</p>
<p id="yui_3_5_0_1_1425110977212_32750" style="clear:both;"><span id="yui_3_5_0_1_1425110977212_32772" style="font-size:20px;">&nbsp; &nbsp; &nbsp; &nbsp; Exemple de photo<br />
&nbsp; &nbsp; &nbsp; &nbsp; illustrant un article<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d&#39;un autre blog</span></p>

 

RESULTAT

 

 

        Exemple de photo
        illustrant un article
          d'un autre blog

Haut de page

Theme: Autofocus © 2013 - Hébergé par Overblog