float et clear : pour y voir clair et ne plus flotter
19 réponses
Olivier Miakinen
Bonjour,
Je crois que je n'ai pas encore parfaitement compris le fonctionnement
des propriétés CSS float et clear. Pour tenter d'y voir un peu plus
clair, j'aurais juste une question : existe-t-il une situation dans
laquelle un clear:both donnerait un résultat différent d'un clear:left
(respectivement clear:right) ?
Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :
Et avec la démo proposée par Aldo, ils y arrivent ?
Chrome, Firefox et Opera me donnent la même chose mais pas IE7 :
http://cjoint.com/?0kwlcinbqp8
Je n'ai pas encore IE8 :-(
Ne parlent-ils pas du 9 ?
Ben oui mais j'en suis toujours à la 7. Faut me laisser le temps de respirer :-)
-- Cordialement.
http://fonderie.indret.free.fr/
Olivier Miakinen
Le 22/10/2010 00:33, SAM a écrit :
Merci de nous avoir refait signe mais je ne comprends pas ce que tu ne comprends pas. Où bloques-tu ?
C'est une question à laquelle il est généralement difficile de répondre quand il s'agit d'un blocage de compréhension : la plupart du temps, savoir où l'on bloquait signifie que l'on ne bloque plus et qu'on a enfin compris !
D'ailleurs je crois que c'est fait. Il me semble que je bloquais sur la croyance que l'apparition d'un « clear » dans le HTML faisait que toute la suite devait se placer en dessous des éléments qui étaient en « float », alors qu'en réalité cela ne s'applique (ce qui est logique) qu'à l'élément en question.
Au fait, l'illumination m'est venue sur cette page : <http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
[...]
- l'illusion est renforcée pas une astuce sur les bordures
Oui, c'est un truc qui m'a un temps bloqué la comprenette aussi. Maintenant c'est bon.
[...] - et après ces divs de fausse marge, enfin vient le div de contenu qui, bien entendu, remonte se glisser à gauche des autres. (en occupant les espaces restés libres, ligne à ligne)
Limpide. Je me sens tout bête de n'avoir pas compris plus tôt.
C'est d'un bête qu'il suffisait d'y penser ;-)
Ah oui, voilà.
Encore merci à toi, et à tous les autres qui sont intervenus sur cette question (en particulier Aldo avec son pointeur vers le site d'Eric Meyer).
Cordialement, -- Olivier Miakinen
Le 22/10/2010 00:33, SAM a écrit :
Merci de nous avoir refait signe mais je ne comprends pas ce que tu ne
comprends pas.
Où bloques-tu ?
C'est une question à laquelle il est généralement difficile de
répondre quand il s'agit d'un blocage de compréhension : la
plupart du temps, savoir où l'on bloquait signifie que l'on ne
bloque plus et qu'on a enfin compris !
D'ailleurs je crois que c'est fait. Il me semble que je bloquais
sur la croyance que l'apparition d'un « clear » dans le HTML
faisait que toute la suite devait se placer en dessous des
éléments qui étaient en « float », alors qu'en réalité cela
ne s'applique (ce qui est logique) qu'à l'élément en question.
Au fait, l'illumination m'est venue sur cette page :
<http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
[...]
- l'illusion est renforcée pas une astuce sur les bordures
Oui, c'est un truc qui m'a un temps bloqué la comprenette aussi.
Maintenant c'est bon.
[...]
- et après ces divs de fausse marge, enfin vient le div de contenu
qui, bien entendu, remonte se glisser à gauche des autres.
(en occupant les espaces restés libres, ligne à ligne)
Limpide. Je me sens tout bête de n'avoir pas compris plus tôt.
C'est d'un bête qu'il suffisait d'y penser ;-)
Ah oui, voilà.
Encore merci à toi, et à tous les autres qui sont intervenus sur cette
question (en particulier Aldo avec son pointeur vers le site d'Eric Meyer).
Merci de nous avoir refait signe mais je ne comprends pas ce que tu ne comprends pas. Où bloques-tu ?
C'est une question à laquelle il est généralement difficile de répondre quand il s'agit d'un blocage de compréhension : la plupart du temps, savoir où l'on bloquait signifie que l'on ne bloque plus et qu'on a enfin compris !
D'ailleurs je crois que c'est fait. Il me semble que je bloquais sur la croyance que l'apparition d'un « clear » dans le HTML faisait que toute la suite devait se placer en dessous des éléments qui étaient en « float », alors qu'en réalité cela ne s'applique (ce qui est logique) qu'à l'élément en question.
Au fait, l'illumination m'est venue sur cette page : <http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
[...]
- l'illusion est renforcée pas une astuce sur les bordures
Oui, c'est un truc qui m'a un temps bloqué la comprenette aussi. Maintenant c'est bon.
[...] - et après ces divs de fausse marge, enfin vient le div de contenu qui, bien entendu, remonte se glisser à gauche des autres. (en occupant les espaces restés libres, ligne à ligne)
Limpide. Je me sens tout bête de n'avoir pas compris plus tôt.
C'est d'un bête qu'il suffisait d'y penser ;-)
Ah oui, voilà.
Encore merci à toi, et à tous les autres qui sont intervenus sur cette question (en particulier Aldo avec son pointeur vers le site d'Eric Meyer).
Cordialement, -- Olivier Miakinen
SAM
Le 22/10/10 11:03, Guy Gruais a écrit :
Bonjour,
Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :
Et avec la démo proposée par Aldo, ils y arrivent ?
Chrome, Firefox et Opera me donnent la même chose mais pas IE7 :
http://cjoint.com/?0kwlcinbqp8
Ha! Quand même ! ça fonctionne un peu.
Je n'ai pas encore IE8 :-(
Ne parlent-ils pas du 9 ?
Ben oui mais j'en suis toujours à la 7. Faut me laisser le temps de respirer :-)
:-)
-- Stéphane Moriaux avec/with iMac-intel
Le 22/10/10 11:03, Guy Gruais a écrit :
Bonjour,
Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :
Et avec la démo proposée par Aldo, ils y arrivent ?
Chrome, Firefox et Opera me donnent la même chose mais pas IE7 :
http://cjoint.com/?0kwlcinbqp8
Ha! Quand même ! ça fonctionne un peu.
Je n'ai pas encore IE8 :-(
Ne parlent-ils pas du 9 ?
Ben oui mais j'en suis toujours à la 7.
Faut me laisser le temps de respirer :-)
Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :
Et avec la démo proposée par Aldo, ils y arrivent ?
Chrome, Firefox et Opera me donnent la même chose mais pas IE7 :
http://cjoint.com/?0kwlcinbqp8
Ha! Quand même ! ça fonctionne un peu.
Je n'ai pas encore IE8 :-(
Ne parlent-ils pas du 9 ?
Ben oui mais j'en suis toujours à la 7. Faut me laisser le temps de respirer :-)
:-)
-- Stéphane Moriaux avec/with iMac-intel
SAM
Le 22/10/10 11:42, Olivier Miakinen a écrit :
Il me semble que je bloquais sur la croyance que l'apparition d'un « clear » dans le HTML faisait que toute la suite devait se placer en dessous des éléments qui étaient en « float »,
Un peu comme si les blocs suivants "héritaient" de celui en clear ? alors ... qu'il ne sont pas contenus par lui, donc ne peuvent en hériter ... ! ?
alors qu'en réalité cela ne s'applique (ce qui est logique) qu'à l'élément en question.
comme margin, padding, color ... etc. etc. etc.
Ce qui peut peut-être troubler c'est qu'un seul clear libère de la flottaison précédente et d'un coup tout le flux suivant.
Au fait, l'illumination m'est venue sur cette page : <http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
C'est bien une démo qui pourtant pour moi ne m'aurait certainement pas aidé à comprendre (c'est lequel de tous ces divs en float+clear qui autorise celui normal à remonter ... tout en haut ?!)
-- Stéphane Moriaux avec/with iMac-intel
Le 22/10/10 11:42, Olivier Miakinen a écrit :
Il me semble que je bloquais
sur la croyance que l'apparition d'un « clear » dans le HTML
faisait que toute la suite devait se placer en dessous des
éléments qui étaient en « float »,
Un peu comme si les blocs suivants "héritaient" de celui en clear ?
alors ... qu'il ne sont pas contenus par lui, donc ne peuvent en hériter
... ! ?
alors qu'en réalité cela
ne s'applique (ce qui est logique) qu'à l'élément en question.
comme margin, padding, color ... etc. etc. etc.
Ce qui peut peut-être troubler c'est qu'un seul clear libère de la
flottaison précédente et d'un coup tout le flux suivant.
Au fait, l'illumination m'est venue sur cette page :
<http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
C'est bien une démo qui pourtant pour moi ne m'aurait certainement pas
aidé à comprendre
(c'est lequel de tous ces divs en float+clear qui autorise celui normal
à remonter ... tout en haut ?!)
Il me semble que je bloquais sur la croyance que l'apparition d'un « clear » dans le HTML faisait que toute la suite devait se placer en dessous des éléments qui étaient en « float »,
Un peu comme si les blocs suivants "héritaient" de celui en clear ? alors ... qu'il ne sont pas contenus par lui, donc ne peuvent en hériter ... ! ?
alors qu'en réalité cela ne s'applique (ce qui est logique) qu'à l'élément en question.
comme margin, padding, color ... etc. etc. etc.
Ce qui peut peut-être troubler c'est qu'un seul clear libère de la flottaison précédente et d'un coup tout le flux suivant.
Au fait, l'illumination m'est venue sur cette page : <http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
C'est bien une démo qui pourtant pour moi ne m'aurait certainement pas aidé à comprendre (c'est lequel de tous ces divs en float+clear qui autorise celui normal à remonter ... tout en haut ?!)
-- Stéphane Moriaux avec/with iMac-intel
Olivier Miakinen
Le 22/10/2010 14:24, SAM m'a répondu :
Il me semble que je bloquais sur la croyance que l'apparition d'un « clear » dans le HTML faisait que toute la suite devait se placer en dessous des éléments qui étaient en « float »,
Un peu comme si les blocs suivants "héritaient" de celui en clear ? alors ... qu'il ne sont pas contenus par lui, donc ne peuvent en hériter ... ! ?
Ce n'est peut-être pas la peine de remuer la plaie autour du couteau, hein !
Il se trouve que tous les exemples que j'avais vus jusqu'alors consistaient en un clear sans autre float, ce qui forçait tous les éléments suivants à se placer en dessous de l'élément « clearé ».
Ce qui peut peut-être troubler c'est qu'un seul clear libère de la flottaison précédente et d'un coup tout le flux suivant.
Voilà.
Au fait, l'illumination m'est venue sur cette page : <http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
C'est bien une démo qui pourtant pour moi ne m'aurait certainement pas aidé à comprendre (c'est lequel de tous ces divs en float+clear qui autorise celui normal à remonter ... tout en haut ?!)
Eh bien aucun d'entre eux ne « l'autorise » à remonter : il remonte parce qu'aucun d'entre eux ne lui *interdit* de le faire !
Ce que je ne comprends pas, en revanche, c'est pourquoi Eric Meyer était obligé d'alterner les éléments en left et ceux en right, et surtout en quoi c'est une conséquence du respect strict de la norme.
Cordialement, -- Olivier Miakinen
Le 22/10/2010 14:24, SAM m'a répondu :
Il me semble que je bloquais
sur la croyance que l'apparition d'un « clear » dans le HTML
faisait que toute la suite devait se placer en dessous des
éléments qui étaient en « float »,
Un peu comme si les blocs suivants "héritaient" de celui en clear ?
alors ... qu'il ne sont pas contenus par lui, donc ne peuvent en hériter
... ! ?
Ce n'est peut-être pas la peine de remuer la plaie autour du couteau,
hein !
Il se trouve que tous les exemples que j'avais vus jusqu'alors
consistaient en un clear sans autre float, ce qui forçait tous
les éléments suivants à se placer en dessous de l'élément
« clearé ».
Ce qui peut peut-être troubler c'est qu'un seul clear libère de la
flottaison précédente et d'un coup tout le flux suivant.
Voilà.
Au fait, l'illumination m'est venue sur cette page :
<http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
C'est bien une démo qui pourtant pour moi ne m'aurait certainement pas
aidé à comprendre
(c'est lequel de tous ces divs en float+clear qui autorise celui normal
à remonter ... tout en haut ?!)
Eh bien aucun d'entre eux ne « l'autorise » à remonter : il remonte
parce qu'aucun d'entre eux ne lui *interdit* de le faire !
Ce que je ne comprends pas, en revanche, c'est pourquoi Eric Meyer
était obligé d'alterner les éléments en left et ceux en right, et
surtout en quoi c'est une conséquence du respect strict de la norme.
Il me semble que je bloquais sur la croyance que l'apparition d'un « clear » dans le HTML faisait que toute la suite devait se placer en dessous des éléments qui étaient en « float »,
Un peu comme si les blocs suivants "héritaient" de celui en clear ? alors ... qu'il ne sont pas contenus par lui, donc ne peuvent en hériter ... ! ?
Ce n'est peut-être pas la peine de remuer la plaie autour du couteau, hein !
Il se trouve que tous les exemples que j'avais vus jusqu'alors consistaient en un clear sans autre float, ce qui forçait tous les éléments suivants à se placer en dessous de l'élément « clearé ».
Ce qui peut peut-être troubler c'est qu'un seul clear libère de la flottaison précédente et d'un coup tout le flux suivant.
Voilà.
Au fait, l'illumination m'est venue sur cette page : <http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
C'est bien une démo qui pourtant pour moi ne m'aurait certainement pas aidé à comprendre (c'est lequel de tous ces divs en float+clear qui autorise celui normal à remonter ... tout en haut ?!)
Eh bien aucun d'entre eux ne « l'autorise » à remonter : il remonte parce qu'aucun d'entre eux ne lui *interdit* de le faire !
Ce que je ne comprends pas, en revanche, c'est pourquoi Eric Meyer était obligé d'alterner les éléments en left et ceux en right, et surtout en quoi c'est une conséquence du respect strict de la norme.
C'est bien une démo qui pourtant pour moi ne m'aurait certainement pas aidé à comprendre (c'est lequel de tous ces divs en float+clear qui autorise celui normal à remonter ... tout en haut ?!)
Eh bien aucun d'entre eux ne « l'autorise » à remonter : il remonte parce qu'aucun d'entre eux ne lui *interdit* de le faire !
Ça alors ! On retrouve le raisonnement de l'esspert en RegExp et grammaire ;-) Les déblocages ça a vraiment du bon ;-)
Ce que je ne comprends pas, en revanche, c'est pourquoi Eric Meyer était obligé d'alterner les éléments en left et ceux en right, et surtout en quoi c'est une conséquence du respect strict de la norme.
Le respect de la "norme" ... comme je n'y comprends rien ... (je ne sais ni où elle est, ni ne connais son langage ...)
Le mieux s'est d'essayer-voir si en les groupant ça fonctionne.
J'en bloque un à gauche et un autre à droite J'en bloque un à gauche et un autre à droite J'en bloque un à gauche et un autre à droite
ou
J'en bloque un à gauche et un autre à gauche et un autre à gauche. J'en bloque un à droite et un autre à droite et un autre à droite. et alors est-ce que ceux de droite vont remonter ? Non. Pourquoi ?
C'est bien une démo qui pourtant pour moi ne m'aurait certainement pas
aidé à comprendre
(c'est lequel de tous ces divs en float+clear qui autorise celui normal
à remonter ... tout en haut ?!)
Eh bien aucun d'entre eux ne « l'autorise » à remonter : il remonte
parce qu'aucun d'entre eux ne lui *interdit* de le faire !
Ça alors !
On retrouve le raisonnement de l'esspert en RegExp et grammaire ;-)
Les déblocages ça a vraiment du bon ;-)
Ce que je ne comprends pas, en revanche, c'est pourquoi Eric Meyer
était obligé d'alterner les éléments en left et ceux en right, et
surtout en quoi c'est une conséquence du respect strict de la norme.
Le respect de la "norme" ... comme je n'y comprends rien ...
(je ne sais ni où elle est, ni ne connais son langage ...)
Le mieux s'est d'essayer-voir si en les groupant ça fonctionne.
J'en bloque un à gauche et un autre à droite
J'en bloque un à gauche et un autre à droite
J'en bloque un à gauche et un autre à droite
ou
J'en bloque un à gauche et un autre à gauche et un autre à gauche.
J'en bloque un à droite et un autre à droite et un autre à droite.
et alors est-ce que ceux de droite vont remonter ?
Non.
Pourquoi ?
C'est bien une démo qui pourtant pour moi ne m'aurait certainement pas aidé à comprendre (c'est lequel de tous ces divs en float+clear qui autorise celui normal à remonter ... tout en haut ?!)
Eh bien aucun d'entre eux ne « l'autorise » à remonter : il remonte parce qu'aucun d'entre eux ne lui *interdit* de le faire !
Ça alors ! On retrouve le raisonnement de l'esspert en RegExp et grammaire ;-) Les déblocages ça a vraiment du bon ;-)
Ce que je ne comprends pas, en revanche, c'est pourquoi Eric Meyer était obligé d'alterner les éléments en left et ceux en right, et surtout en quoi c'est une conséquence du respect strict de la norme.
Le respect de la "norme" ... comme je n'y comprends rien ... (je ne sais ni où elle est, ni ne connais son langage ...)
Le mieux s'est d'essayer-voir si en les groupant ça fonctionne.
J'en bloque un à gauche et un autre à droite J'en bloque un à gauche et un autre à droite J'en bloque un à gauche et un autre à droite
ou
J'en bloque un à gauche et un autre à gauche et un autre à gauche. J'en bloque un à droite et un autre à droite et un autre à droite. et alors est-ce que ceux de droite vont remonter ? Non. Pourquoi ?
Tiens ? Quand on les alterne, peu importe qu'on commence par ceux de gauche ou de droite !
-- Stéphane Moriaux avec/with iMac-intel
Aldo M.
Le 22/10/2010 11:42, Olivier Miakinen a écrit :
[...]
- l'illusion est renforcée pas une astuce sur les bordures
Oui, c'est un truc qui m'a un temps bloqué la comprenette aussi. Maintenant c'est bon.
D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusé le pourquoi du comment, a priori le fait que la hauteur du div soit nulle (je l'aurais tenté avec 1px, moi...) aide à faire cette oblique parfaite, mais seulement 10 div de largeur décroissante pour un "dégradé" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop. Pas du tout, même !
Encore merci à toi, et à tous les autres qui sont intervenus sur cette question (en particulier Aldo avec son pointeur vers le site d'Eric Meyer).
De rien !
-- Aldo M.
Le 22/10/2010 11:42, Olivier Miakinen a écrit :
[...]
- l'illusion est renforcée pas une astuce sur les bordures
Oui, c'est un truc qui m'a un temps bloqué la comprenette aussi.
Maintenant c'est bon.
D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces
bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusé le
pourquoi du comment, a priori le fait que la hauteur du div soit nulle
(je l'aurais tenté avec 1px, moi...) aide à faire cette oblique
parfaite, mais seulement 10 div de largeur décroissante pour un
"dégradé" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop.
Pas du tout, même !
Encore merci à toi, et à tous les autres qui sont intervenus sur cette
question (en particulier Aldo avec son pointeur vers le site d'Eric Meyer).
- l'illusion est renforcée pas une astuce sur les bordures
Oui, c'est un truc qui m'a un temps bloqué la comprenette aussi. Maintenant c'est bon.
D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusé le pourquoi du comment, a priori le fait que la hauteur du div soit nulle (je l'aurais tenté avec 1px, moi...) aide à faire cette oblique parfaite, mais seulement 10 div de largeur décroissante pour un "dégradé" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop. Pas du tout, même !
Encore merci à toi, et à tous les autres qui sont intervenus sur cette question (en particulier Aldo avec son pointeur vers le site d'Eric Meyer).
De rien !
-- Aldo M.
Aldo M.
Le 22/10/2010 17:41, Aldo M. a écrit :
D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusé le pourquoi du comment, a priori le fait que la hauteur du div soit nulle (je l'aurais tenté avec 1px, moi...) aide à faire cette oblique parfaite, mais seulement 10 div de largeur décroissante pour un "dégradé" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop. Pas du tout, même !
Oups, ok, j'ai compris, grâce à lui, en fait : http://fourshapes.com/articles/2006/07/11/diagonal-lines-in-css/
Comme j'utilise toujours (question de goût, un peu monomaniaque...) ou presque des border 1px dotted (solid ne change rien à l'affaire, notez), je n'ai pas intégré le fait que les bordures se rejoignent (et c'est logique) en biseau !
La honte et l'opprobre soient sur moi.
-- Aldo M.
Le 22/10/2010 17:41, Aldo M. a écrit :
D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces
bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusé le
pourquoi du comment, a priori le fait que la hauteur du div soit nulle
(je l'aurais tenté avec 1px, moi...) aide à faire cette oblique
parfaite, mais seulement 10 div de largeur décroissante pour un
"dégradé" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop.
Pas du tout, même !
Oups, ok, j'ai compris, grâce à lui, en fait :
http://fourshapes.com/articles/2006/07/11/diagonal-lines-in-css/
Comme j'utilise toujours (question de goût, un peu monomaniaque...) ou
presque des border 1px dotted (solid ne change rien à l'affaire, notez),
je n'ai pas intégré le fait que les bordures se rejoignent (et c'est
logique) en biseau !
D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusé le pourquoi du comment, a priori le fait que la hauteur du div soit nulle (je l'aurais tenté avec 1px, moi...) aide à faire cette oblique parfaite, mais seulement 10 div de largeur décroissante pour un "dégradé" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop. Pas du tout, même !
Oups, ok, j'ai compris, grâce à lui, en fait : http://fourshapes.com/articles/2006/07/11/diagonal-lines-in-css/
Comme j'utilise toujours (question de goût, un peu monomaniaque...) ou presque des border 1px dotted (solid ne change rien à l'affaire, notez), je n'ai pas intégré le fait que les bordures se rejoignent (et c'est logique) en biseau !
La honte et l'opprobre soient sur moi.
-- Aldo M.
SAM
Le 22/10/10 17:41, Aldo M. a écrit :
Le 22/10/2010 11:42, Olivier Miakinen a écrit :
[...]
- l'illusion est renforcée pas une astuce sur les bordures
Oui, c'est un truc qui m'a un temps bloqué la comprenette aussi. Maintenant c'est bon.
D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusé le pourquoi du comment, a priori le fait que la hauteur du div soit nulle (je l'aurais tenté avec 1px, moi...) aide à faire cette oblique parfaite, mais seulement 10 div de largeur décroissante pour un "dégradé" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop. Pas du tout, même !
Le div est de hauteur nulle mais l'espace en hauteur est pris par la bordure utilisée c'est donc la largeur de bordure horizontale qui règle la hauteur du truc restant visible. La bordure verticale règlera l'inclinaison.
- largeur bordure basse et bleue, disons 2em border-bottom: 2em solid blue; Donc pour une oblique à 60° : - bordure gauche et blanche : 2 * V3 / 2 = 1.73em border-left: 1.73em solid white; - agrandissement largeur du div suivant : 2 * V3 / 2 = 1.73em Donc pour une oblique à 45° : - bordure gauche et blanche : 2em - agrandissement largeur du div suivant : 2em
-- Stéphane Moriaux avec/with iMac-intel
Le 22/10/10 17:41, Aldo M. a écrit :
Le 22/10/2010 11:42, Olivier Miakinen a écrit :
[...]
- l'illusion est renforcée pas une astuce sur les bordures
Oui, c'est un truc qui m'a un temps bloqué la comprenette aussi.
Maintenant c'est bon.
D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces
bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusé le
pourquoi du comment, a priori le fait que la hauteur du div soit nulle
(je l'aurais tenté avec 1px, moi...) aide à faire cette oblique
parfaite, mais seulement 10 div de largeur décroissante pour un
"dégradé" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop.
Pas du tout, même !
Le div est de hauteur nulle mais l'espace en hauteur est pris par la
bordure utilisée
c'est donc la largeur de bordure horizontale qui règle la hauteur du
truc restant visible.
La bordure verticale règlera l'inclinaison.
- largeur bordure basse et bleue, disons 2em
border-bottom: 2em solid blue;
Donc pour une oblique à 60° :
- bordure gauche et blanche : 2 * V3 / 2 = 1.73em
border-left: 1.73em solid white;
- agrandissement largeur du div suivant : 2 * V3 / 2 = 1.73em
Donc pour une oblique à 45° :
- bordure gauche et blanche : 2em
- agrandissement largeur du div suivant : 2em
- l'illusion est renforcée pas une astuce sur les bordures
Oui, c'est un truc qui m'a un temps bloqué la comprenette aussi. Maintenant c'est bon.
D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusé le pourquoi du comment, a priori le fait que la hauteur du div soit nulle (je l'aurais tenté avec 1px, moi...) aide à faire cette oblique parfaite, mais seulement 10 div de largeur décroissante pour un "dégradé" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop. Pas du tout, même !
Le div est de hauteur nulle mais l'espace en hauteur est pris par la bordure utilisée c'est donc la largeur de bordure horizontale qui règle la hauteur du truc restant visible. La bordure verticale règlera l'inclinaison.
- largeur bordure basse et bleue, disons 2em border-bottom: 2em solid blue; Donc pour une oblique à 60° : - bordure gauche et blanche : 2 * V3 / 2 = 1.73em border-left: 1.73em solid white; - agrandissement largeur du div suivant : 2 * V3 / 2 = 1.73em Donc pour une oblique à 45° : - bordure gauche et blanche : 2em - agrandissement largeur du div suivant : 2em
