Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

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

- Auteur : Brunofaisart

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.

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

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>

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...