dans la page qui suit, j'ai deux blocs class="contenu" strictement
identiques, à la différence près que le premier n'a pas de bordure
superieure et inferieure.
Je m'attendait à ce que les parties supérieure et inferieure de la
premiere boite soient de la couleur du fond de ma boite mais en réalité
il n'en est rien, elles sont transparentes, aussi bien dans IE6, mozilla
et opera.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
simOn
Raphaël Wils wrote:
Bonjour
dans la page qui suit, j'ai deux blocs class="contenu" strictement identiques, à la différence près que le premier n'a pas de bordure superieure et inferieure.
Je m'attendait à ce que les parties supérieure et inferieure de la premiere boite soient de la couleur du fond de ma boite mais en réalité il n'en est rien, elles sont transparentes, aussi bien dans IE6, mozilla et opera.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
elle sont transparente ou inexistante ?.... pour moi elles sont simplement inexistantes.
Raphaël Wils wrote:
Bonjour
dans la page qui suit, j'ai deux blocs class="contenu" strictement
identiques, à la différence près que le premier n'a pas de bordure
superieure et inferieure.
Je m'attendait à ce que les parties supérieure et inferieure de la
premiere boite soient de la couleur du fond de ma boite mais en réalité
il n'en est rien, elles sont transparentes, aussi bien dans IE6, mozilla
et opera.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
dans la page qui suit, j'ai deux blocs class="contenu" strictement identiques, à la différence près que le premier n'a pas de bordure superieure et inferieure.
Je m'attendait à ce que les parties supérieure et inferieure de la premiere boite soient de la couleur du fond de ma boite mais en réalité il n'en est rien, elles sont transparentes, aussi bien dans IE6, mozilla et opera.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
elle sont transparente ou inexistante ?.... pour moi elles sont simplement inexistantes.
Raphaël Wils
simOn a écrit :
Raphaël Wils wrote:
Bonjour
dans la page qui suit, j'ai deux blocs class="contenu" strictement identiques, à la différence près que le premier n'a pas de bordure superieure et inferieure.
Je m'attendait à ce que les parties supérieure et inferieure de la premiere boite soient de la couleur du fond de ma boite mais en réalité il n'en est rien, elles sont transparentes, aussi bien dans IE6, mozilla et opera.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
elle sont transparente ou inexistante ?.... pour moi elles sont simplement inexistantes.
A priori je dit transparentes car si elles étaient inexistantes la boite du haut toucherait le haut de la page étant donné que pour body, les propriétés margin et padding sont mises à zero. De meme les deux boites devraient se toucher, or il n'en est rien.
-- Raphael wils http://perso.club-internet.fr/raphael.wils "It don't mean a thing, if it ain't got that swing !"
simOn a écrit :
Raphaël Wils wrote:
Bonjour
dans la page qui suit, j'ai deux blocs class="contenu" strictement
identiques, à la différence près que le premier n'a pas de bordure
superieure et inferieure.
Je m'attendait à ce que les parties supérieure et inferieure de la
premiere boite soient de la couleur du fond de ma boite mais en
réalité il n'en est rien, elles sont transparentes, aussi bien dans
IE6, mozilla et opera.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
elle sont transparente ou inexistante ?.... pour moi elles sont
simplement inexistantes.
A priori je dit transparentes car si elles étaient inexistantes la boite
du haut toucherait le haut de la page étant donné que pour body, les
propriétés margin et padding sont mises à zero.
De meme les deux boites devraient se toucher, or il n'en est rien.
--
Raphael wils
http://perso.club-internet.fr/raphael.wils
"It don't mean a thing, if it ain't got that swing !"
dans la page qui suit, j'ai deux blocs class="contenu" strictement identiques, à la différence près que le premier n'a pas de bordure superieure et inferieure.
Je m'attendait à ce que les parties supérieure et inferieure de la premiere boite soient de la couleur du fond de ma boite mais en réalité il n'en est rien, elles sont transparentes, aussi bien dans IE6, mozilla et opera.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
elle sont transparente ou inexistante ?.... pour moi elles sont simplement inexistantes.
A priori je dit transparentes car si elles étaient inexistantes la boite du haut toucherait le haut de la page étant donné que pour body, les propriétés margin et padding sont mises à zero. De meme les deux boites devraient se toucher, or il n'en est rien.
-- Raphael wils http://perso.club-internet.fr/raphael.wils "It don't mean a thing, if it ain't got that swing !"
simOn
Raphaël Wils wrote:
A priori je dit transparentes car si elles étaient inexistantes la boite du haut toucherait le haut de la page étant donné que pour body, les propriétés margin et padding sont mises à zero. De meme les deux boites devraient se toucher, or il n'en est rien.
c'est le margin de ta classe 'rubrique' qui pousse l'ensemble passes le à 0.
Raphaël Wils wrote:
A priori je dit transparentes car si elles étaient inexistantes la boite
du haut toucherait le haut de la page étant donné que pour body, les
propriétés margin et padding sont mises à zero.
De meme les deux boites devraient se toucher, or il n'en est rien.
c'est le margin de ta classe 'rubrique' qui pousse l'ensemble
passes le à 0.
A priori je dit transparentes car si elles étaient inexistantes la boite du haut toucherait le haut de la page étant donné que pour body, les propriétés margin et padding sont mises à zero. De meme les deux boites devraient se toucher, or il n'en est rien.
c'est le margin de ta classe 'rubrique' qui pousse l'ensemble passes le à 0.
Raphaël Wils
simOn a écrit :
Raphaël Wils wrote:
A priori je dit transparentes car si elles étaient inexistantes la boite du haut toucherait le haut de la page étant donné que pour body, les propriétés margin et padding sont mises à zero. De meme les deux boites devraient se toucher, or il n'en est rien.
c'est le margin de ta classe 'rubrique' qui pousse l'ensemble passes le à 0.
Justement non, je veux qu'il y ait un espace de 10px tout autour des "rubrique". Je voudrais que le premier contenu soit identique au deuxieme mais en enlevant uniquement les bordures bleues superieures et inferieures. Je souhaite quelque chose comme ca : http://perso.club-internet.fr/raphael.wils/futur/image.gif Le nombre de "rubrique" étant indéterminé...
-- Raphael wils http://perso.club-internet.fr/raphael.wils "It don't mean a thing, if it ain't got that swing !"
simOn a écrit :
Raphaël Wils wrote:
A priori je dit transparentes car si elles étaient inexistantes la
boite du haut toucherait le haut de la page étant donné que pour body,
les propriétés margin et padding sont mises à zero.
De meme les deux boites devraient se toucher, or il n'en est rien.
c'est le margin de ta classe 'rubrique' qui pousse l'ensemble
passes le à 0.
Justement non, je veux qu'il y ait un espace de 10px tout autour des
"rubrique". Je voudrais que le premier contenu soit identique au
deuxieme mais en enlevant uniquement les bordures bleues superieures et
inferieures.
Je souhaite quelque chose comme ca :
http://perso.club-internet.fr/raphael.wils/futur/image.gif
Le nombre de "rubrique" étant indéterminé...
--
Raphael wils
http://perso.club-internet.fr/raphael.wils
"It don't mean a thing, if it ain't got that swing !"
A priori je dit transparentes car si elles étaient inexistantes la boite du haut toucherait le haut de la page étant donné que pour body, les propriétés margin et padding sont mises à zero. De meme les deux boites devraient se toucher, or il n'en est rien.
c'est le margin de ta classe 'rubrique' qui pousse l'ensemble passes le à 0.
Justement non, je veux qu'il y ait un espace de 10px tout autour des "rubrique". Je voudrais que le premier contenu soit identique au deuxieme mais en enlevant uniquement les bordures bleues superieures et inferieures. Je souhaite quelque chose comme ca : http://perso.club-internet.fr/raphael.wils/futur/image.gif Le nombre de "rubrique" étant indéterminé...
-- Raphael wils http://perso.club-internet.fr/raphael.wils "It don't mean a thing, if it ain't got that swing !"
simOn
Raphaël Wils wrote:
simOn a écrit :
Raphaël Wils wrote:
A priori je dit transparentes car si elles étaient inexistantes la boite du haut toucherait le haut de la page étant donné que pour body, les propriétés margin et padding sont mises à zero. De meme les deux boites devraient se toucher, or il n'en est rien.
c'est le margin de ta classe 'rubrique' qui pousse l'ensemble passes le à 0.
Justement non, je veux qu'il y ait un espace de 10px tout autour des "rubrique". Je voudrais que le premier contenu soit identique au deuxieme mais en enlevant uniquement les bordures bleues superieures et inferieures. Je souhaite quelque chose comme ca : http://perso.club-internet.fr/raphael.wils/futur/image.gif Le nombre de "rubrique" étant indéterminé...
A priori je dit transparentes car si elles étaient inexistantes la
boite du haut toucherait le haut de la page étant donné que pour
body, les propriétés margin et padding sont mises à zero.
De meme les deux boites devraient se toucher, or il n'en est rien.
c'est le margin de ta classe 'rubrique' qui pousse l'ensemble
passes le à 0.
Justement non, je veux qu'il y ait un espace de 10px tout autour des
"rubrique". Je voudrais que le premier contenu soit identique au
deuxieme mais en enlevant uniquement les bordures bleues superieures et
inferieures.
Je souhaite quelque chose comme ca :
http://perso.club-internet.fr/raphael.wils/futur/image.gif
Le nombre de "rubrique" étant indéterminé...
A priori je dit transparentes car si elles étaient inexistantes la boite du haut toucherait le haut de la page étant donné que pour body, les propriétés margin et padding sont mises à zero. De meme les deux boites devraient se toucher, or il n'en est rien.
c'est le margin de ta classe 'rubrique' qui pousse l'ensemble passes le à 0.
Justement non, je veux qu'il y ait un espace de 10px tout autour des "rubrique". Je voudrais que le premier contenu soit identique au deuxieme mais en enlevant uniquement les bordures bleues superieures et inferieures. Je souhaite quelque chose comme ca : http://perso.club-internet.fr/raphael.wils/futur/image.gif Le nombre de "rubrique" étant indéterminé...
dans la page qui suit, j'ai deux blocs class="contenu" strictement identiques, à la différence près que le premier n'a pas de bordure superieure et inferieure.
Je m'attendait à ce que les parties supérieure et inferieure de la premiere boite soient de la couleur du fond de ma boite mais en réalité il n'en est rien, elles sont transparentes, aussi bien dans IE6, mozilla et opera.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
Je vois pas où serait la subtilité ?
Tu n'indiques pas de couleur de fond ==> hop transparent le fond idem pour la bordure non ?
De mon côté, à ce que j'ai compris, la bordure ne fait pas partie de la boite (contrairement au padding) elle l'entoure, de même que la marge.
dans la page qui suit, j'ai deux blocs class="contenu" strictement
identiques, à la différence près que le premier n'a pas de bordure
superieure et inferieure.
Je m'attendait à ce que les parties supérieure et inferieure de la
premiere boite soient de la couleur du fond de ma boite mais en réalité
il n'en est rien, elles sont transparentes, aussi bien dans IE6, mozilla
et opera.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
Je vois pas où serait la subtilité ?
Tu n'indiques pas de couleur de fond ==> hop transparent le fond
idem pour la bordure non ?
De mon côté, à ce que j'ai compris, la bordure ne fait pas partie de la boite
(contrairement au padding) elle l'entoure, de même que la marge.
dans la page qui suit, j'ai deux blocs class="contenu" strictement identiques, à la différence près que le premier n'a pas de bordure superieure et inferieure.
Je m'attendait à ce que les parties supérieure et inferieure de la premiere boite soient de la couleur du fond de ma boite mais en réalité il n'en est rien, elles sont transparentes, aussi bien dans IE6, mozilla et opera.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
Je vois pas où serait la subtilité ?
Tu n'indiques pas de couleur de fond ==> hop transparent le fond idem pour la bordure non ?
De mon côté, à ce que j'ai compris, la bordure ne fait pas partie de la boite (contrairement au padding) elle l'entoure, de même que la marge.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
Pas trouvé quelle spécification est responsable. Par contre ça marche en définissant un padding non nul pour les .contenu1 et .contenu2 .contenu1, .contenu2 { margin:0 10em; border: 2px solid #36c; padding: 1px; background: #cfc; } .contenu1 {border-top: 0; border-bottom: 0; }
Effectivement ca marche. Pourquoi ? je ne sais pas... c'est dommage. Merci bien.
C'est expliqué à divers endroits, par exemple http://www.ugcs.caltech.edu/~takoyaki/css-test/escaping_margins/
Le standard CSS1 est une #*@!% à lire, mais en prennant bien en compte le poids de chaque mot, des exemples, de TOUT, on finit par saisir à peu près en lisant le chapitre intitulé (surprise) "Vertical formatting".
The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical margins (i.e., with no border, padding or content between them) are collapsed to use the maximum of the margin values. [...] Similarly, if the padding between the 'UL' and the first 'LI' element (the "E" constant) had been zero, the margins of the UL and first LI elements would have been collapsed.
La largeur de la marge des éléments de niveau bloc non flottant spécifie la distance minimal jusqu'aux bords des boîtes environnantes. Deux ou plus marges verticales jointes (c-à-d sans bordure, remplissage ou contenu entre elles) sont confondues en utilisant la valeur de marge maximale. [...] De manière similaire, si le remplissage entre l'élément «UL» et le premier «LI» (la constante «E») avait été zéro, alors les marges de l'élément «UL» et du premier «LI» auraient été confondues.
C'est ce qu'on a ici, les marges verticales de .rubrique et .contenu1 sont confondues. En revanche dès qu'on met un remplissage ou une bordure à .contenu1, les marges ne sont plus jointes et ne peuvent donc plus être confondues.
Marc Mongenet
Raphaël Wils wrote:
Pascal Vigneron a écrit :
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
Pas trouvé quelle spécification est responsable.
Par contre ça marche en définissant un padding non nul
pour les .contenu1 et .contenu2
.contenu1, .contenu2 {
margin:0 10em;
border: 2px solid #36c;
padding: 1px;
background: #cfc; }
.contenu1 {border-top: 0; border-bottom: 0; }
Effectivement ca marche. Pourquoi ? je ne sais pas... c'est dommage.
Merci bien.
C'est expliqué à divers endroits, par exemple
http://www.ugcs.caltech.edu/~takoyaki/css-test/escaping_margins/
Le standard CSS1 est une #*@!% à lire, mais en prennant bien en
compte le poids de chaque mot, des exemples, de TOUT, on finit
par saisir à peu près en lisant le chapitre intitulé (surprise)
"Vertical formatting".
The width of the margin on non-floating block-level elements specifies
the minimum distance to the edges of surrounding boxes. Two or more
adjoining vertical margins (i.e., with no border, padding or content
between them) are collapsed to use the maximum of the margin values.
[...] Similarly, if the padding between the 'UL' and the first 'LI'
element (the "E" constant) had been zero, the margins of the UL and
first LI elements would have been collapsed.
La largeur de la marge des éléments de niveau bloc non flottant
spécifie la distance minimal jusqu'aux bords des boîtes environnantes.
Deux ou plus marges verticales jointes (c-à-d sans bordure, remplissage
ou contenu entre elles) sont confondues en utilisant la valeur de
marge maximale. [...] De manière similaire, si le remplissage entre
l'élément «UL» et le premier «LI» (la constante «E») avait été zéro,
alors les marges de l'élément «UL» et du premier «LI» auraient été
confondues.
C'est ce qu'on a ici, les marges verticales de .rubrique et .contenu1
sont confondues. En revanche dès qu'on met un remplissage ou une
bordure à .contenu1, les marges ne sont plus jointes et ne peuvent donc
plus être confondues.
Y a-t-il une subtilité dans les CSS que je n'aurais pas compris ?
Pas trouvé quelle spécification est responsable. Par contre ça marche en définissant un padding non nul pour les .contenu1 et .contenu2 .contenu1, .contenu2 { margin:0 10em; border: 2px solid #36c; padding: 1px; background: #cfc; } .contenu1 {border-top: 0; border-bottom: 0; }
Effectivement ca marche. Pourquoi ? je ne sais pas... c'est dommage. Merci bien.
C'est expliqué à divers endroits, par exemple http://www.ugcs.caltech.edu/~takoyaki/css-test/escaping_margins/
Le standard CSS1 est une #*@!% à lire, mais en prennant bien en compte le poids de chaque mot, des exemples, de TOUT, on finit par saisir à peu près en lisant le chapitre intitulé (surprise) "Vertical formatting".
The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical margins (i.e., with no border, padding or content between them) are collapsed to use the maximum of the margin values. [...] Similarly, if the padding between the 'UL' and the first 'LI' element (the "E" constant) had been zero, the margins of the UL and first LI elements would have been collapsed.
La largeur de la marge des éléments de niveau bloc non flottant spécifie la distance minimal jusqu'aux bords des boîtes environnantes. Deux ou plus marges verticales jointes (c-à-d sans bordure, remplissage ou contenu entre elles) sont confondues en utilisant la valeur de marge maximale. [...] De manière similaire, si le remplissage entre l'élément «UL» et le premier «LI» (la constante «E») avait été zéro, alors les marges de l'élément «UL» et du premier «LI» auraient été confondues.
C'est ce qu'on a ici, les marges verticales de .rubrique et .contenu1 sont confondues. En revanche dès qu'on met un remplissage ou une bordure à .contenu1, les marges ne sont plus jointes et ne peuvent donc plus être confondues.
