Geckozone

Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
https://forums.mozfr.org/

image et texte déplacer ?

https://forums.mozfr.org/viewtopic.php?t=74219

Page 1 sur 1

image et texte déplacer ?

Publié : 05 avr. 2009, 13:21
par desatan
Bonjour,

J'ai suivi le tuto pour insérer une image et du texte à droite de l'image.
Sous Kompozer, le rendu est impeccable mais quand je vais ouvrir ma page sous firefox, l'image est complètement à droite de l'écran.

Vous pouvez me dire pourquoi ?
Copier le sous kompozer, vous verez que les images sont bien à gauche et que le texte est à droite de l'image. J'ai mis dans les propriétés de l'image comme dans le tuto.
Après ouvrez la page avec firefox et vous verrez, tout est décallé ? Pourquoi ?

Voici mon code :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>Pedagogie</title>
<style type="text/css">
#menu ul {
padding-left: 0;
}
#menu li {
border: 1px solid #cc0000;
text-align: center;
float: left;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
width: 120px;
}
#menu a:visited {
color: #99ff99;
font-weight: bold;
text-decoration: none;
}
#menu a {
color: white;
font-weight: bold;
text-decoration: none;
background-color: #663333;
display: block;
}
#menu a:hover {
color: #000099;
background-color: #ffcccc;
}
</style></head><body
 style="background-image: url(images/fonds%20accueil.jpg); height: 62px;">
<h1 style="text-align: center; background-color: transparent;"><big><font
 size="+3"><big><span
 style="color: rgb(255, 102, 0);"><span
 style="color: rgb(153, 255, 153);">B</span><span
 style="color: yellow;">i</span><span
 style="color: rgb(0, 102, 0);">e</span><span
 style="color: rgb(153, 255, 255);">n</span><span
 style="color: rgb(204, 204, 255);">v</span><span
 style="color: rgb(255, 204, 255);">e</span><span
 style="color: rgb(255, 102, 102);">n</span><span
 style="color: rgb(102, 102, 102);">u</span><span
 style="color: rgb(102, 102, 0);">e</span> &agrave;
<span style="color: rgb(0, 0, 153);">l</span><span
 style="color: rgb(153, 51, 153);">a</span> <span
 style="color: rgb(204, 51, 204);">M</span><span
 style="color: rgb(204, 0, 0);">a</span><span
 style="color: rgb(51, 255, 51);">r</span><span
 style="color: rgb(102, 0, 0);">e</span><span
 style="color: rgb(255, 204, 204);">l</span><span
 style="color: rgb(204, 204, 255);">l</span><span
 style="color: rgb(102, 51, 102);">e</span> <span
 style="color: red;">d</span><span
 style="color: rgb(102, 102, 0);">e</span> <span
 style="color: rgb(102, 0, 204);">C</span><span
 style="color: rgb(204, 204, 204);">h</span><span
 style="color: rgb(255, 102, 102);">a</span><span
 style="color: rgb(255, 255, 51);">m</span><span
 style="color: rgb(51, 255, 51);">p</span><span
 style="color: rgb(51, 255, 255);">i</span><span
 style="color: rgb(102, 0, 204);">g</span><span
 style="color: black;">n</span><span
 style="color: rgb(204, 51, 204);">y&nbsp;<a
 name="hautpage"></a></span></span></big></font></big></h1>
<ul id="menu"><li><a href="Accueil.html">Accueil</a>
</li><li><a href="Pedagogie.html">Pedagogie</a>
</li><li><a href="Inscription.html">Inscription</a>
</li><li><a href="Nous%20contacter.html">Nous
contacter</a>
</li><li><a href="Liens%20utiles.html">Liens
utiles</a></li>
<li><a href="Livre%20d%27or.html">Livre d'or</a></li>
</ul><p style="text-align: justify; color: rgb(25, 16, 99);"><b><span
 style="font-family: "Comic Sans MS";"></span></b></p><h1><b><span
 style="font-family: "Comic Sans MS";"><span
 style="color: rgb(25, 16, 99);">A la Marelle, c'est :</span></span></b></h1><p
 style="text-align: justify; color: rgb(25, 16, 99);"><b><span
 style="font-family: "Comic Sans MS";">* Des moments
&laquo;&nbsp;lecture&nbsp;&raquo; :</span></b><span
 style="font-family: "Comic Sans MS";">&nbsp;</span><span
 style="font-family: "Comic Sans MS";"></span></p><p
 style="text-align: justify; color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";"><img
 style="width: 150px; height: 146px; float: left;" alt=""
 src="images/fond%20banquette.jpg" hspace="25" vspace="15"></span></p><p
 style="text-align: justify; color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";">A travers le livre,
les enfants
d&eacute;veloppent leur imaginaire, ressentent,&nbsp;<br>connaissent
et
d&eacute;veloppentdes sensations. Il y a un apprentissage&nbsp;<br>du
langage et une sensibilisation &agrave; la lecture.</span></p><p
 style="text-align: justify; color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";"></span></p><p
 style="text-align: justify; color: rgb(25, 16, 99);"><b
 style="color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";"></span></b></p><p><b
 style="color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";"></span></b></p><p><b
 style="color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";">*
L&rsquo;&eacute;veil musical</span></b><span
 style="color: rgb(25, 16, 99);"> : </span></p><span
 style="font-family: "Comic Sans MS";"><br><img
 style="width: 150px; height: 146px; float: left;" alt=""
 src="images/fond%20set%20musical.jpg" hspace="25"
 vspace="15"><br><br><span
 style="color: rgb(25, 16, 99);">Il s&rsquo;agit de la
manipulation de
percussions, de l&rsquo;&eacute;ducation de
l&rsquo;ou&iuml;e, <br>reconna&icirc;tre
des bruits familiers, apprendre &agrave; &eacute;couter et
chanter.</span></span><b style="color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";"></span></b><p><b
 style="color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";"></span></b></p><p><b
 style="color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";"></span></b></p><p><b
 style="color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";"></span></b></p><p><b
 style="color: rgb(25, 16, 99);"><span
 style="font-family: "Comic Sans MS";">* La
psychomotricit&eacute; </span></b><span
 style="font-family: "Comic Sans MS";"><span
 style="color: rgb(25, 16, 99);">: </span></span></p><span
 style="font-family: "Comic Sans MS";"><br><img
 style="width: 167px; height: 166px; float: left;" alt=""
 src="images/fond%20motricite.jpg" hspace="25" vspace="15"><span
 style="color: rgb(25, 16, 99);">Ma&icirc;trise du tonus
(module en
mousse en pente, escalier, &hellip;). <br>Ma&icirc;trise
des fonctions
locomotrices et de l&rsquo;autonomie. <br>Activit&eacute;s
d&rsquo;&eacute;quilibre (parcours d&rsquo;obstacles). <br>Le
but est
de prendre conscience de son corps et de ses limites. <br>C&rsquo;est
aussi d&rsquo;ob&eacute;ir &agrave; des consignes simples,
suivre un
chemin, <br>se d&eacute;placer d&rsquo;un point
&agrave; un autre,
apprendre des notions comme<br>&nbsp;int&eacute;rieur,
ext&eacute;rieur, devant, derri&egrave;re ou dessus, dessous.</span></span><br><br><br><br><br><br><br><ol
 style="color: rgb(25, 16, 99);" start="1" type="1"><li
 class="MsoNormal" style="text-align: justify;"><b><span
 style="font-family: "Comic Sans MS";">Les
activit&eacute;s praxiques:</span></b><span
 style="font-family: "Comic Sans MS";"> Elles
n&eacute;cessitent un
entra&icirc;nement des gestes dans un but pr&eacute;cis. Il
s&rsquo;agit d&rsquo;associer sa pens&eacute;e et ses
r&eacute;alisations manuelles, de d&eacute;velopper la
m&eacute;moire
et la pens&eacute;e logique. Par exemple, puzzle, dominos, loto,
jeux
de constructions, de tris, coloriage, etc.</span> </li><li
 class="MsoNormal" style="text-align: justify;"><b><span
 style="font-family: "Comic Sans MS";">Les
activit&eacute;s manuelles:</span></b><span
 style="font-family: "Comic Sans MS";"> La peinture, le
collage, les
gommettes, par exemple ont pour but la prise de conscience de
l&rsquo;espace en rapport avec la trace laiss&eacute;e.
C&rsquo;est
aussi l&rsquo;occasion d&rsquo;acqu&eacute;rir la souplesse
du poignet,
de la main et des doigts. Les enfants d&eacute;veloppent leur
pens&eacute;e logique, ils rep&egrave;rent les couleurs, les
formes et
les tailles. </span></li></ol>
<p class="MsoNormal"
 style="text-align: justify; color: rgb(25, 16, 99);"><o:p>&nbsp;</o:p></p>
<p class="MsoNormal" style="text-align: justify;"><o:p>&nbsp;</o:p></p>
<p class="MsoNormal" style="text-align: justify;"><o:p>&nbsp;</o:p></p>
<ol start="6" type="1"><li class="MsoNormal"
 style="text-align: justify;"><b><span
 style="font-family: "Comic Sans MS";">Les
activit&eacute;s
sensorielles:</span></b><span
 style="font-family: "Comic Sans MS";">
Elles mettent en jeu les possibilit&eacute;s sensorielles de
l&rsquo;enfant. Ses sensations vont construire son domaine affectif
et
l&rsquo;aider &agrave; mieux percevoir ce qui
l&rsquo;entoure. Toucher
diff&eacute;rentes mati&egrave;res, sentir (boites &agrave;
odeurs),
voir (loto, domino, jeux de m&eacute;moire), go&ucirc;ter,
&eacute;couter (reconna&icirc;tre des sons). </span></li><li
 class="MsoNormal" style="text-align: justify;"><b><span
 style="font-family: "Comic Sans MS";">Les jeux de
manipulation:</span></b><span
 style="font-family: "Comic Sans MS";"> Modelage,
p&acirc;te &agrave;
sel, p&acirc;te &agrave; modeler Sensibilit&eacute; du
toucher : sable,
farine, graine, etc. Jeux d&rsquo;eau notion de volume (dedans,
dehors)
</span></li><li class="MsoNormal"
 style="text-align: justify;"><b><span
 style="font-family: "Comic Sans MS";">La cuisine: </span></b><span
 style="font-family: "Comic Sans MS";">Recettes simples
&agrave; la
port&eacute;e des enfants sont propos&eacute;es. Faire la
cuisine
permet d&rsquo;&eacute;prouver le plaisir de la manipulation
des
ingr&eacute;dients, mais &eacute;galement
l&rsquo;&eacute;veil des
sens, satisfaction d&rsquo;une production que l&rsquo;on peut
go&ucirc;ter. </span></li><li class="MsoNormal"
 style="text-align: justify;"><b><span
 style="font-family: "Comic Sans MS";">Massage du
b&eacute;b&eacute;&nbsp;:</span></b><span
 style="font-family: "Comic Sans MS";"> pour que les plus
petits
participent &eacute;galement aux activit&eacute;s, ils
profitent du
massage pour &eacute;veiller leur perception du corps, leurs
sensations.<b><o:p></o:p></b></span></li></ol>
<big><span style="color: rgb(25, 16, 99);"
 class="linkGreen"></span></big><big><span
 style="color: rgb(25, 16, 99);" class="linkGreen"></span></big></body></html>
[modo: quand tu écrit un message, tu vois en haut de la fenêtre du message différentes cases pour mettre en gras, italique, etc...
Aussi, quand tu insère du code issu de KompoZer, merci de sélectionner le code copié dans ton message et de cliquer ensuite dans la case "code": ton message sera nettement plus lisible[/modo]
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Publié : 06 avr. 2009, 13:42
par desatan
s'il vous plaît, un petit coup d emain pour résoudre mon problème du dessus :cry:

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Publié : 06 avr. 2009, 15:17
par chinon37
le problème, c'est qu'on a une page pleine de tout et n'importe quoi.
Il y a 1 000 paragraphes vides, probablement du copié-collé en provenance de word qui amène des classe spéciales microsoft ...

Pour faire un site web, il faut déjà avoir un projet bien structuré.
Là, j'ai l'impression que tu fait ton site au coup par coup et à coup de touches "entrée" sur le clavier... Ben, c'est pô comme ça que ça marche!

On peut aider, on n'y manque pas... sur des problèmes précis. Mais on ne peut pas systématiquement reprendre les tutos qui ont été rédigés et sont généralement précis.
reprend tranquillement ta copie, élimine tout ce qui est inutile, essaie de comprendre le positionnement des blocs, etc...
Quand tout ça aura été assimilé, reviens avec les points qui achoppent.

Publié : 06 avr. 2009, 15:47
par desatan
bein en fait, tout n'est pas n'importe quoi.



Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Publié : 06 avr. 2009, 18:12
par GAUNCE
Tu devrais faire ce que te dit Chinon, il ne fait pas que du bon vin, il fait aussi d'excellents conseils!
Là ou tu es perdu, même le Petit Poucet, magré ses cailloux ne retrouverait pas son chemin! :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Publié : 06 avr. 2009, 20:38
par desatan
bon j'ai tout effacer et je recommence.
Voici mon code de départ avec un titre mise en forme et une barre de navigation :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>Pedagogie</title>
<style type="text/css">
#menu ul {
padding-left: 0;
}
#menu li {
border: 1px solid #cc0000;
text-align: center;
float: left;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
width: 120px;
}
#menu a:visited {
color: #99ff99;
font-weight: bold;
text-decoration: none;
}
#menu a {
color: white;
font-weight: bold;
text-decoration: none;
background-color: #663333;
display: block;
}
#menu a:hover {
color: #000099;
background-color: #ffcccc;
}
</style></head><body
 style="background-image: url(images/fonds%20accueil.jpg); height: 62px;">
<h1 style="text-align: center; background-color: transparent;"><big><font
 size="+3"><big><span
 style="color: rgb(255, 102, 0);"><span
 style="color: rgb(153, 255, 153);">B</span><span
 style="color: yellow;">i</span><span
 style="color: rgb(0, 102, 0);">e</span><span
 style="color: rgb(153, 255, 255);">n</span><span
 style="color: rgb(204, 204, 255);">v</span><span
 style="color: rgb(255, 204, 255);">e</span><span
 style="color: rgb(255, 102, 102);">n</span><span
 style="color: rgb(102, 102, 102);">u</span><span
 style="color: rgb(102, 102, 0);">e</span> &agrave;
<span style="color: rgb(0, 0, 153);">l</span><span
 style="color: rgb(153, 51, 153);">a</span> <span
 style="color: rgb(204, 51, 204);">M</span><span
 style="color: rgb(204, 0, 0);">a</span><span
 style="color: rgb(51, 255, 51);">r</span><span
 style="color: rgb(102, 0, 0);">e</span><span
 style="color: rgb(255, 204, 204);">l</span><span
 style="color: rgb(204, 204, 255);">l</span><span
 style="color: rgb(102, 51, 102);">e</span> <span
 style="color: red;">d</span><span
 style="color: rgb(102, 102, 0);">e</span> <span
 style="color: rgb(102, 0, 204);">C</span><span
 style="color: rgb(204, 204, 204);">h</span><span
 style="color: rgb(255, 102, 102);">a</span><span
 style="color: rgb(255, 255, 51);">m</span><span
 style="color: rgb(51, 255, 51);">p</span><span
 style="color: rgb(51, 255, 255);">i</span><span
 style="color: rgb(102, 0, 204);">g</span><span
 style="color: black;">n</span><span
 style="color: rgb(204, 51, 204);">y&nbsp;<a
 name="hautpage"></a></span></span></big></font></big></h1>
<ul id="menu"><li><a href="Accueil.html">Accueil</a>
</li><li><a href="Pedagogie.html">Pedagogie</a>
</li><li><a href="Inscription.html">Inscription</a>
</li><li><a href="Nous%20contacter.html">Nous
contacter</a>
</li><li><a href="Liens%20utiles.html">Liens
utiles</a></li>
<li><a href="Livre%20d%27or.html">Livre d'or</a></li>
</ul></body></html>
Avant que je continue, pouvez-vous me dire si ce code contient des anomalies ?

Donc je veux insérer plusieurs images l'une en dessous des autres et à gauche de la feuille avec du texte à droite à côté de chaque image.
Dans le tuto, je veux suivre la marche comme pour la feuille mes loisirs préférés.
Il est écrit 3 sous tires de niveau 2 suivis de quelques lignes de texte dans chacun des 3 paragraphes.
Donc là je suis perdu. Sous kompozer je vois, corps de texte paragraphe, titre 1, titre 2...
Je ne vois pas sous tires de niveau 2 ?
Merci de m'aider s'il vous plaît

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Publié : 06 avr. 2009, 20:56
par Gagea
Bonjour,
Dans une page web, un titre de niveau 2 est un sous titre par rapport au niveau 1. :)
Tu avancerais plus vite si tu faisais les exercices tels qu'ils sont décrits sans penser à ton projet. Quand tu auras assimilé l'ensemble du tuto tu pourras songer à appliquer tes connaissances.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8
Fuseau horaire sur UTC+02:00
Page 1 sur 1

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru