mettre le texte à coté de l'image

Version imprimable

14/02/2009, 23h50
loic20h28

1 pièce(s) jointe(s)

mettre le texte à coté de l'image

Bonjour,

j'utilise HTML sous NotePad++ mais je ne connais pas la version du HTML, c'est pour cela que je n'est pas mis de préfixe dans l'intitulé de la discussion.

voila je réalise un site web en html et je souhaiterai savoir comment je peux faire pour mettre du texte a coté de l'image (au centre) comme indiqué sur l'image ci-jointe.

merci d'avance pour votre aide!!
15/02/2009, 01h31
GihefBey

Bonjour,

As-tu essayé de le faire ?
Comment ?
Montre-nous ton code.

Un moyen de faire ça serait d'utiliser un positionnement.
En absolute ferait l'affaire.

1 pièce(s) jointe(s)

réponse à GihefBey

Bonjour,

tout d'abord merci pour ta réponse.

Donc j'ai essayé avec un tableau voici le code que cela me donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <html> <title> amour fou entre marie et loic </title> <head> </head> <body background="fond_ecran-amour/test2.bmp"> <center><table> <td> <center>Toi et moi c'est un amour éternel, <br>Toi et moi c'est pour la vie je l'espère.</center> </td> <td> <center><IMG SRC="nous.jpg"></center> </td> <td> <a href="notre_rencontre.html">notre rencontre</a> <br><a href="#">les souvenirs en couple</a> </td> </table></center> </body> </html>
voici ci-joint l'image de ce que cela me donne.

Mon souci c'est que je souhaiterai que l'écriture, l'image et les liens c'est à dire que chaque contenu de chaque colonne ne soit pas collé, comment je peux donc faire??

cordialement!!

Après avoir corrigé quelques erreurs, tu peux faire ça facilement en plaçant ton texte dans des <p> et en leur appliquant des marges.

Par exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<title>amour fou entre Marie et Loïc</title>
  <style type="text/css">
  table p {
    margin: 32px;
    background-color: #fff;
    }
  </style>
	</head>
	<body background="pb_siteAmour.jpg/">
		<center>
		<table>
      <tr>
        <td>
          <p>Toi et moi c'est un amour éternel,<br>
          Toi et moi c'est pour la vie je l'espère.</p>
        </td>
        <td>
          <IMG SRC="amour.jpg">
        </td>
        <td>
          <p><a href="notre_rencontre.html">notre rencontre</a><br>
          <a href="#">les souvenirs en couple</a></p>
        </td>
      </tr>
		</table>
		</center>
	</body>
 
</html>

Ce qui pourrait donner ce résultat.

Mais tu n'as pas besoin de tableau pour faire ça.
Tu pourrais créer un bloc pour le texte et l'image.
Avec des dimensions et positionnements adaptés, il suffit ensuite de déplacer les paragraphes de texte.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
  <div id="conteneur">
    <div id="conteneur_image">
      <img src="amour.jpg" alt="love, Liebe, amor" />
      <p id="txt_gauche">
        Toi et moi c'est un amour éternel,<br>
        Toi et moi c'est pour la vie je l'espère.
      </p>
      <p id="txt_droite">
        <a href="notre_rencontre.html">notre rencontre</a><br>
        <a href="#">les souvenirs en couple</a>
      </p>
    </div>
  </div>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    html, body {
      margin : 0;
      padding : 0;
      text-align : center;
      color : #344979;
      background-color : #9fb2c1;
      }
    #conteneur {
      margin : 0 auto;
      width : 1278px;
      height : 634px;
      background : #9fb2c1 url(_pb_siteAmour.jpg) no-repeat center top;
      }
    #conteneur_image {
      position : relative;
      margin : 0 auto;
      width : 402px;
      height : 304px;
      border : 1px solid #9fb2c1;
      background-color : #fff;
      font-family : Georgia, serif;
      }
    #conteneur_image p {
      position : absolute;
      top : 40%;
      margin : 0;
      padding : 1em;
      width : 280px;
      background-color : #eee;
      }
    #conteneur_image #txt_gauche {
      left : -350px;
      text-align : right;
      }
    #conteneur_image #txt_droite {
      right : -350px;
      text-align : left;
      }

Ce qui pourrait donner ce résultat.

Pour quelques notions en HTML et CSS, visite http://web.developpez.com/cours/

-

15/02/2009, 19h14
loic20h28

réponse à GihefBey

Merci pour ta réponse, je vais explorer ceci.
15/02/2009, 21h06
loic20h28

j'ai exploré tes réponses, j'ai donc décidé d'utiliser ta première solution.

Merci vraiment pour ton aide!!