Discussion :

[DiverSIG]

Bonjour,

Je cherche à faire une boite avec une entête aux bords arrondis (cf. fichier joint).

dans ma page html, j'ai ça :

Code html :

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

1
2
3
4
5
6
7
8
<table class="selector">
	<tr><td class="selector_header">Période</td></tr>
	<tr><td class="selector_values">
		<input type="radio" name="temporal" id='rb_3mois' value="3mois" onclick="addGraphe3()">3 mois<br>
		<input type="radio" name="temporal" id='rb_6mois' value="6mois" onclick="addGraphe3()">6 mois<br>
		<input type="radio" name="temporal" id='rb_1an' value="1an" onclick="addGraphe3()">1 an<br>
		<input type="radio" name="temporal" id='rb_all' value="all" onclick="addGraphe3()" checked>Toute la base<br><br>
...

dans mon fichier css, j'ai ça :

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
.selector {
	border-collapse:collapse;
}
 
.selector_header {
	height: 30px;
	padding-left: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px; 
	background-image: linear-gradient(#79AA38, #B0C927);
	color: #FFFFFF;
	font-weight: bold;
}
 
.selector_values {
	padding: 10px;
	border-style: solid;
	border-width: 1px;
	border-color: #B0C927;
 
}

le problème, c'est que sur l'en-tête aux bords arrondis, j'ai à gauche un décalage de 1 pixel entre l'arrondi et la bordure de la boite.
à droite c'est nickel.

comment supprimer ça ?


Merci,

Nico

[DiverSIG]

en remplaçant

Code :

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

border-collapse:collapse;

par

Code :

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

border-spacing: 0px;

ça marche nickel !

quelqu'un a une explication ?

Nico

[Tendhor57]

Ou aussi

Code CSS :

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

1
2
3
#selector_header{
margin-left=-1px;
}

Ca devrais marcher

[rodolphebrd]

Bonjour,

Dans l'exemple que vous donnez border-collapse: collapse;et border-spacing:0px; ont le même effet...

border-spacing:0px; est appliqué implicitement avec la propriété border-collapse: separate; (modèle de bordures séparées) qui est la valeur par défaut des cellules et bordures de tableau.

[Candygirl]

quelqu'un a une explication ?

Le comportement des border est différent avec un border-collapse et un border-spacing. On s'en rend bien compte en attribuant un border-width de 10px, par exemple. Cela est expliqué dans les recommandations css2.1 (j'ai mis en gras les éléments qui me semblent le mieux expliquer le phénomène):

'border-spacing'
[...]
In this model, each cell has an individual border.
[...]
Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).

17.6.2 The collapsing border model

In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group. Borders for HTML's "rules" attribute can be specified this way.

Borders are centered on the grid lines between the cells. User agents must find a consistent rule for rounding off in the case of an odd number of discrete units (screen pixels, printer dots).

The diagram below shows how the width of the table, the widths of the borders, the padding, and the cell width interact. Their relation is given by the following equation, which holds for every row of the table:

row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)

A noter que, en cas de nombre impaire, Firefox le gère différemment de webkit, Opera et IE8 puisque l'espace apparaît sur la gauche et pas sur la droite. A noter aussi que IE9 et 10 gèrent le cas "nombre impaire" différemment puisqu'aucun espace n'apparaît avec un border de 1px.

[NoSmoking]

Bonsoir,
merveilleuse Candygirl qui s'avère être notre maitre Capello du CSS

J'aimerais que l'on n'oublie pas les listes de définition, DL DT et DD que l'on rencontre peu et qui dans ce cas peuvent très avantageusement remplacer ta TABLE même si certains puristes pourrait y voir une mauvaise utilisation.

exemple:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Liste de définition</title>
<meta name="Author" content="NoSmoking">
<style>
dl.choix{
  margin:2em 0;
  padding:0 0 0.5em;
  width:10em;
  border:1px solid #B0C927;
  border-radius:10px 10px 0 0;
  overflow:hidden;
}
.choix dt{
  color: #FFF;
  font-weight:bold;
  padding: 0.5em;
  background-color:#B0C927;
  background-image: linear-gradient(#79AA38, #B0C927);
}
.choix dd{
  margin:.25em;
  padding:0 0.5em;
}
.choix dd.end_dt{
  font-size:0.8em;
  margin-top:1em;
  font-style:italic;
  text-align:center;
}
</style>
<script>
</script>
</head>
<body>
<dl class="choix">
  <dt>Période</dt>
  <dd><input name="temporal" id="rb_3mois" value="3mois" onclick="addGraphe3()" type="radio">3 mois</dd>
  <dd><input name="temporal" id="rb_6mois" value="6mois" onclick="addGraphe3()" type="radio">6 mois</dd>
  <dd><input name="temporal" id="rb_1an" value="1an" onclick="addGraphe3()" type="radio">1 an</dd>
  <dd><input name="temporal" id="rb_all" value="all" onclick="addGraphe3()" checked="" type="radio">Toute la base</dd>
  <dd class="end_dt">Dernières valeurs validées le 07/04/2013</dd>
</dl>
</body>
</html>

[Invité]

merveilleuse Candygirl qui s'avère être notre maitre Capello du CSS

C'est drole comme "Maitresse Candygirl" n'évoque pas du tout les même "Jeux de 20 heures" !