Remplir une "bulle" avec du texte. Quel point de départ?

Version imprimable

15/06/2006, 10h36
MasterOfChakhaL

Remplir une "bulle" avec du texte. Quel point de départ?

Bonjour,

J'aimerais avoir l'avis du forum quant à la faisabilité de ceci.

j'ai une image (représentant un chacal qui pense...) avec une bulle du style BD.
Dans cette bulle, j'y ai positionnée une div qui contient donc la pensée du jour.
J'aimerais que mon texte colle un peu mieux au bord de ma bulle. En gros, j'aimerais simuler une div ellipsoïdale (ou a peu près).

J'ai la vague intuition que ceci serait possible en javascript.
J'ai également la vague intuition que l'utilisation d'une police monospace simplifierait le problème.

J'ai aussi la vague impression d'être dans le vague

Si quelqun a déjà réussi à faire des block non rectangulaire, quelque soit la forme, ca m'interesse énormément...

Merci d'avance de m'aider à régler ce problème existentiel
15/06/2006, 10h42
lieto

...j'ai peut etre pas compris le Pb, mais pourquoi ne pas avoir ta bulle avec l'intérieur transparent, et placé par dessus ton div de texte? (mais encore une fois, je suis pas sur d'avoir cerné le probleme;...)
15/06/2006, 10h42
titoumimi

tu doit pouvoir simuler une forme bizaroide avec des div...

Dans ton div bulle, tu va placer à chaque ligne deux divs, un en float left, l'autre en float right, afin de restreindre l'espace dispo. Ainsi, ton texte s'adaptera aux contours de ces blocs en float...

peut être pas idéal, mais une technique comme une autre ;)

Petit exemple :
HTML

Code:

1
2
3
4
5
6
7
8
9
	<div id="bulle">
		<div class="ligne_1_3_gauche"></div>
		<div class="ligne_1_3_droite"></div>
		<div class="ligne_2_gauche"></div>
		<div class="ligne_2_droite"></div>
		<div class="ligne_1_3_gauche"></div>
		<div class="ligne_1_3_droite"></div>
		Bonjour tout le monde, ça va, la forme ? Top !!! Cool.
	</div>

CSS

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
#bulle {
	background-color:#00CCFF;
	text-align:center;
	width:150px;
	height:120px;
	}
.ligne_1_3_gauche {
	clear:both;
	background-color:#FF6666;
	width:50px;
	height:40px;
	float:left;
	}
.ligne_1_3_droite {
	background-color:#FF6666;
	width:50px;
	height:40px;
	float:right;
	}
.ligne_2_gauche {
	clear:both;
	background-color:#99CC33;
	width:30px;
	height:40px;
	float:left;
	}
.ligne_2_droite {
	background-color:#99CC33;
	width:30px;
	height:40px;
	float:right;
	}

C'est super lourd (et encore, y'a que 3 'niveaux'), mais ça me semble correspondre à ta demande ;)

15/06/2006, 10h56
MasterOfChakhaL
Citation:

Envoyé par titoumimi

tu doit pouvoir simuler une forme bizaroide avec des div...

Dans ton div bulle, tu va placer à chaque ligne deux divs, un en float left, l'autre en float right, afin de restreindre l'espace dispo. Ainsi, ton texte s'adaptera aux contours de ces blocs en float...

peut être pas idéal, mais une technique comme une autre ;)

ah ben ca je trouve que c'est une bonne idée... c'est beaucoup moins tordu que tout ce à quoi j'avais pensé...
je crois que ce sera plus simple de positionner mes div en absolu puisque la div de la pensée est déjà en absolu...
je suis bien content d'avoir posté ici avant d'essayer le forum javascript....

pour lieto:
por l'instant, j'ai fait comme tu as dit mais le problème est que l'alignement du texte est vertical et que je cherche à plutot à faire ceci:
Code:

1 2 3 4 | bla bla bla | | bla bla bla bla | | bla bla bla |
et que j'ai cela
Code:

1 2 3 4 | bla bla bla | | bla bla bla | | bla bla bla |
15/06/2006, 10h58
MasterOfChakhaL

et en plus, maintenant il y a un code!!!

franchement merci.

je vais faire avec ca mais je pense que ca ira très bien vu que mon nombre de ligne est fixe.
Dans ce cas la lourdeur ne me dérange vraiment pas. C'est vraiment pour faire un truc qui sert pas à grand chose ...
bon avec un peu de chance, je clique résolu dans 15 minutes
15/06/2006, 11h59
MasterOfChakhaL

manifestement, il y a unn souci avec le clear: both;

ca ne passe correctement que sous IE...

sur les autres navigateurs, ca me donne un résultat que je trouve normal:
un block de "masque" par ligne...

bon je continue à chercher car je pense ne pas être loin mais si quelqun à une idée, ne vous gênez surtout pas
15/06/2006, 12h02
titoumimi

Citation:

Envoyé par MasterOfChakhaL

ca ne passe correctement que sous IE...

étrange ça ... J'avait testé sous FF, ça passe niquel pile poil, je viens de tester sous IE, ça me fait un gros pâté :p

oui effectivement, j'ai dit une bêtise car je n'avais bien vu ton code

j'avais mis clear both sur tous les éléments...

toi, tu ne le mets que sur les éléments qui masquent à gauche et je ne comprends pas bien pourquoi pour l'instant...

pour ceux qui veulent bien y réfléchir, je mets ce que j'ai déjà:

HTML:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <div id="pensee" >  A la pêche au mouleumouleu moule, je ne veux plus y aller maman... C'est malin, je l'ai dans la tête maintenant... </div>
et le CSS:
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 #pensee { position:absolute; top:25px; left:25px; width:397px; height:200px; overflow: hidden; color: #000; line-height: 25px; font-size: 20px; font-family: monospace; font-weight: bold; } b.m1, b.m2, b.m3, b.m4 { display: block; height: 25px; } b.gauche { float: left; clear: both; background-color: green; } b.droite { float: right; background-color: red; } b.m1 { width: 144px; } b.m2 { width: 60px; } b.m3 { width: 25px; } b.m4 { width: 7px; }
avec clear: both sur gauche et droite ca passe sous IE...

EDIT: en mettant des   ca passe nickel sous opera et FF mais plus sous IE (le masque gauche est bon, le droit fait un pâté), de plus, si dans "ma pensée" j'ai une balise html, IE n'affiche plus le texte de la pensée...

15/06/2006, 13h01
MasterOfChakhaL
bon, ben voilà en mettant cela:
Code:

1 2 3 b.gauche { float: left; clear: both; } b.droite { float: right; clear: right; }
ca marche sur les trois browsers que j'ai sous la main (FF, IE et Opéra)

la remarque disant que les balises html dans la pensée pose problème avec IE était finalement incorrecte...
le phénomène ne se produit que pour les phrases commençant par "J'aimerais" 8O 8O 8O
c'est le seul point commun aux phrases qui ne foncionnent pas...
Dans ce cas, le texte ne s'affiche pas et le masque est correcte sur les 6 premières lignes et n'apparaît pas pour les lignes 7 et 8...

Donc je passe le sujet à résolu.
Merci beaucoup titoumimi pour ton aide

si quelqun à une idée sur le pourquoi des phrases qui buggent sous IE, je suis preneur

EDIT: et bien en rajoutant '  ' devant, ca marche (un espace insécable ET un espac sécable). Décidemment, je ne comprends pas tout...