Tutoriel - Images flottantes dans un texte

 

 

Pour utiliser cette procédure, il faut désactiver le menu vertical gauche, car la propriété "clear:left" que j'utilise fait passer le texte et les images après le menu.
Pour désactiver le menu, en mode HTML, mettre le code suivant :

<script type="text/javascript">// <![CDATA[
document.write('<style type="text/css">' +
'#menu{display:none;}' +
'</style>');
// ]]></script>

 

Une astuce serait de faire flotter les images uniquement du côté opposé au menu vertical, le problème serait réglé. Pour les blogs avec 2 colonnes (gauche et droite), la désactivation des 2 colonnes s'impose.

Une autre astuce pour faire passer le paragraphe suivant, dans le cas d'un texte très court à côté de l'image flottante. Mettre une hauteur, au paragraphe contenant l'image flottante, de la même valeur que la hauteur de l'image voire un peu plus. Ceci évite d'avoir à utiliser "clear:left".

Voilà en attendant une autre solution un exemple qui peut tenter certains blogueurs.

Pardonnez moi pour le texte en latin! que j'utilise pour garnir les paragraphes.

Dans le premier paragraphe, j'ai fait l'essai de l'astuce avec le réglage de la hauteur du paragraphe à celle de l'image, donc plus de problème, je pourrai avoir le menu à gauche sans problème.

 

 

Démo gestion des images flottantesPretium ullamcorper adipiscing diam Ut ante ac enim lacus metus ut. Donec et fringilla Nulla quam cursus faucibus tempus facilisis porttitor adipiscing. Vitae orci urna pellentesque eu lacinia sed massa et ante eros. Sodales Sed augue sed pulvinar orci mauris Curabitur libero neque laoreet. Congue pellentesque tempus et Nulla vel id vel augue pretium Lorem. Vel a id nascetur orci turpis sit mauris semper mauris in. Nec sem ante.

Démo gestion des images flottantesPretium ullamcorper adipiscing diam Ut ante ac enim lacus metus ut. Donec et fringilla Nulla quam cursus faucibus tempus facilisis porttitor adipiscing. Vitae orci urna pellentesque eu lacinia sed massa et ante eros. Sodales Sed augue sed pulvinar orci mauris Curabitur libero neque laoreet. Congue pellentesque tempus et Nulla vel id vel augue pretium Lorem. Vel a id nascetur orci turpis sit mauris semper mauris in. Nec sem ante.

Ac id tincidunt dolor Fusce Aenean accumsan Morbi augue nisl ac. Elit semper et enim fringilla ligula condimentum sit Vestibulum Aenean egestas. Sed Ut ante penatibus pharetra odio est lacinia ut scelerisque Curabitur. Sem nisl ut congue volutpat vitae interdum ipsum auctor vestibulum feugiat. Vestibulum risus condimentum laoreet cursus et vitae.

Démo gestion des images flottantesSed In purus urna consequat Lorem pretium quis Pellentesque Phasellus vel. Risus dui Phasellus Quisque sodales Curabitur Nam enim tincidunt velit sed. Nulla non wisi interdum dui Donec libero auctor velit leo lorem. Ac Aenean malesuada Vestibulum metus neque dui dui urna velit orci. Nonummy tortor metus Lorem elit adipiscing enim.

 

Mon texte étant terminé, je crée un nouveau paragraphe en lui mettant le style "clear:left;", si l'image flotte à gauche ou "clear:right;" si l'image flotte à droite.



Si vous n'avez plus de texte je vous conseille malgé tout de créer un nouveau paragraphe vide en pressant la touche ENTREE, puis maj + ENTREE pour créer un retour à la ligne et ensuite effacer le style en cliquant sur le bouton gomme "Nettoyer le formatage". De cette façon les paragraphes suivants que vous rajouterez seront sans style direct, vous pourrez les formater à votre convenance.



 

Rappelez-vous toujours que la pression de la touche ENTREE crée un nouveau paragraphe avec le même format, donc pour éviter du code inutile, utilisez le bouton gomme.

 

 

 

Les captures des différentes étapes.

 

Démo gestion des images flottantes Démo gestion des images flottantes Démo gestion des images flottantes Démo gestion des images flottantes

 

Démo gestion des images flottantes Démo gestion des images flottantes Démo gestion des images flottantes Démo gestion des images flottantes Démo gestion des images flottantes





07-09-2010 | 850 vues

Partager


Commentaires


JEP
site/blog
le 13-10-2010 à 07:25:17
Bonjour,
Tout d'abord, merci pour tous vos astuces.
Mais bien souvent, on se pose la question suivante : à quel endroit doit-on mettre ce code ?
il est évident si on le met un peu au p'tit bonheur la chance, on risque d'avoir des surprises.
Merci d'avance pour votre réponse
JEP
PapyClic
site/blog
13-10-2010 à 08:46:57
Bonjour
Merci pour ton commentaire.
En principe j'indique où mettre le code, au début de cet article, pour le Javascript contenant du CSS, j'écris en mode HTML... comme le sujet est sur le nouveau composeur... ça me paraît évident que ce soit dans le composeur en cliquant sur HTML (en niveau avancé).
Pour la suite de l'article, le code est inséré automatiquement en renseignant la boîte de dialogue, en plus sur la capture 8, je montre la cellule contenant le code. Ceci pour ceux qui connaissent le CSS, pour qu'il puissent éventuellement rajouter du code manuellement.
Voilà j'espère que ces explications te seront utiles.
Bonne continuation et merci pour tes visites.
JEP
site/blog
le 04-11-2010 à 19:05:11
Hello Papyclic !
Merci de ta réponse,
pour ce qui est du nouveau composeur pas de problème, mais je parlais d'une façon générale, lorsqu'il ya des astuces comme les coeurs qui tombe par exemple, je me suis souvent demandé où donc mettre ce code ? si c'est dans le "dizperso" ou bien sur la "page d'accueil" après plusieurs essais infructueux, j'ai fini par abandonner (momentanément), car j'avais autre chose "sur le feu" selon l'expression consacrée.
Merci pour ton aide, cordialement.
JEP
le 04-11-2010 à 19:13:50
Raaaaaaaaa !
Les coeurs qui "tombent" vous aurez rectifié je pense... (voilà ce que c'est de ne po se relire) désolé !
PapyClic
site/blog
04-11-2010 à 23:01:52
Bonsoir JEP
Je vais malheureusement te répondre à la "normande", le code peut être inséré à divers endroits selon le résultat souhaité, donc pas de "façon générale". Sauf si tu veux sur tout le blog, en utilisant les bordures en version payante.
Bonne continuation



Poster un commentaire
Merci de recopier le nombre de gauche dans la case ci-dessous (Pourquoi?)

Liens

Voir les articles de la catégorie " Nouveau composeur "
Imprimer cet article

Rechercher sur Diztest ? :

Recommander ce blog | Contacter l'auteur | Signaler un contenu | S'abonner au blog Flux RSS du blog | Espace de gestion | Annuaire des blogs