Plusieurs images dans un background

**zooffy** · 24/10/2012, 14h28

Bonjour à tous.

Je reprends une page à zéro parce que j'ai fais pas mal d'ereur dans mon montage et je commence par le début : le background des div.
Mon designer est assez exigeant et me force à faie des div extensible, soit en hauteur, soit en largeur avec deux côtés définis (haut et bas ou droite et gauche) et une trame répétable au milieu.

Au départ j'ai palcé deux images au dessus et en dessous du Div (pour l'extension verticale) mais je m'aperçois que c'est compliqué à positionner dans la page ensuite.

Du coup, j'ai cherché sur le net et j'ai trouvé un truc qui me parraissait bien mais qui ne donne pas le résutlat escompté. Visiblement la répétition de la trame se fait un poil trop.

Voici le code d'essai que j'ai pour l'instant :

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
 
<!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><title></title>
<style media="all" type="text/css">
#contenu {
background:
url('/App_Themes/ModuleNews/commenthead.png') no-repeat center top, 
url('/App_Themes/ModuleNews/commentrepetable.png') repeat-y center center, 
url('/App_Themes/ModuleNews/commentfoot.png') no-repeat center bottom; 
width:616px;
height:100px;
}
</style>
</head>
<body>
<div id="newsGlobal" style="width:1001px;z-index:1000;position:relative;background-image:url('/App_Themes/ModuleNews/fondrepetable.png');background-repeat:repeat-y;padding-left:10px;padding-left:100px;">
<br /><br /><br />
 
<div id="contenu">
Du texte extensible dans la hauteur
</div><br /><br /><br /><br /><br /><br /><br /><br /><br />
<img alt="" src="/App_Themes/ModuleNews/commenthead.png" />
<div style="height:100px;width:616px;background-image:url('/App_Themes/ModuleNews/commentrepetable.png');background-repeat:repeat-y;">
Le résultat que j'attends avec mon ancienne méthode.</div>
<img alt="" src="/App_Themes/ModuleNews/commentfoot.png" />                   
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>

Ne tenez pas compte du div Global, il est là juste pour que je n'ai pas un fond blanc.

Et voici donc la capture d'écran, le div du dessous étant ce que j'attend comme résultat.

Pourriez vous me dire si la méthode CSS3 que j'ai trouvé en valable pour ce que je veux faire et si oui, pourquoi j'ai ce débordement de la trame répétable ?

Sinon, que feriez vous pour obtenir le cade du bas de manière plus optimisée ?

Merci d'avance.

**Bovino** · 24/10/2012, 14h34

Quand tu superposes des transparences, ben c'est sûr que le résultat est plus opaque...
Ensuite, si c'est juste l'ombrage que tu cherches à faire, pourquoi ne pas utiliser box-shadow qui est précisément fait pour ça ?

**zooffy** · 24/10/2012, 14h41

Merci pour ton aide.

Non, ce n'est pas juste l'ombrage, il s'agit bien d'image à proprement parler.
Il y en a une qui fait le haut du cadre, une autre le bas et une qui se répète en hauteur. Et j'ai pas mal de cas à traiter de cette manière dans le site.

Et ce que je vois avec le multiple background c'est que celle qui se répète au milieu se répète sur l'intégralité et recouvrant celle du haut et du bas.

Pourquoi la répatition ne se mets pas naturellement entre les deux qui sont fixées avec le no-repeat ?

Invité · 24/10/2012, 15h47

Bonjour,
un autre problème du background "multi-images" est qu'il n'est pas compatible avec les anciens navigateurs (IE7, IE8...).

Une solution simple "multi-div" :

Code css :

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
<style media="all" type="text/css">
#contenu {
	width:616px;
}
#contenu-top {
	background:url('/App_Themes/ModuleNews/commenthead.png') no-repeat center top, 
	height:10px;
}
#contenu-ctr {
	background:url('/App_Themes/ModuleNews/commentrepetable.png') repeat-y center center, 
	/* PAS DE HEIGHT ICI => extensible en hauteur */
	padding:5px 20px; /* décalage du texte */
}
#contenu-btm {
	background:url('/App_Themes/ModuleNews/commentfoot.png') no-repeat center bottom; 
	height:15px;
}
</style>

Code html :

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

1
2
3
4
5
6
7
<div id="contenu">
	<div id="contenu-top"></div>
	<div id="contenu-ctr">
	Du texte extensible dans la hauteur
	</div>
	<div id="contenu-btm"></div>
</div>

Cela dit, si ce que tu recherches est bien ce que tu as mis en image jointe (bords droits + ombrage),
c'est clair que tu as interêt à utiliser le CSS box-shadow !
Pour des bords arrondis, tu as aussi : border-radius.

Avantages ?
Aucune image à charger = temps d'affichage de la page diminué !

**zooffy** · 24/10/2012, 16h10

Merci pour ce code, je commançais à me dire que j'allais suivre cette piste.

Par contre j'ai tout de même un souci : ça fait pas le bon affichage, je poste une capture d'écran. J'ai bien relu et je ne vois pas de faute de frappe ou d'erreur particulière.

Le height je l'avais juste pour donner de la hauteur et voir, j'ai remplacer par des <br />

Enfin, non, ce n'est pas un ombrage mais bien des images à mettre. Sur d'autres parties du site c'est plus flagrand. Le designer travaille beaucoup sur l'alpha dans photshop du coup sans les images qui vont en dessous, ça se voit pas trop, mais c'est un cadre complet. J'ai essayé de négocier avec lui pour utiliser d'autre technique mais il est pire qu'n chanteur de Métal pour la négociation.....

Invité · 24/10/2012, 16h35

Manifestement, seul le background du div btm s'affiche.
Vérifie les chemins vers les images (background des divs top et ctr).

**zooffy** · 24/10/2012, 16h37

Les chemins c'est la première chose que j'ai vérifé, ils sont bons.
Et j'ai encore relu tout le code, je vois vraiment pas.

Invité · 24/10/2012, 17h48

Oups ! des virgules au lieu de point-virgule :
center top, => center top;
center center, => center center;

**zooffy** · 25/10/2012, 09h33

Effectivement, je n'ai pas vu non plus, ça marche beaucou pmieux maintenant. Petite adaptation sur le heigth du haut et du bas et ça roule.

Si j'ai le même cas dans le sens horizontal, ça s'adapte pareil, je suppose ?

Et donc, le multi image avec de la répétion, c'est mort, ça ne fonctionne qu'avec des No-Repeat, c'est bien ça ?

Merci pour tout, je vais pouvoir passer à la suite du montage du module avec un Div à manipuler. Mais je crains de ramer sur le positionnement d'une image à mettre par-dessus et qui dois déborder sur la gauche.

Invité · 25/10/2012, 10h44

Hello,
l'extension en largeur est plus délicate.
Il faut imposer la hauteur pour tous les div + display:inline-block;

Sauf erreur :

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
<style media="all" type="text/css">
#contenu2 {
	height:300px;
}
#contenu2-left {
	background:url('/App_Themes/ModuleNews/comment2left.png') no-repeat left top; 
	display:inline-block;
	height:300px;
	width:10px;
}
#contenu2-ctr {
	background:url('/App_Themes/ModuleNews/comment2repetable.png') repeat-x center center; 
	padding:5px 20px; /* décalage du texte */
	display:inline-block;
	height:300px;
	/* PAS DE WIDTH ICI => extensible en largeur */
}
#contenu2-right {
	background:url('/App_Themes/ModuleNews/comment2right.png') no-repeat right top; 
	display:inline-block;
	height:300px;
	width:15px;
}
</style>

Code :

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

1
2
3
4
5
6
7
<div id="contenu2">
	<div id="contenu2-left"></div>
	<div id="contenu2-ctr">
	Du texte extensible dans la largeur
	</div>
	<div id="contenu2-right"></div>
</div>

Invité · 25/10/2012, 10h47

Envoyé par zooffy

Mais je crains de ramer sur le positionnement d'une image à mettre par-dessus et qui dois déborder sur la gauche.

C'est justement à ça que sert le position:absolute; !
Il faut que le "parent" soit "positionné" : en position:relative;

**zooffy** · 25/10/2012, 11h21

Ok, j'ai testé la position Absolute et j'ai rencontré pas mal de souci sur l'extension vers le bas. Bizarrement (mais c'est parce que j'ai pas tout compris je crois) dés que je met de l'absolute, l'élément ne prend plus de hauteur et donc les éléments en dessous remontent et se "glissent" par dessous.

Mais en restant en relative j'ai réussi à faire mon placement comme il faut.
Par contre je bloque sur un truc qui m'échappe.

Avec le code (que j'espère avoir bien rédigé) j'ai le résultat qui se trouve sur la capture d'écran. Je voudrais que le bord gauche du cadre vert soit au même endroit que celui du cadre rouge. Là, le cadre vert se trouve sous le div d'â côté (qui n'a pas de cadre pour plus de lisibilité) alors que les deux devraient se suivre vers la gauche. En fait le même principe que mon problème du début, sauf que là au lieu d'aller vers le bas, on va vers la droite.

Et subsidiairement, j'ai un souci sur le bas du cadre mais je pense qu'avec un padding bien trouvé je vais régler le problème. Ce point n'est que subsidiaire.

Donc voici mon 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
<style media="all" type="text/css">
body {
    background-color:Black;
}
#contenu {
 
}
#contenu-top {
	background:url('/App_Themes/ModuleNews/commenthead.png') no-repeat center top;
	height:7px;
	width:616px;
}
#contenu-ctr {
	background:url('/App_Themes/ModuleNews/commentrepetable.png') repeat-y center center;
	width:616px;
	position:relative;
}
#contenu-btm {
	background:url('/App_Themes/ModuleNews/commentfoot.png') no-repeat center bottom; 
	height:10px;
	width:616px;
}
#TexteComment {
    padding-left:99px;
    padding-bottom:5px;
    top:10px;
    position:relative;
}
#TexteComment-top {
    background:url('/App_Themes/ModuleNews/textcommenthaut.png') no-repeat center top;
	height:7px;
	width:504px;
}
#TexteComment-ctr {
    background:url('/App_Themes/ModuleNews/textcommentrepetable.png') repeat-y center center;
	width:504px;
}
#TexteComment-btm {
    background:url('/App_Themes/ModuleNews/textcommentbas.png') no-repeat center bottom; 
	height:7px;
	width:504px;
}
#divAvatar {
    position:relative;
    background-image:url('/App_Themes/ModuleNews/fondavatarcommentaire.png');
    background-repeat:no-repeat;
    width:94px;
    height:95px;    
    float:left;
    left:-16px;
    top:10px;
}
#divPoste {
    height:28px;
    position:relative;
    left:-16px;
}
#divPoste-gau {
    background:url('/App_Themes/ModuleNews/postecommentgauche.png') no-repeat left center;
	height:28px;
	width:34px;	
	float:left;
	left:-30px;
}
#divPoste-ctr {
    background:url('/App_Themes/ModuleNews/postecommentrepetable.png') repeat-x right top;
	height:28px;
	left:34px;
	border:solid 1px Green;
	padding-top:5px;
}
</style>
</head>
<body>
<div id="newsGlobal" style="width:1001px;position:relative;background-image:url('/App_Themes/ModuleNews/fondrepetable.png');background-repeat:repeat-y;padding-left:100px;">
<br /><br /><br />
 
<div id="contenu">
	<div id="contenu-top"></div>
	<div id="contenu-ctr">
	    <div id="divPoste">
	        <div id="divPoste-gau"></div>
	        <div id="divPoste-ctr">
	            <span id="Span2" style="border:solid 1px Red;">
                    <span class='PseudoComment'>news1</span> 
                    <span class='TitreComment'>Le grand malade</span><span class='posteComment'>le </span>
                    <span class='posteCommentDate'>15/10/2012 </span><span class='posteComment'>à </span>
                    <span class='posteCommentDate'>16:54 </span><span class='posteComment'>a posté</span>
                </span>
	        </div>
	    </div>
	    <div id="divAvatar">
            <img alt="" id="Img1" src="App_Themes/PhotoUser/AvatarCarre/bfa6aea8-0adb-4064-8b60-bb1e2ef282f6.png" style="border-width:0px;" />
        </div>
	    <div id="TexteComment">
	        <div id="TexteComment-top"></div>
	        <div id="TexteComment-ctr">
	            <span id="Span1" style="position:relative;display:inline-block;width:490px;padding:5px;"><span class='TexteComment'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span></span>
	        </div>
	        <div id="TexteComment-btm"></div>
	    </div>
	</div>
	<div id="contenu-btm"></div>
</div>

Je joins donc une capture d'écran pour montrer les cadres de couleur.

Je ne vois pas bien ce que j'ai loupé.

Merci pour le coup de main.

PS : avec un fong noir on voit mieux le cadre image de mon designer

**zooffy** · 25/10/2012, 12h09

J'ai trouvé mon souci, j'ai oublié de mettre des position sur certains Div. Du coup, c'est réglé.

Mais maintenant, je rencontre un autre souci parce que je dois pas avoir bien saisi le fonctionnement de float et de clear

Donc, je dois placer un div sur la droite en face du div où il y a les indications de postage.

Mais en posant le div avec un float:right, il se place bien mais trop bas. En mettant un top négatif il remonte bien mais la place qu'il laisse fait descendre tout le reste.
J'ai placé des clear là où je pensais faire bien, mais je crois que j'ai merdouillé à un endroit et je trouve pas lequel.

Voici le code à jour et la capture d'écran avec un cadre rouge qui devrait être au même endroit que le cadre vert, avec les mêmes dimensions.

Merci pour le coup de main.

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
<style media="all" type="text/css">
body {
    background-color:Black;
}
#contenu {
 
}
#contenu-top {
	background:url('/App_Themes/ModuleNews/commenthead.png') no-repeat center top;
	height:7px;
	width:616px;
}
#contenu-ctr {
	background:url('/App_Themes/ModuleNews/commentrepetable.png') repeat-y center center;
	width:616px;
	position:relative;
}
#contenu-btm {
	background:url('/App_Themes/ModuleNews/commentfoot.png') no-repeat center bottom; 
	height:10px;
	width:616px;
}
#TexteComment {
    padding-left:99px;
    padding-bottom:15px;
    top:10px;
    position:relative;
}
#TexteComment-top {
    background:url('/App_Themes/ModuleNews/textcommenthaut.png') no-repeat center top;
	height:7px;
	width:504px;
}
#TexteComment-ctr {
    background:url('/App_Themes/ModuleNews/textcommentrepetable.png') repeat-y center center;
	width:504px;
	border:solid 1px Green;
	padding-top:-10px;
	position:relative;
}
#TexteComment-btm {
    background:url('/App_Themes/ModuleNews/textcommentbas.png') no-repeat center bottom; 
	height:7px;
	width:504px;
}
#divAvatar {
    position:relative;
    background-image:url('/App_Themes/ModuleNews/fondavatarcommentaire.png');
    background-repeat:no-repeat;
    width:94px;
    height:95px;    
    float:left;
    left:-16px;
    top:10px;
    clear:both;
}
#divPoste {
    position:relative;
    height:28px;
    position:relative;
    left:-16px;
}
#divPoste-gau {
    position:relative;
    background:url('/App_Themes/ModuleNews/postecommentgauche.png') no-repeat left center;
	height:28px;
	width:34px;	
	float:left;
}
#divPoste-ctr {
    position:relative;
    background:url('/App_Themes/ModuleNews/postecommentrepetable.png') repeat-x right top;
	height:28px;
	float:left;	
	padding-top:5px;
 
}
#divVote {
 
    background:url('/App_Themes/ModuleNews/ongletvote.png') no-repeat right top;
    height:28px;
    width:75px;
    float:right;
    position:relative;
    top:-28px;
    left:10px;
}
</style>
</head>
<body>
<div id="newsGlobal" style="width:1001px;position:relative;background-image:url('/App_Themes/ModuleNews/fondrepetable.png');background-repeat:repeat-y;padding-left:100px;">
<br /><br /><br />
 
<div id="contenu">
	<div id="contenu-top"></div>
	<div id="contenu-ctr">
	    <div id="divPoste">
	        <div id="divPoste-gau"></div>
	        <div id="divPoste-ctr">
	            <span id="Span2" style="">
                    <span class='PseudoComment'>Ablanore à ralonge</span> 
                    <span class='TitreComment'>Le grand malade</span><span class='posteComment'>le </span>
                    <span class='posteCommentDate'>15/10/2012 </span><span class='posteComment'>à </span>
                    <span class='posteCommentDate'>16:54 </span><span class='posteComment'>a posté</span>
                </span>
	        </div>
	    </div>
	    <div id="divVote">
            <span id="ctl00_cphMilieu_NewsUnique_BlocCommentaireNews_com1_lblVote" style="color:#660000;">-16</span>
 
        </div>
	    <div id="divAvatar">
            <img alt="" id="Img1" src="App_Themes/PhotoUser/AvatarCarre/bfa6aea8-0adb-4064-8b60-bb1e2ef282f6.png" style="border-width:0px;" />
        </div>
	    <div id="TexteComment">
	        <div id="TexteComment-top"></div>
	        <div id="TexteComment-ctr">
	            <span id="Span1" style="position:relative;display:inline-block;width:490px;padding:5px;border:solid 1px Red;"><span class='TexteComment'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span></span>
	        </div>
	        <div id="TexteComment-btm"></div>
	    </div>
	</div>
	<div id="contenu-btm"></div>
</div>

Invité · 25/10/2012, 13h46

Comme je te l'ai déjà dit :
en position:relative; , évite de mettre des top:...; ou left:...;
Il faut faire le positionnement grâce à padding:...; et/ou margin:...;

Donc remplacer (entre autres) :
top:10px;
par :
padding-top:10px;

Et puis, parler de "cadre rouge" et "cadre vert" sans nous dire le nom (id) du div concerné ne ~~nous~~ t'aide pas...

Astuce :
certains attributs CSS peuvent prendre plusieurs valeurs.

Code :

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

1
2
    padding-left:99px;
    padding-bottom:15px;

Donne (4 paramètres) :

Code :

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

    padding:0 0 15px 99px;

c-à-d : padding: valeur-top valeur-right valeur-btm valeur-left
(dans le sens des aiguilles d'une montre, en commencant par le haut)

ou avec 2 paramètres :

Code :

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

    padding:15px 99px;

c-à-d : padding: valeur-top/btm valeur-right/left

**zooffy** · 25/10/2012, 14h24

Pour les cadres rouge et vert je croyais que de voir les classe CSS où il y a un border:solid 1px Red sufisait à trouver le cadre rouge et pareil pour le vert là où il y a Green. Désolé.

Donc le rouge c'est le Span avec id="span2"
Et le Vert c'est le div avec id="TexteComment-ctr"

Pour le rempalcement des top par des padding-top, ça marche pas : il prend pas les valeurs négatives visblement. Du coup, mon div id="divVote" se retrouve en dessous de là où je le veux et je sais pas comment faire pour qu'il soit comme sur l'image que j'ai posté.

Invité · 25/10/2012, 14h54

Il va vraiment falloir que tu apprennes à utiliser correctement les balises.

Tu fais un usage abusif des <span> (balise de type "inline"), là où un <p> (balise de type "block") serait plus approprié (je pense entre autres au "TexteComment").
Du coup, tu mets des display:inline-block; sur des <span>, sans vraiment savoir à quoi ça sert...

Mon conseil :

UTILISE LES BONNES BALISES, pour la bonne utilisation.
REVOIS LE DECOUPAGE DE TON DESIGN => "emboitage" des "boites" (div);

Pour ca, fais-toi un dessin, avec la disposition des boites les unes dans les autres,en leur donnant une class ou un id (un id doit être unique !)
Normalement, tu n'as pas besoin de left:...; négatif !

Petite info : tu ne le sais peut-être pas, mais même avec ton code, on n'a pas accès aux images... de ton ordi.
Donc... on ne peut qu'extrapoler.

**zooffy** · 25/10/2012, 15h10

Merci pour ton aide.

Si, je sais très bien que tu n'as pas accès à mes images, mais tu ne les a pas demandées, j'en ai donc déduis que tu n'en avais pas besoins.

Les SPAN : en ASP.NET les <asp:label> sont traduits par des span, donc c'est pas moi qui les utilise, en fait et surtout, j'ai pas le choix. Mais en plus, mon souci de palcement ici ne concerne aucun span mais uniquement des Div.

Le designer du site qui est aussi le commanditaire, donc celui qui paie et qu'on en contredit jamais, est très éxigeant et veut absolument que cela soit fait comme cela. Il a une peur panique des poids des images donc il découpe tout en petit bout et moi je dois monter le tout. J'ai essayé de négocier une grosse image de fond, mais nada, il a rien voulu savoir et comme il paie, je la ferme.

Enfin, mon métier, à la base c'est de programmer en objet en VB.NET sur ASP.NET, du coup, les balise HTML, les classes CSS c'est un peu étranger pour moi. Disons que je faisais cela en 1999 mais depuis, pas tellement, alors je suis à la ramasse totale.

Mais tout cela, je crois que je l'ai déjà dit.

Bref, j'ai finalement réussi à monter mon module comme le veut mon commanditaire et je crois que j'ai réussi à suive tous tes conseils.
Voici le code, en espérant avoir bien tout fait.

Encore merci et une très bonne journée à toi.

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
body {
    background-color:Black;
}
#contenu {
	position:relative;
	width:616px;
	float:left;
 
}
#contenu-top {
    position:relative;
	background:url('/App_Themes/ModuleNews/commenthead.png') no-repeat center top;
	height:7px;
	width:616px;
}
#contenu-ctr {
    position:relative;
	background:url('/App_Themes/ModuleNews/commentrepetable.png') repeat-y center center;
	width:616px;
}
#contenu-btm {
	position:relative;
	background:url('/App_Themes/ModuleNews/commentfoot.png') no-repeat center bottom; 
	height:10px;
	width:616px;	
}
#divPoste {
    position:relative;
    height:28px;
    float:left;
    margin-left:-15px;
}
#divPoste-gau {
    position:relative;
    background:url('/App_Themes/ModuleNews/postecommentgauche.png') no-repeat left center;
	height:28px;
	width:34px;	
	float:left;
}
#divPoste-ctr {
    position:relative;
    background:url('/App_Themes/ModuleNews/postecommentrepetable.png') repeat-x right top;
	height:28px;
	margin-left:34px;
	padding-top:5px;
}
#divVote {    
    position:relative;
    background:url('/App_Themes/ModuleNews/ongletvote.png') no-repeat right top;
    height:28px;
    width:75px;
    margin-right:-10px;
    float:right;
}
#divAvatar {
    position:relative;
    background-image:url('/App_Themes/ModuleNews/fondavatarcommentaire.png');
    background-repeat:no-repeat;
    width:94px;
    height:95px;    
    float:left;
    clear:both;
    margin-left:-11px;
    margin-top:5px;
}
#TexteComment {
    position:relative;
    width:504px;
    padding-top:5px;
    padding-left:90px;
    padding-bottom:5px;
    clear:right;
}
#TexteComment-top {
    position:relative;
    background:url('/App_Themes/ModuleNews/textcommenthaut.png') no-repeat center top;
	height:7px;
	width:504px;
}
#TexteComment-ctr {
    position:relative;
    background:url('/App_Themes/ModuleNews/textcommentrepetable.png') repeat-y center center;
	width:504px;
}
#TexteComment-btm {
    position:relative;
    background:url('/App_Themes/ModuleNews/textcommentbas.png') no-repeat center bottom; 
	height:7px;
	width:504px;
}
</style>
</head>
<body>
<div id="newsGlobal" style="width:1001px;position:relative;background-image:url('/App_Themes/ModuleNews/fondrepetable.png');background-repeat:repeat-y;padding-left:100px;">
<br /><br /><br />
 
<div id="contenu">
	<div id="contenu-top"></div>
	<div id="contenu-ctr">
	    <div id="divPoste">
            <div id="divPoste-gau"></div>
            <div id="divPoste-ctr">
                <span id="Span2" style="margin-left:-20px;">
                    <span class='PseudoComment'>Ablanore à ralonge</span> 
                    <span class='TitreComment'>Le grand malade</span><span class='posteComment'>le </span>
                    <span class='posteCommentDate'>15/10/2012 </span><span class='posteComment'>à </span>
                    <span class='posteCommentDate'>16:54 </span><span class='posteComment'>a posté</span>
                </span>
            </div>
        </div>
        <div id="divVote">
            <span id="ctl00_cphMilieu_NewsUnique_BlocCommentaireNews_com1_lblVote" style="color:#660000;">-16</span>
 
        </div>
	    <div id="divAvatar">
            <img alt="" id="Img1" src="App_Themes/PhotoUser/AvatarCarre/bfa6aea8-0adb-4064-8b60-bb1e2ef282f6.png" style="border-width:0px;" />
        </div>
	    <div id="TexteComment">
	        <div id="TexteComment-top"></div>
	        <div id="TexteComment-ctr">
	            <span id="Span1" style="position:relative;display:inline-block;width:500px;padding-left:5px;padding-right:5px;"><span class='TexteComment'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span></span>
	        </div>
	        <div id="TexteComment-btm"></div>
	    </div>
	</div>
	<div id="contenu-btm"></div>
</div>

Plusieurs images dans un background

CSS

Discussions similaires

Partager

Partager