problème de d'image avec compozer

senseo2006 · Message par **senseo2006** » 03 mai 2009, 13:07

Bonjour,
Bonjour, tout d'abord merci pour ce site qui est super intéressant, je fais l'exercice sur kompozer, j'ai réalisé le premier site, mais quand je fais la page "mes loisirs", la première photo est bien décalée à 25px cela fonctionne bien mon texte est bien collé à droite, pour la seconde image je décale à 125px, mais mon texte est décalé d'environ 4-5 cm de la photo, pourtant j'ai bien tout fait comme la photo précédante, dès que je remets ma photo à 25 px du bord le texte se recolle, j'ai vérifié la source, les indications sont pareilles, je me demande si il y a une façon de coller à droite correctement car le décalage n'est pas très beau, merci pour votre aide.
Voici la source

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>Mes loisirs</title><meta content="Nathalie LEFEVRE" name="author



</head>
<body style="width: 1245px;">
<a href="index.html">Accueil</a> | <a href="file:///D:/Site%20exercice%20Kompozer/loisirs.html">Loisirs
préférés</a> | <a href="chanteur.html">Chanteur
préféré</a> | <a href="chinois.html">Signe
astrologique chinois</a> | <a href="http://info.sio2.be/infobase/9/14.php">Site préféré</a>
| <a href="mailto:xxxxxxxxxxxxxxx">M'écrire</a><br>
<h1 style="background-color: red;">MON LOISIR PREFERE</h1>
<h2 style="background-color: white;"><img style="width: 300px; height: 225px; float: left;" alt="" src="images/img0155.jpg" hspace="30" vspace="15"><span style="background-color: red;">Les
perles&nbsp;</span></h2>
<p>J'adore réalise des bijoux, je crée, je brode...</p>
<p>J'adore faire des bracelets, des colliers des boucles
d'oreilles...</p>
<h2 style="text-align: left;"><br></h2><br><br><br><br><br><h2><img style="width: 300px; height: 263px; float: left;" alt="" src="images/mots_fleches.jpg" hspace="175"><span style="background-color: red;">Les mots fléchés</span></h2><p>j'aime beaucoup faire des mots fléchés, cela me détend.</p></body></html>

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2; IE7-01NET.COM-1.1; IE7-01NET.COM-1.1)

[modo]Adresse mail supprimée dans le texte du code[/modo]

electrophil · Message par **electrophil** » 03 mai 2009, 15:15

Bonjour,

Je crois qu'il faut que tu lises les tutoriels sur l'utilisation des feuilles de styles css.
Tu n'auras plus à utiliser les styles en ligne ni le balise <br> pour la mise en page.
Pour ta seconde photo, une petite marge à gauche suffirait à tout décaler (image et texte).
En attendant qu'un pro te réponde plus précisément, voici le 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 name="generator" content="HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org">
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>
      Mes loisirs
    </title>
    <meta content="Nathalie LEFEVRE" name="author">
    <style type="text/css">
.decalage {
    margin-left: 100px;
    float: left;
    margin-right: 30px;
    }

    </style>
  </head>
  <body style="width: 1245px;">
    <a href="index.html">Accueil</a> | <a href="file:///D:/Site%20exercice%20Kompozer/loisirs.html">Loisirs
    préférés</a> | <a href="chanteur.html">Chanteur préféré</a> | <a href="chinois.html">Signe astrologique
    chinois</a> | <a href="http://info.sio2.be/infobase/9/14.php">Site préféré</a> | <a href=
    "mailto:nathalie.lefevre.1973@gmail.com">M'écrire</a><br>
    <h1 style="background-color: red;">
      MON LOISIR PREFERE
    </h1>
    <h2 style="background-color: white;">
      <img style="width: 300px; height: 225px; float: left;" alt="" src="images/img0155.jpg" hspace="30" vspace=
      "15"><span style="background-color: red;">Les perles</span>
    </h2>
    <p>
      J'adore réalise des bijoux, je crée, je brode...
    </p>
    <p>
      J'adore faire des bracelets, des colliers des boucles d'oreilles...
    </p>
    <h2 style="text-align: left;">
      <br>
    </h2><br>
    <br>
    <br>
    <br>
    <br>
    <h2>
      <img style="width: 300px; height: 263px;" class="decalage" alt="" src="images/mots_fleches.jpg"><span style=
      "background-color: red;">Les mots fléchés</span>
    </h2>
    <p>
      j'aime beaucoup faire des mots fléchés, cela me détend.
    </p>
  </body>
</html>

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.10) Gecko/2009042513 Ubuntu/8.04 (hardy) Firefox/3.0.10 GTB5

Gagea · Message par **Gagea** » 03 mai 2009, 18:18

senseo2006 a écrit :la première photo est bien décalée à 25px cela fonctionne bien mon texte est bien collé à droite, pour la seconde image je décale à 125px, mais mon texte est décalé d'environ 4-5 cm de la photo, pourtant j'ai bien tout fait comme la photo précédante, dès que je remets ma photo à 25 px du bord le texte se recolle

Bonjour,
Tu remarqueras sur le tuto que la deuxième photo se situe à droite de la première en non pas sous la première. Pour réaliser cette mise en page du dois donner aux 3 images les mêmes espacements à gauche et à droite de 30 pixels. Mais, comme te conseille electrophil, ne t'attarde pas trop sur ce premier exercice car ce n'est qu'une prise en main du logiciel et ce n'est pas de cette façon qu'on réalise les mises en page. Bon courage pour la suite.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10

Message par **Ymai** » 04 mai 2009, 22:37

Gagea a écrit :Mais, comme te conseille electrophil, ne t'attarde pas trop sur ce premier exercice car ce n'est qu'une prise en main du logiciel et ce n'est pas de cette façon qu'on réalise les mises en page.

La voix bicéphale de la sagesse a parlé.

Geckozone

problème de d'image avec compozer

problème de d'image avec compozer

Re: problème de d'image avec compozer

Re: problème de d'image avec compozer

Qui est en ligne ?