Commentaire entre balise div 3 images

Version imprimable

07/06/2007, 17h52
Korben_Debile

Commentaire entre balise div 3 images

Bonjour a vous,

J'aimerai savoir comment faire pour mettre un commentaire entre 2 images de taille fixe, ainsi qu'une 3eme image au milieu qui ferai office de background.

L'illustration simple et précise de ce que je voudrai faire se situe sur ce site, j'aimerai refaire exactement la meme chose que les bulles de BD en commentaire :

http://www.babylon-design.com/site/i...te-style-web-2
07/06/2007, 18h06
blueice

Tu viens de le dire... il suffit de faire une div avec une image en haut en background, idem en bas et ensuite de faire une div avec une image en background qui se répète sur l'axe Y. et d'écrire dans cette div.
07/06/2007, 18h14
Korben_Debile

Citation:

Envoyé par blueice

Tu viens de le dire... il suffit de faire une div avec une image en haut en background, idem en bas et ensuite de faire une div avec une image en background qui se répète sur l'axe Y. et d'écrire dans cette div.

En réalitée j'aurai besoin du code, je débute en css, j'essaie d'apprendre le coté "graphique" des choses mais j'ai beaucoup de mal avec les div, j'ai du passer 500 requetes differentes sous google et plus de 15 heures a essayer de trouver le bon code sans succes, au mieux je suis arrivé a des div ou le background debordait avec l'image du milieu. La majoritée des reponses données par google sont un commentaire entre 6 images haut_droite, haut_mid, haut_gauche, bas_gauche, bas_mid, etc.... mais pas avec 3 images :(

Je suis désespéré, je ne tiens plus, tout le monde trouve ca si facile et moi je me sens ridicule :aie: , je vous en supplie ... aidez moi ouiiiiiiiiinnnnn.
07/06/2007, 18h20
blueice

C'est hyper simple, il te suffit de regarder le code du lien que tu as donné, d'autant que j'avais déjà expliqué à une autre personne comment faire, en donnant un exemple fait à l'arrache,
cf http://www.dimension-internet.com/dev/decoupe/

Voila, je progresse mais pas tres vite lol, j'ai fait ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<style>
#haut { background:url(images/commentaire_haut.png) no-repeat; height:15px; width:372px; }
#centre { background:url(images/commentaire_fond.png) repeat-y; width:372px;}
#bas { background:url(images/commentaire_bas_dte.png) no-repeat; height:33px; width:372px; }
</style>
 
(.....)
 
<div id="haut"></div>
<div id="centre">
Coucou
<br>
C'est bien moi et le petit poucet qui disait ho la la et bien oui c'etait moi hihihihi jojojo
</div>
<div id="bas"></div>

Cependant il y a toujours un probleme, j'ai toujours un écart entre l'image du haut et celle du milieu....

Quelqu'un aurait-il une réponse svp ?

08/06/2007, 10h23
Korben_Debile

http://magdalawane.free.fr/image/bulle_kc.jpg

J'ai beau m'arracher le cerveau, meme avec des margin et paddin... rien n'y fait.

Remarque : sous IE7 ca bug, sous firefox, ca marche -.-
08/06/2007, 17h58
Korben_Debile

Personne n'a une idée ? vraiment ? -.- :bug:
08/06/2007, 18h10
Maxoo

tu peux redonner ton code final qui te provoque cette erreur ?
merci je pense savoir d'ou ça vient.
08/06/2007, 18h18
Korben_Debile

Citation:

Envoyé par Maxoo

tu peux redonner ton code final qui te provoque cette erreur ?
merci je pense savoir d'ou ça vient.

Heuuuuuu :oops: qu'est ce que tu entends par code final ? Les seuls codes utilisés sont un peu plus haut entre les balises "[code]", j'utilise le style entre les balises [head] et [/head] et le code des div entre <body> et </body> .....

Code:

1
2
3
4
5
6
7
8
9
10
<style>
#haut { 
      background:url('images/commentaire_haut.png') 0 0 no-repeat;
      height:15px; 
      width:372px; 
      overflow:hidden;
}
#centre { background:url('images/commentaire_fond.png') 0 0 repeat-y; width:372px;}
#bas { background:url('images/commentaire_bas_dte.png') 0 0 no-repeat; height:33px; width:372px; }
</style>

Voila avec l'overflow, je suis sur que ça marche impecc. sinon n'oublie pas qu'il faut préciser la position (0 0) dans un background, et que le chemin des images doit etre en guillement !!

++

08/06/2007, 18h32
Korben_Debile

Maxoo :king: tu es mon dieu... CA MARCHE ENFIN OUHAAAAAAAAAAAAA :yaisse2: Si j'étais gay je te ferai un gros calin tout de suite :lol: Merci, merci et encore une fois merci ! :bravo:

Sujet :resolu:
08/06/2007, 19h10
blueice

Citation:

et que le chemin des images doit etre en guillement !!

Au contraire il ne faut pas mettre les guillemets ;)
08/06/2007, 21h14
Maxoo

Citation:

Envoyé par blueice

Au contraire il ne faut pas mettre les guillemets ;)

et non !!

http://www.w3.org/TR/REC-CSS2/colors...ckground-image

Citation:

The format of a URI value is 'url(' followed by optional whitespace followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. The two quote characters must be the same.

Ce qui nous donne que les guillemets sont optionnels, mais néanmoins très correct !!

D'ailleurs sur le site w3, la plupart des exemples ont des guillemets, car c'est bien plus pratique de voir que c'est une chaine de caractère comme valeur de url().

Bref, mettez des guillemets, c'est comme d'écrire echo 'toto '.$toto.' tata'; au lieu de echo "toto $toto tata"; on voit mieux de quoi on parle ;)
09/06/2007, 07h53
blueice

Il est préférable de ne pas les mettre car ils peuvent poser des problèmes avec certains navigateurs, comme IE sur Mac, même si IE n'existe plus sur Mac, certais doivent encore l'utiliser sur l'ancien système...

Et en prime on gagne quelques octets :mrgreen:

Sinon, je suis tout à fait d'accord avec toi pour le coup de la lisibilité.
09/06/2007, 10h55
Maxoo

Citation:

Envoyé par blueice

Il est préférable de ne pas les mettre car ils peuvent poser des problèmes avec certains navigateurs, comme IE sur Mac, même si IE n'existe plus sur Mac, certais doivent encore l'utiliser sur l'ancien système...

Ah bon, ca peut poser des problèmes ??
je savais pas..., mais je le ferai plus !! :king: