div arrondi OK mais adaptation contenu..

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

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, 23h38

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, 07h18

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, 11h42

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, 22h43

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, 22h57

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.

**devyan** · 27/11/2008, 23h35

La partie centrale s'affiche correctement avec IE7.

Essaye d'utiliser la même structure (div imbriqués) pour le haut et le bas.
Attention, il faudra dans ce cas légèrement modifier le CSS.

Code :

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

1
2
3
4
5
6
7
8
.b_hgauche {
background:transparent url(bordure/hg.jpg) no-repeat left bottom;
width:100%;;
}
.b_bgauche {
background:transparent url(bordure/bg.jpg) no-repeat left top;
width:100%;;
}

**{F-I}** · 28/11/2008, 07h10

Envoyé par c_s_s

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.

Ah oui, pour ça, oui j'ai compris

, en fait je pensais que tu parlais des images que j'irai ajouter dans le cadre.

Envoyé par c_s_s

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.

Je vais essayer de tester de plusieurs essais pour trouver un petit 'bug', on va voir, on va voir

Envoyé par c_s_s

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

Moi non plus, et s'il n'y avait que Firefox, ce serait super ^^

Je vais ajouter deux questions ici :

- 1: J'ai mis .b_contenu {padding:10px;} et l'espace entre cadre et l'image dedans, les mesures ne sont pas pareil. Du côté gauche droite c'est plus petit par rapport aux côtés haut et bas. Pourquoi ?

- 2: Je voudrais pouvoir centrer l'ensemble cadre au milieu du div corps, je n'arrive pas

Encore merci

devyan, je vais voir

PS : voici le lien pour aperçu

**c_s_s** · 28/11/2008, 11h54

Je fais une petite parenthèse car je me rends compte que tu es parti d'un code qui n'était peut-être pas le plus approprié pour ce que tu veux faire.

Après tout, pourquoi modifier un code qui correspondait à un cas précis alors qu'il suffirait de repartir de zéro pour produire un code adapté à tes besoins.

En regardant ta page j'ai pensé à une autre solution plus simple techniquement, qui en plus fonctionne très bien avec Internet Explorer (ainsi que Firefox, Safari, Google Chrome, Opera).

Le principe est très simple : utiliser une image de fond unique dans 4 blocs en position absolue pour gérer l'affichage des bordures.

Rien ne vaut un bon exemple : Cadre image extensible

Voici à quoi ressemble le code HTML / CSS

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.main {
	float:left;
	position:relative;	
	padding:10px;
	clear:both;
	margin-bottom:10px;
}
.hg, .hd, .bg, .bd {
	position: absolute;
}
.hg {
	background:url(fond.gif) no-repeat left top;	
	top:0;
	left:0;	
	right:10px;
	bottom:10px;	
}
.hd {
	background:url(fond.gif) no-repeat right top;	
	top:0;
	right:0;
	left:10px;	
	bottom:10px;	
}
.bg {
	background:url(fond.gif) no-repeat left bottom;	
	bottom:0;
	left:0;
	right:10px;
	top:10px;
}
.bd {
	background:url(fond.gif) no-repeat right bottom;	
	bottom:0;
	right:0;
	left:10px;
	top:10px;
}

Code html :

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

1
2
3
4
5
6
7
<div class="main">
	Ici, le contenu
	<div class="hg"></div>
	<div class="hd"></div>
	<div class="bg"></div>
	<div class="bd"></div>	
</div>

L'image utilisée est en pièce jointe.

**devyan** · 28/11/2008, 16h12

Salut,

J'ai personnellement passé pas mal de temps à "bricoler" diff"rentes variantes et à les tester sur différents navigateurs (IE6&7, FF2&3, Opera9 et Safari3 pour Windows)

Voici le modèle le plus classique (anciennement fait avec des tableaux)

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
/* description="box mapping modèle 1 (table/tr/td like)" */
.Box1		 {display: block; position: relative; width: auto;  height: 100%;  top: 0;        left: 0;       background: black  top    left  repeat;
			  border: 0px lime solid; margin: AAAA BBBB CCCC DDDD;}
.Box1 .B1L	 {display: block; position: absolute; width: DDDD;  height: 100%;  top: 0;        left: -DDDD;   background: green  top    left  repeat-y;}
.Box1 .B1T	 {display: block; position: absolute; width: 100%;  height: AAAA;  top: -AAAA;    left: 0;       background: maroon top    left  repeat-x;}
.Box1 .B1B	 {display: block; position: absolute; width: 100%;  height: CCCC;  bottom: -CCCC; left: 0;       background: maroon bottom left  repeat-x;}
.Box1 .B1R	 {display: block; position: absolute; width: BBBB;  height: 100%;  top: 0;        right: -BBBB;  background: green  top    right repeat-y;}
.Box1 .B1TL	 {display: block; position: absolute; width: DDDD;  height: AAAA;  top: -AAAA;    left: -DDDD;   background: orange top    left  no-repeat;}
.Box1 .B1BL	 {display: block; position: absolute; width: DDDD;  height: CCCC;  bottom: -CCCC; left: -DDDD;   background: orange bottom left  no-repeat;}
.Box1 .B1TR	 {display: block; position: absolute; width: BBBB;  height: AAAA;  top: -AAAA;    right: -BBBB;  background: orange top    right no-repeat;}
.Box1 .B1BR  {display: block; position: absolute; width: BBBB;  height: CCCC;  bottom: -CCCC; right: -BBBB;  background: orange bottom right no-repeat;}
.Box1 .B1C	 {display: block; position: relative; width: auto;  height: 100%;  								 background: navy;
			  color: lime;}
.Box1 .B1C * {position: relative}
/* ----------------------------------------------------- */

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="position: absolute; top: 60px; left: 10px;">
  <div class="Box1">	
	<div class="B1L"></div><div class="B1T"></div><div class="B1B"></div><div class="B1R"></div>	
	<div class="B1TL"></div><div class="B1BL"></div><div class="B1TR"></div><div class="B1BR"></div>		
	<div class="B1C">
	Duis vitae dui commodo urna eleifend rutrum! Mauris gravida velit vel justo? <br/>
	Vestibulum suscipit lobortis libero. <br/>
	Praesent dictum erat fermentum augue. Donec sed dui id odio pretium laoreet. <br/>
	Cras scelerisque ornare elit. <br/>
	In ullamcorper pulvinar ipsum. 
	</div>
  </div>	
</div>

Il ne reste (normalement) plus qu'à indiquer les images et leurs dimensions

**{F-I}** · 28/11/2008, 23h02

Sacré c_s_s, au niveau de codage, c'est beaucoup plus simple qu'avant.
Vraiment je n'aurais pas pensé qu'on pouvait simplifier à ce point. Cela fonctionne très bien.

Je te remercie beaucoup de m'avoir aidé... vraiment...

Quant à devyan, merci beaucoup d'avoir participé à mon sujet (et surtout d'avoir consacré de ton temps à "bricoler"), je préfère garder la solution qu'à proposé c_s_s pour sa simplicité.

C'est avec un grand plaisir que je viendrai vous aider plus tard à mon tour (bien sur dans un autre domaine parce que ça m'étonnerait que je pourrai vous aider un jour au niveau de CSS :p)

div arrondi OK mais adaptation contenu..

CSS

Discussions similaires

Partager

Partager