Discussion :

[francky74]

Bonjour,

J'ai trois span (qui sont en display: table-cell) dans un div "divhaut" (qui est en display:block) et trois autres spans (qui sont en display: table-cell) dans un div "divbas" (qui est en display:block).
Les deux div étant dans un autre div "fen1"...

Je n'arrive pas à mettre des bordures aux coins arrondis ... j'ai essayé de plusieurs manières différentes mais rien à faire !!!

mon code "fen1.php" :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="fen1">
	<div class="divparamBDD" id="divhaut">
		<span id="hgauche">hgauche</span>
		<span id="hmilieu">hmilieu</span>
		<span id="hdroite">hdroite</span>
	</div>
	<div class="divparamBDD" id="divbas">
		<span id="bgauche">bgauche</span>
		<span id="bmilieu">bmilieu</span>
		<span id="bdroite">bdroite</span>
	</div>
</div>

le css :

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
#fen1{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:auto;
	margin-top:20px;
	height:800px;
	display:table;
  	width:95%;
}
#divhaut{
	margin:auto;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	border-top: solid #A5BEFC 3px;
}
#divbas{
	margin:auto;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	border-bottom: solid #A5BEFC 3px;
}
.divparamBDD{
	display:table-row;
	background-color: #D6E2FE;
	border-right: solid #A5BEFC 3px;
	border-left: solid #A5BEFC 3px;
}
#hgauche{
	display:table-cell;
	width:33%;
}
#hmilieu{
	display:table-cell;
	width:33%;
}
#hdroite{
	display:table-cell;
	width:33%;
}
#bgauche{
	display:table-cell;
	width:30%;
}
#bmilieu{
	display:table-cell;
	width:30%;
}
#bdroite{
	display:table-cell;
	width:30%;
}

voir aussi ici

Si quelqu'un peut me donner un coup de main ... merci !

[francky74]

En fait j'ai enfin réussi à faire les coins arrondis mais ils y a une bordure carrée qui dépasse !
je n'y étais pas arrivé plus tôt car je n'avais essayé que les arrondis. Or, apparamment, il me fallait aussi dessiner les bordures ...

voici le css de ce que j'ai fait :

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
#fen1
{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:auto;
	margin-top:20px;
	height:800px;
	display:table;
  	width:95%;
}
 
 
#divhaut
{
	margin:auto;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	border-top: solid #A5BEFC 3px;
}
#divbas
{
	margin:auto;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	border-bottom: solid #A5BEFC 3px;
}
.divparamBDD
{
	display:table-row;
	background-color: #D6E2FE;
	border-right: solid #A5BEFC 3px;
	border-left: solid #A5BEFC 3px;
}
 
#hgauche
{
	display:table-cell;
	width:33%;
	border-top: solid #A5BEFC 3px;
	border-left: solid #A5BEFC 3px;
	border-top-left-radius: 50px;
}
#hmilieu
{
	display:table-cell;
	width:33%;
	border-top: solid #A5BEFC 3px;
}
#hdroite
{
	display:table-cell;
	width:33%;
	border-top: solid #A5BEFC 3px;
	border-right: solid #A5BEFC 3px;
	border-top-right-radius: 50px;
}
#bgauche
{
	display:table-cell;
	width:30%;
	border-left: solid #A5BEFC 3px;
	border-bottom: solid #A5BEFC 3px;
	border-bottom-left-radius: 50px;
}
#bmilieu
{
	display:table-cell;
	width:30%;
	border-bottom: solid #A5BEFC 3px;
}
#bdroite
{
	display:table-cell;
	width:30%;
	border-bottom: solid #A5BEFC 3px;
	border-right: solid #A5BEFC 3px;
	border-bottom-right-radius: 50px;
}

[vinou33]

Si tu mets une bordure rouge sur une div, elle n'apparait pas... Tu en mets une sur une span qui est CONTENUE dans la div, elle apparaît. Tu devrais plutôt voir pour mettre les bordures au niveau des span. Par exemple, ci-dessous:

Code :

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

1
2
3
4
5
6
7
8
 
#hgauche
{
	display:table-cell;
	width:33%;
        border:2px solid red;
        border-top-left-radius: 50px;
}

Bon ben tu as réussi pendant que j'écrivais, supprimez ma réponse si vous voulez.

[francky74]

et pour enlever les couleurs qui dépassent aux coins, j'ai dû enlever la couleur qui était sur le div pour la mettre sur chaque span. Pour cela j'ai créé une classe "spancolor"

CSS :

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
#fen1{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:auto;
	margin-top:20px;
	height:800px;
	display:table;
  	width:95%;
}
#divhaut{
	margin:auto;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	border-top: solid #A5BEFC 3px;
}
#divbas{
	margin:auto;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	border-bottom: solid #A5BEFC 3px;
}
.divparamBDD{
	display:table-row;
	border-right: solid #A5BEFC 3px;
	border-left: solid #A5BEFC 3px;
}
.spancolor{
	background-color: #D6E2FE;
}
#hgauche{
	display:table-cell;
	width:33%;
	border-top: solid #A5BEFC 3px;
	border-left: solid #A5BEFC 3px;
	border-top-left-radius: 50px;
}
#hmilieu{
	display:table-cell;
	width:33%;
	border-top: solid #A5BEFC 3px;
}
#hdroite{
	display:table-cell;
	width:33%;
	border-top: solid #A5BEFC 3px;
	border-right: solid #A5BEFC 3px;
	border-top-right-radius: 50px;
}
#bgauche{
	display:table-cell;
	width:30%;
	border-left: solid #A5BEFC 3px;
	border-bottom: solid #A5BEFC 3px;
	border-bottom-left-radius: 50px;
}
#bmilieu{
	display:table-cell;
	width:30%;
	border-bottom: solid #A5BEFC 3px;
}
#bdroite{
	display:table-cell;
	width:30%;
	border-bottom: solid #A5BEFC 3px;
	border-right: solid #A5BEFC 3px;
	border-bottom-right-radius: 50px;
}

PHP :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="fen1">
	<div class="divparamBDD" id="divhaut">
		<span class="spancolor" id="hgauche">hgauche</span>
		<span class="spancolor" id="hmilieu">hmilieu</span>
		<span class="spancolor" id="hdroite">hdroite</span>
	</div>
	<div class="divparamBDD" id="divbas">
		<span class="spancolor" id="bgauche"></span>
		<span class="spancolor" id="bmilieu">bmilieu</span>
		<span class="spancolor" id="bdroite">bdroite</span>
	</div>
</div>

dire que j'ai galéré plusieurs heures et que je trouve la solution presqu'"aussitôt après avoir posté dans ce forum .....



PS : merci VINOU +1