div arrondi OK mais adaptation contenu..

**{F-I}** · 26/11/2008, 22h15

Bonsoir à tous,

J'avais besoin de vous pour m'expliquer comment on fait pour avoir les DIV arrondis, mais en cherchant dans le forum j'ai trouvé ce post et répondu par le fameux c_s_s.

J'ai donc utilisé son code et modifié quelques petits trucs (ça ne s'affichait pas vraiment bien aux 2 endroits).

Après deux bons heures de recherches et tests avec un ami, on n'a pas trouvé et on a décidé de vous appeler.

Nous souhaitons obtenir un "bordure" qui s'adapte en fonction du contenu.

Voici le code source :

Code HTML :

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
<div class="corps">
            	<div class="date">
                	<p>26<br />nov<br />2008</p>
                </div>
                <div class="titre">
                	Voici les tests aux bordures
                </div>
            	<div class="b_contenu">
					<div class="b_top">
						<div class="b_hgauche"></div>
						<div class="b_hdroit"></div>						
					</div>
					<div class="b_middle">
						<div class="b_gauche">
							<div class="b_droit">
								<div class="b_contenu">
									<br /><img src="design/20_20.jpg" width="20" height="20" />
                                </div>
							</div>
						</div>		
					</div>
					<div class="b_bottom">
						<div class="b_bdroit"></div>
						<div class="b_bgauche"></div>		
					</div>
				</div>
                <br />
            	<div class="b_contenu">
					<div class="b_top">
						<div class="b_hgauche"></div>
						<div class="b_hdroit"></div>						
					</div>
					<div class="b_middle">
						<div class="b_gauche">
							<div class="b_droit">
								<div class="b_contenu">
									<br /><img src="design/60_60.jpg" width="60" height="60" />
                                </div>
							</div>
						</div>		
					</div>
					<div class="b_bottom">
						<div class="b_bdroit"></div>
						<div class="b_bgauche"></div>		
					</div>
				</div>
                <br />
            	<div class="b_contenu">
					<div class="b_top">
						<div class="b_hgauche"></div>
						<div class="b_hdroit"></div>						
					</div>
					<div class="b_middle">
						<div class="b_gauche">
							<div class="b_droit">
								<div class="b_contenu">
									<br /><img src="design/150_150.jpg" width="150" height="150" />
                                </div>
							</div>
						</div>		
					</div>
					<div class="b_bottom">
						<div class="b_bdroit"></div>
						<div class="b_bgauche"></div>		
					</div>
				</div>
                <br />
                <div class="b_contenu">
					<div class="b_top">
						<div class="b_hgauche"></div>
						<div class="b_hdroit"></div>						
					</div>
					<div class="b_middle">
						<div class="b_gauche">
							<div class="b_droit">
								<div class="b_contenu">
									<br /><img src="design/300_150.jpg" width="300" height="150" />
                                </div>
							</div>
						</div>		
					</div>
					<div class="b_bottom">
						<div class="b_bdroit"></div>
						<div class="b_bgauche"></div>		
					</div>
				</div>
                <br />
            </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
/* Bordure aux cadres */
.b_top, .b_middle, .b_bottom {clear:both; width: auto;}
.b_top {background: url('bordure/h.jpg') left bottom repeat-x; height:9px;}
.b_bottom {background: url('bordure/b.jpg') left top repeat-x; height:9px;}
.b_hgauche, .b_hdroit, .b_bgauche, .b_bdroit {width:9px;height:9px;}
.b_haut, .b_bas {height:10px; margin:0;}
.b_gauche, .b_droit {width:10px;}	  	  
.b_hgauche, .b_bgauche {float:left;}
.b_hdroit, .b_bdroit {float:right;}	  
.b_hgauche {background: url('bordure/hg.jpg') right bottom no-repeat;}
.b_hdroit {background: url('bordure/hd.jpg') left bottom no-repeat;}
.b_bgauche {background: url('bordure/bg.jpg') right top no-repeat;}
.b_bdroit {background: url('bordure/bd.jpg') left top no-repeat;} 		
.b_gauche {background: url('bordure/g.jpg') left top repeat-y; width:100%;}
.b_droit {background: url('bordure/d.jpg') right top repeat-y; width:100%;} 
.b_contenu {padding:30px;}

Voici en pièce joint l'aperçu.

Vous pouvez remarquer que le bordure a une taille fixe et j'amerais bien qu'il s'adapte en fonction du contenu.

Le problème se situe (à mon avis) : .b_top, .b_middle, .b_bottom {clear:both; width: auto;}.
Comment rendre la largeur adaptable en fonction du contenu ?

Je vous remercie par avance.

**c_s_s** · 26/11/2008, 22h38

Bonsoir,

Envoyé par {F-I}

J'ai donc utilisé son code et modifié quelques petits trucs (ça ne s'affichait pas vraiment bien aux 2 endroits).

Si tu pouvais m'en dire plus (où , quel navigateur, ...), je ne voyais pas d'anomalie sur la page.

Le cas qui était évoqué dans l'autre sujet, et la proposition de code que j'avais faite était adaptée aux images utilisées.

Dans ton cas, peut-être que le code CSS ne colle pas avec les images utilisées, tout simplement.
Dans ce cas, quelques ajustements peuvent probablement résoudre le souci.

As-tu moyen de fournir les images ? Elles sont en ligne ?

Edit : quand je regarde la capture d'écran, je ne vois pas d'anomalie. Le cadre s'agrandit bien avec le contenu.
Qu'est ce qui ne va pas ?

**{F-I}** · 27/11/2008, 06h18

Je n'arrive pas à reproduire le même anomalie, mais c'est similaire avec la capture suivante. (regarde les 4 bords arrondis, il y a un espace d'un pixel).

Voici la page en question, accompagné de sa fiche CSS pour vous faciliter un petit peu

.

C'est vrai que le cadre s'agrandit bien avec le contenu du côté hauteur et ce qui n'est pas le cas avec la largeur.

Je sais c'est parce que j'ai laissé .b_top, .b_middle, .b_bottom {clear:both; width: auto;}.

Ce qui ne va pas c'est que je souhaiterais bien que la largeur s'adapte au contenu (comme pour la hauteur) de façon automatique.

(donc largeur non fixe, mais extensible et doit adapter aux tous les mesures (à 10px largeur, à 50px largeur, à 100px largeur)).

En espérant vous avoir éclairé mon problème, je vous remercie par avance.

**c_s_s** · 27/11/2008, 10h42

Ok, j'ai compris ce que tu voulais.

C'est vrai que dans l'exemple, le cadre prenait la largeur entière du contenant, indépendamment du contenu.

Avant de faire quelques petites modifications sur la feuille de style, il faut corriger ton fichier HTML car tu utilises la même classe (b_contenu) pour deux blocs différents, ce qui peut poser problème.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="b_contenu">
	<div class="b_top"></div>
	<div class="b_middle">
		<div class="b_gauche">
			<div class="b_droit">
				<div class="b_contenu"></div>
			</div>
		</div>		
	</div>
	<div class="b_bottom"></div>
</div>

Tu devrais plutôt avoir quelque chose comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="b_content">
	<div class="b_top"></div>
	<div class="b_middle">
		<div class="b_gauche">
			<div class="b_droit">
				<div class="b_contenu"></div>
			</div>
		</div>		
	</div>
	<div class="b_bottom"></div>
</div>

Ensuite, dans la feuille de style, il suffit normalement de :

- enlever le width:auto sur .b_top, .b_middle, .b_bottom
- enlever le width sur .b_content
- ajouter un float:left et un clear:both sur .b_content
- enlever .b_gauche, .b_droit {width:10px;} qui ne sert à rien finalement.

Ce qui donne, au final :

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
 
.b_content {float:left; clear:both;}
.b_top, .b_middle, .b_bottom {clear:both;}
.b_top {background: url('bordure/h.jpg') left bottom repeat-x; height:9px;}
.b_bottom {background: url('bordure/b.jpg') left top repeat-x; height:9px;}
.b_hgauche, .b_hdroit, .b_bgauche, .b_bdroit {width:9px;height:9px;}
.b_haut, .b_bas {height:10px; margin:0;}
.b_gauche, .b_droit {width:10px;}
.b_hgauche, .b_bgauche {float:left;}
.b_hdroit, .b_bdroit {float:right;}
.b_hgauche {background: url('bordure/hg.jpg') right bottom no-repeat;}
.b_hdroit {background: url('bordure/hd.jpg') left bottom no-repeat;}
.b_bgauche {background: url('bordure/bg.jpg') right top no-repeat;}
.b_bdroit {background: url('bordure/bd.jpg') left top no-repeat;}
.b_gauche {background: url('bordure/g.jpg') left top repeat-y; width:100%;}
.b_droit {background: url('bordure/d.jpg') right top repeat-y; width:100%;}
.b_contenu {padding:30px;}

Maintenant, il faut faire attention aux largeurs et hauteurs des images.

Pour les blocs top et bottom je vois que les coins font 9px de haut, alors que l'image qui se répète fait 10px de haut. Il y a 1px de décalage qui peut provoquer l'espace blanc dont tu parlais.
Les images des blocs top et bottom doivent faire la même hauteur.

Après ces corrections, tu devrais obtenir l'effet désiré (sauf sous IE6 où un le cadre occupe toujours la largeur maximale).

**{F-I}** · 27/11/2008, 21h43

Que dire ?

Tu as professionnellement résolu le problème

, cependant j'ai encore quelques petits questions à ce propos, pour cela, je créerai un / deux sujets afin de ne pas tout mélanger. (je te remercie beaucoup)

Pourquoi il faudrait que je fasse attention aux dimensions des images ?

PS : je viens de me rendre compte, que ça s'affiche mal avec IE7. (lien mis à jour)

**c_s_s** · 27/11/2008, 21h57

Envoyé par {F-I}

Pourquoi il faudrait que je fasse attention aux dimensions des images ?

Il faut surtout être cohérent entre les tailles de blocs.
Si tu mets côte à côte un bloc de 9px de haut et un bloc de 10px de haut... forcément il y a un décalage de 1px.

Ensuite, avec des tailles d'images différentes, il peut y avoir des décalages dans le rendu. Enfin là, tout dépend du découpage.

Envoyé par {F-I}

PS : je viens de me rendre compte, que ça s'affiche mal avec IE7. (lien mis à jour)

Ah ? Je regarderai demain.
IE n'est pas mon meilleur ami.

div arrondi OK mais adaptation contenu..

CSS

Vue hybride

Discussions similaires

Partager

Partager