Discussion :

[MasterOfChakhaL]

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

[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;...)

[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

[titoumimi]

Petit exemple :
HTML

Code :

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

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 :

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

[MasterOfChakhaL]

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 :

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

1
2
3
4
 
     | bla bla bla |
  | bla bla bla bla |
     | bla bla bla |

et que j'ai cela

Code :

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

1
2
3
4
 
     | bla bla bla |
  |    bla bla bla    |
     | bla bla bla |

[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

[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

[titoumimi]

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

[MasterOfChakhaL]

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 :

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
 
	<div id="pensee" >
		<!-- masque de la bulle-->
		<b class="m1 gauche"></b>
		<b class="m1 droite"></b>
		<b class="m2 gauche"></b>
		<b class="m2 droite"></b>
		<b class="m3 gauche"></b>
		<b class="m3 droite"></b>
		<b class="m4 gauche"></b>
		<b class="m4 droite"></b>
		<b class="m4 gauche"></b>
		<b class="m4 droite"></b>
		<b class="m3 gauche"></b>
		<b class="m3 droite"></b>
		<b class="m2 gauche"></b>
		<b class="m2 droite"></b>
		<b class="m1 gauche"></b>
		<b class="m1 droite"></b>
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 :

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
 
#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 <b ...>&nbsp;</b> 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...

[MasterOfChakhaL]

bon, ben voilà en mettant cela:

Code :

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

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"
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 '&nbsp; ' devant, ca marche (un espace insécable ET un espac sécable). Décidemment, je ne comprends pas tout...