Les CSS Overblog (2) : Centrer vos images de paragraphes

24 Octobre 2012

Beaucoup de questions ont ét posées sur l'affichage des images dans vos paragraphes, pour Overblog Kiwi nommé section texte.
Alors vous pouvez inclure une image à votre texte et l'ajuster/centrer automatiquemnt, que vous choisissiez à gauche ou à droite, votre image s'affichera automatiquement , ajustée et centrée au-dessousde votre paragraphe.

Comment procéder ?

Simplement en utilisant les styles CSS. Pour l'intégration sur votre thème voir le premier paragraphe de mon précédent billet ici :
http://photonautesassocies.overblog.com/les-css-overblog-1-modifier-l-apparence-de-la-zone-recherche

Ci-dessous une prévisualisation rapide puis le code des styles à modifier sur votre thème.

Les CSS Overblog (2) : Centrer vos images de paragraphes

Ici sur cette copie d'écran , nous avons une ombre portée , des coins arrondies et une bordure orangée, le code pour cet exemple :

    <style>
    	.ob-media-right
		   {
		     -moz-box-shadow: 3px 3px 9px #000000;
		     -webkit-box-shadow: 3px 3px 9px #000000;
		      box-shadow: 3px 3px 9px #000000;
		      border:8px rgba(193,155,32,.65) solid;
		     width:98%;
		     height:auto;
		     border-radius:12px;
		     margin-top:12px;
		     margin-bottom:12px;
		    }
		     
		.ob-media-left
		   {
		     /* ombre portée *>
		     -moz-box-shadow: 3px 3px 9px #000000;
		     -webkit-box-shadow: 3px 3px 9px #000000;
		      box-shadow: 3px 3px 9px #000000;
		      /* cadre orangé */
		      border:8px rgba(193,155,32,.65) solid;
		     width:98%;
		     height:auto;
		     /* arrondi de cadre */
		     border-radius:12px;
		     /*espacement texte image */
		     margin-top:12px;
		     margin-bottom:12px;
		    }     
 </style>

Mais on peut aussi penser autrement l'affichage de l'image en changeant un petit peu le CSS.

Le code CSS modifié ci-dessous :

     <style>
 .ob-media-right{
    	     
		     width:100%;
		     height:auto;
		     margin-top:64px;
		     margin-bottom:64px;
		     border-top:8px dotted #ccc;
		     padding-top:14px;
		     border-bottom:8px dotted #ccc;
		     padding-bottom:14px;
		     }
		.ob-media-left{
		     
		     width:100%;
		     height:auto;
		     border-top:8px dotted #ccc;
		     padding-top:14px;
		     margin-top:64px;
		     margin-bottom:64px;
		     border-bottom:8px dotted #ccc;
		     padding-bottom:14px;
		     }     
 </style>