mettre le texte à coté de l'image

**loic20h28** · 14/02/2009, 23h50

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!!

**GihefBey** · 15/02/2009, 01h31

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.

**loic20h28** · 15/02/2009, 15h24

Bonjour,

tout d'abord merci pour ta réponse.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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!!

**GihefBey** · 15/02/2009, 17h10

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
      }