Organisation d'une page HTML: CSS et image

**Richard_Rahl** · 03/07/2008, 17h55

Bonjour!

J'ai un probleme d'organisation dans un CSS:

En fait je souhaiterais que le texte s'affiche dans la bulle et juste dans celle-ci...

Je vous colle ici le code:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
td.gauche{
	height:129px; width:165px;  
	background-image:url(Bulle_gauche.png);
 
}
td.droite{
	height:129px; width:165px; 
	background-image:url(Bulle_droite.png);
 
}
 
 
.gauche_txt{
	font-size:13px;
	position: relative;
	top:20px;
	left:20px;
	background:#006666;
	}
 
.droite_txt{
	font-size:13px;
	height:74px;
	width:124px;
	text-align:center;
	position: relative;
	top:20px;
	left:20px;
	}
	-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Essais</title>
</head>
 
<body>
 
 
 
<table border='0'>
	<tr>
   	  <td class='gauche'>Gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche
   	    gauche gauche gauche</td>
       <td class='droite'><p>Droite droite droite 11111<br />
         Droite droite droite 11111<br />
       Droite droite droite 11111<br />
      Droite droite droite 11111<br />
       Droite droite droite 11111</p>
      </td>
  </tr>
</table>
 
</body>
</html>

Merci d'avance !
Je pensais créer en fait dans chaque <td> un <div class='{dte|gch}_txt'> mais cela ne donne pas l'effet souhaité...

Richard_Rahl

**pop_up** · 03/07/2008, 19h24

1. Peux tu éditer ton post et mettre ton code entre balises "[ code ]" (bouton #)

2. Vu l'image que tu as jointe, le texte ne rentre pas dans la bulle, y en a trop

. Non juste pour dire que le fait de vouloir faire rentrer le texte dans la bulle n'est pas forcément idéal car si l'utilisateur zoom, la taille du texte va forcément s'augmenter et pas ton image (sauf opéra et firefox 3)

Pour placer ton texte, tu peux jouer sur les padding-left et padding-right sur tes td ou tes classes pour le texte. Mais tu rentreras pas beaucoup de texte dedans.

Sinon, tu peux essayer de faire quelque chose comme ceci mais bonjour la tete du code

**Richard_Rahl** · 03/07/2008, 19h42

En fait le but est de coller un extrait de témoignage, donc un texte de taille limité...

Je me rappelle avoir vu sur internet une image de fond pour les citations mais je ne la trouve plus ...

EDIT/

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
td.gauche{
	height:129px; width:165px;  
	background-image:url(Bulle_gauche.png);
 
}
td.droite{
	height:129px; width:165px; 
	background-image:url(Bulle_droite.png);
 
}
 
.txt{
	text-align:center;
	font-size:13px;
	height:74px;
	width:124px;
	padding-bottom:18px;
	padding-left:18px;
	padding-right:18px;
	padding-top:18px;
 
		}
	-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Essais</title>
</head>
 
<body>
<table border='0'>
	<tr>
   	  <td class='gauche'>
      		<div class='txt'>
            	<p>Coucou tout le monde je souhaite dire bonjour et je risque de ne pas partir nboebneo nbonbeon nbeonbeonebo</p>
           	</div>
      </td>
       <td class='droite'><div class='txt'>
            	<p>Coucou tout le monde je souhaite dire bonjour et </p>
           	</div></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

Voici le code modifié.
Et son résultat sur Firefox

**avogadro** · 05/07/2008, 03h32

ou bien édite tes png sous photoshop en métant un fond de ton choix autour de la loupe pour cacher le texte xD ça marche bien si il n'y a pas trop de design qui gène autour ^^

**Richard_Rahl** · 06/07/2008, 00h39

En fait l'idée est que le fond soit fixe, mais le texte est dynamique et extrait de la BDD....

**pop_up** · 07/07/2008, 09h18

Le mieux serait de trouver une image que tu puisses decouper en trois partie :
La partie haute et la partie basse qui s'affichent en haut et en bas de ton texte.
Et une image au milieu qui se reproduise avec un repeat-y comme ça, peu importa la longueur du texte, ça rentre.

Le problème avec ta bulle c'est qu'elle est ronde donc pas trés facile de faire un truc assez joli.

Avec une bulle de ce style ça marcherai

Organisation d'une page HTML: CSS et image

CSS

Vue hybride

Discussions similaires

Partager

Partager