Commentaire entre balise div 3 images

**Korben_Debile** · 07/06/2007, 17h52

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

**blueice** · 07/06/2007, 18h06

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.

**Korben_Debile** · 07/06/2007, 18h14

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

, je vous en supplie ... aidez moi ouiiiiiiiiinnnnn.

**blueice** · 07/06/2007, 18h20

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/

**Korben_Debile** · 08/06/2007, 00h27

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

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

**Korben_Debile** · 08/06/2007, 10h23

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

**Korben_Debile** · 08/06/2007, 17h58

Personne n'a une idée ? vraiment ? -.-

**Maxoo** · 08/06/2007, 18h10

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

**Korben_Debile** · 08/06/2007, 18h18

Envoyé par Maxoo

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

Heuuuuuu

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

**Maxoo** · 08/06/2007, 18h22

Code :

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

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

++

**Korben_Debile** · 08/06/2007, 18h32

Maxoo

tu es mon dieu... CA MARCHE ENFIN OUHAAAAAAAAAAAAA

Si j'étais gay je te ferai un gros calin tout de suite

Merci, merci et encore une fois merci !

Sujet

**blueice** · 08/06/2007, 19h10

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

Au contraire il ne faut pas mettre les guillemets

**Maxoo** · 08/06/2007, 21h14

Envoyé par blueice

Au contraire il ne faut pas mettre les guillemets

et non !!

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

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

**blueice** · 09/06/2007, 07h53

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

Sinon, je suis tout à fait d'accord avec toi pour le coup de la lisibilité.

**Maxoo** · 09/06/2007, 10h55

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

Commentaire entre balise div 3 images

HTML

Discussions similaires

Partager

Partager