[Résolu] Placer un texte entre deux images qui illustrent le propos

Bonjour

Je travaille au site suivant http://chti5933.free.fr/, le problème est situé à l'onglet volumes

Je ne parviens pas à placer un texte entre deux images

voici extrait de du code

<p><img class="gauche" style="width: 216px; height: 145px;"
alt="brique entière" src="images/brique_clos.png">
Cependant , l'apprenant a du mal à intégrer le dessin d'un volume sur
une feuille . Quand on lui montre un volume en bois , il ne parvient
pas toujours à imaginer&nbsp; ce que donnerait un pavé coupé en 2.</p>
<p>&nbsp;&nbsp;&nbsp;Le
document cité ci-dessus ne suffisant pas toujours, nous avons imaginé <a
href="ggb/brique-en-2.ggb" target="_blank">la section du pavé, par un
plan parrallèle à une arête
et passant par une diagonale.</a>
Dans le fichier quand le curseur k est égal à zéro (k=0) le pavé droit
est "entier". quand
k &gt; 0 les deux prismes droits, ainsi formés,&nbsp; sont plus ou
moins éloignés. Une face
rectangulaire représentant la section&nbsp; est visible ,&nbsp;
manipuler la figure 3 d pour observer. On peut faire varier les
3 dimensions du pavé.&nbsp; Imaginons que le volume &nbsp; est une
boite, de
dimension l=3, L 4 , H =5 , peut-on y loger un spaghetti de 5 de long ?
un bon moyen pour réviser pythagore !<img class="droite"
style="width: 300px; height: 145px;" alt="b en 2"
src="images/brique_coup_en2_300.png"></p>

L'image de gauche est bien à droite , celle de gauche sous le texte à droite

Je ne trouve pas de solution

MERCI
Modifié par pierre5933 (03 May 2015 - 19:53)

Hello Pierre,
ce que tu obtiens est normal, puisque si on suit le flux, on a :
1 affichage de l'image flottante à gauche (affichage OK)
2 affichage du texte à droite de l'image (affichage OK, le texte remplit tout son conteneur
3 ensuite seulement, après l'affichage du texte, une image flottante à droite (affichage OK)

il faut afficher les 2 images avant le texte
de plus des flottants dans un <p> avec un autre <p> ensuite ne me paraît pas très propre (avis de pros bienvenu!), donc :

<img class="gauche" ...... >
<img class="droite" ...... >
<p> ... </p>
<p> ... </p>

semble fonctionner, qu'en penses tu ?

Merci


j'ai essayé sans succès, voir la page du site
http://chti5933.free.fr/geometrie_volumes.html
voici mon changement


<h4 id="parallélépipède">Parallèlépipède</h4>
<p>pour représenter&nbsp; un parallèpipède rectangle, encore
appelé&nbsp; pavé droit, on trouve dans le site Geogebra&nbsp; <a
href="file:///home/pierre/site_math/ggb/section_de_un-parllelepipede_material-981623.ggb"
target="_blank">la visualisation d'un pavé droit</a> , et des cases à
cocher permettent de&nbsp; visualiser des sections , des coupures de ce
volumes de différentes maniére.<br>
</p>
<img class="gauche" style="width: 216px; height: 145px;"
alt="brique entière" src="images/brique_clos.png">
<img class="droite" style="width: 300px; height: 145px;" alt="ben2"
src="images/brique_coup_en2_300.png">
<p>Cependant , l'apprenant a du mal à intégrer le dessin d'un volume
sur
une feuille . Quand on lui montre un volume en bois , il ne parvient
pas toujours à imaginer&nbsp; ce que donnerait un pavé coupé en 2.</p>
<p>Le
document cité ci-dessus ne suffisant pas toujours, nous avons imaginé <a
href="ggb/brique-en-2.ggb" target="_blank">la section du pavé, par un
plan parrallèle à une arête
et passant par une diagonale.</a>
Dans le fichier quand le curseur k est égal à zéro (k=0) le pavé droit
est "entier". quand
k &gt; 0 les deux prismes droits, ainsi formés,&nbsp; sont plus ou
moins éloignés. Une face
rectangulaire représentant la section&nbsp; est visible ,&nbsp;
manipuler la figure 3 d pour observer. On peut faire varier les
3 dimensions du pavé.&nbsp; Imaginons que le volume &nbsp; est une
boite, de
dimension l=3, L 4 , H =5 , peut-on y loger un spaghetti de 5 de long ?
un bon moyen pour réviser pythagore !</p>
<h4 id="cylindre">Cylindre</h4>

Conseils ??


Merci

Hello Pierre,
les classes "gauche" et "droite" ne sont pas définies, car la feuille de style est manquante, du coup les flottants ne flottent pas, donc ajouter avant <body>, entre les balises <style type="text/css"></style> ces lignes ce qui nous donnera :

<style type="text/css">
.gauche {float:left;margin-right:10px;}
.droite {float:right;margin-left:10px;}
</style>

(j'ai ajouté une petite marge droite ou gauche pour que les images flottantes ne soient pas collées au texte, mais ces marges sont facultatives, bien entendu.)

Du coup, toutes les images "gauche" et "droite" de la page flottent !
C'est bon maintenant ?

Bonsoir


je ne comprends pas

dans l'entete de ma page on trouve

<html lang="fr">
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
<meta charset="utf-8">
<title>essai pour aider à comprendre , aimer les
mathématiques/title&gt;</title>
<link rel="stylesheet" href="style.css" type="text/css">


et voici un extrait du fichier style.css

.droite {
float: right;
margin-right: 10px;
margin-left: 10px;
}
.gauche {
float: left;
margin-right: 20px;
}

l'utilise Kompozer et j'ai pu noter que pour l'image à gauche quand je modifie la marge cela a un effet immédiat donc ma feuille de style et prise en compte

Je vais essayer à blanc sans ma feuille de style votre proposition à moins que...


Merci

Pierre

Désolé Pierre, mais à cette adresse :
http://chti5933.free.fr/geometrie_volumes.html
la feuille de style appelée dans <head> n'existe pas :

http://chti5933.free.fr/style.css

La feuille de style est sûrement présente en local sur ton disque,
mais elle n'a pas été uploadée sur le serveur free, ou bien pas dans le bon répertoire

sinon je ne vois pas trop ...

Excusez moi, Une suite d'erreur de ma part , corrigées maintenant

la feuille de style effacée , est rétablie

la solution
<img, class gauche>
<img class droite>
<p>
<P>
ne me satisfait pas
car j'ai l'image de gauche et à sa droite les 2 paragraphes
et DESSOUS L'image de gauche
pas les 2 paragraphes entre les images comme je le souhaitais

divers autres essais m'on conduit à
<p, img gauche>
<p img droite >

pas parfait mais acceptable , othodoxe ???

voyez ici : http://chti5933.free.fr/geometrie_volumes.html

je suis prêt à d'autres essais

Merci

Pierre

Hello Pierre,
la solution
<img, class gauche>
<img class droite>
<p>
<P>

fonctionne très bien à condition de corriger la feuille de style :

img {
border: none;
margin: 3px 6px 4px 10px;
max-width: 910px;
clear: both;
}

le "clear:both;" est à supprimer, d'ailleurs à supprimer partout ! sauf dans ".degagement" sinon gros problèmes avec les objets flottants ... et n'uitiliser ".degagement" que si nécessaire

c'est bon maintenant ?

Merci , cela fonctionne

et bravo pour la persévérance dans l'aide

Pierre

farang a écrit :
Hello Pierre,
la solution
&lt;img, class gauche&gt;
&lt;img class droite&gt;
&lt;p&gt;
&lt;P&gt;

fonctionne très bien à condition de corriger la feuille de style :

img {
border: none;
margin: 3px 6px 4px 10px;
max-width: 910px;
clear: both;
}

le "clear:both;" est à supprimer, d'ailleurs à supprimer partout ! sauf dans ".degagement" sinon gros problèmes avec les objets flottants ... et n'uitiliser ".degagement" que si nécessaire

c'est bon maintenant ?