Colonnes CSS fluides, marges fixes; le Saint Graal des Saint Graal
Mise à jour et résumé
Je me sens obligé de clarifier cette question, maintenant qu'il y a une prime attachée.
( En outre, je suis presque sûr que ce sera un jeu d'enfant lorsque la valeur unitaire calc() CSS3 est prise en charge, faisant quelque chose comme width: calc(25% - 5px); bien que nous allons probablement parcourir Internet dans nos esprits par ce point)
Je travaille sur un framework CSS pour quelques projets qui partagent les exigences de conception; à savoir une disposition fluide à 12 colonnes. En utilisant des éléments flottants .column Avec des largeurs en pourcentage de (100% / 12) x col_size, C'est assez facile. Cependant, le problème vient avec l'ajout de marges fixes ( ou toute forme d'espacement) entre les colonnes.
Ma première tentative a utilisé les colonnes fluides comme décrit, avec un enfant .panel Imbriqué dans chacune. L'extrait HTML/CSS suit ( réduit pour plus de concision):
.column{
float: left;
display: inline-block;
}
.width-01{ width: 8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width: 25%; }
/* etc */
.panel{
width: 100%;
padding: 5px;
box-sizing: border-box; /* so padding doesn't increase width */
}
<div class="column width-02">
<div class="panel">Width-02</div>
</div>
<div class="column width-03">
<div class="panel">Width-03</div>
</div>
<div class="column width-02">
<div class="panel">Width-02</div>
</div>
<div class="column width-05">
<div class="panel">Width-05</div>
</div>
Cet extrait produirait une mise en page similaire à celle de l'image ci-dessous, mais tous les éléments .panel Ont un rembourrage 5px De tous les côtés. J'essaie de faire en sorte que le contenu du bord des colonnes extérieures soit aligné avec le bord du port de vue ( ou le conteneur parent d'ailleurs) . Une autre approche serait d'éliminer complètement la classe .panel, Et de simplement aller avec les colonnes:
.column{
float: left;
display: inline-block;
padding-left: 10px;
box-sizing: border-box;
}
.column:first-child{ padding-left: 0px; }
.width-01{ width: 8.3333%; }
.width-02{ width: 16.6666%; }
.width-03{ width: 25%; }
/* etc */
<div class="column width-02">Width-02</div>
<div class="column width-03">Width-03</div>
<div class="column width-02">Width-02</div>
<div class="column width-05">Width-05</div>
Encore une fois, cela fonctionne bien, produisant des résultats encore plus proches de ceux de l'image ci-dessous, mais maintenant le problème ( réel) est que le rembourrage ronge le largeur des colonnes vissant la distribution de largeur. La colonne :first-child A 10 pixels ( ou quelle que soit la taille de la marge) une plus grande largeur de la zone de contenu que ses frères et sœurs.
Cela peut sembler anodin, voire imperceptible; cependant il y a quelques cas où avoir exacte ( aussi exacte que possible) la distribution de largeur entre les éléments est soit nécessaire, ou rendrait les choses tout à fait plus faciles.
Et donc, que ce soit en utilisant un remplissage, une marge ou une combinaison de ceux-ci; existe-t-il une solution pour les colonnes fluides, marges fixes, avec distribution uniforme d'espace de gouttière qui ne vole pas "marginal" (*** haha * ) zone de contenu des colonnes adjacentes? **
Question d'origine
En raison du simple manque de résultats dans mes recherches et tentatives, j'ai conclu que c'était impossible. Si n'importe où peut apporter une réponse, je suis certain que c'est ici.
Existe-t-il un moyen, en utilisant du CSS pur, d'obtenir une disposition en colonnes de largeur fluide avec des marges de largeur fixes?
Remarque importante: Cette figure n'est qu'un exemple, et non la disposition spécifique que je recherche atteindre. Une solution donnée doit permettre toute combinaison de colonnes adjacentes, la distribution de largeur totale totalisant 12 ou moins. Considérez le populaire grille 96 pour référence.)
Remarque: dans une disposition à 12 colonnes, la distribution de la largeur des colonnes dans l'image sont respectivement 2, 3, 2 et 5.
Jusqu'à présent, j'ai eu recours à une grille qui, en utilisant des pourcentages, presque accomplit cela. Le problème est que, pour atteindre les marges, chaque colonne nécessite un enfant supplémentaire ( je les appelle .panel) avec:
width: 100%;
box-sizing: border-box;
padding: 10px;
C'est, encore une fois presque, très bien; le problème avec cette approche est que la première et la dernière colonne ont des "marges" externes (10px) et les "marges" entre chaque colonne sont doublées (2 x 10px)
Certes, avec l'inclusion du nouveau type de valeur CSS3 calc(), cela pourrait être résolu beaucoup plus facilement. Quelque chose en direction de:
.width-12 > .panel{ width: 100%; }
.width-09 > .panel{
width: calc(75% - 10px);
margin: ...;
}
J'ai quelques correctifs Javascript, j'ai piraté des trucs qui "fonctionnent", mais je suis en quête. Espérons que le plus saint des graal existe.
La solution suivante, et celle fournie par @avall (bien que certainement un bon choix pour simplifier) ne sont malheureusement pas ce que je recherche. Le principal problème étant que les marges ne sont pas réparties également entre les colonnes.
La seule façon dont je peux voir que cela fonctionne est de réduire le rembourrage .panel À 5px Et quelque chose comme:
.column:first-child > .panel {
padding-left: 0px;
}
.column:last-child > .panel {
padding-right: 0px;
}
/* not necessary? in any case, haven't tested */
.column:only-child > .panel {
padding-right: 0px;
padding-left: 0px;
}
Cette solution n'est pas acceptable, uniquement parce qu'IE8 ne reconnaît pas les pseudo-sélecteurs :last-child ( et d'ailleurs :only-child).
J'ai finalement compris. Après des centaines d'heures perdues au cours de la dernière décennie (bien que je compte sur des CSS qui n'auraient pas fonctionné il y a un an de toute façon). Je l'ai résolu sans aucun problème. et dans IE8 +.
Veuillez préparer 2001: A Space Odyssey Music car j'atterris sur ce bateau.
Le génie et l'astuce de cette méthode consistent à utiliser des éléments de bloc en ligne, puis à utiliser l'espacement des mots pour contrebalancer en utilisant une marge droite négative. Une marge droite négative à elle seule rapprochera les éléments, vous permettant d'avoir une largeur de 100% et de toujours ajuster les choses entre les deux, mais en laissant les éléments se chevaucher. Définir une marge négative sur le parent annule simplement la marge enfant en ce qui concerne l'effet sur l'interaction avec la largeur totale (la marque magique "100% de largeur" que nous essayons de toucher "). Le remplissage ne sert qu'à augmenter la taille de l'élément sur et est inutile en ce qui concerne la marge de contre-action. Il est souvent utilisé avec le dimensionnement de la boîte dans les solutions truquées par le jury à ce problème, au détriment de la perte de la possibilité d'utiliser du rembourrage du tout autrement (et de la marge) et nécessitant probablement plus éléments de wrapper.
L'espacement des mots fournit la "troisième voie" magique pour ajouter ou supprimer la distance horizontale entre deux éléments, à condition qu'ils soient en bloc, car ils seront comptés comme un seul "mot" dans ce cas, et tout espace entre les deux se réduira à la seule propriété "Word-spacing" contrôlable. Mis à part cette astuce, je ne connais pas d'autre moyen d'obtenir ce résultat à 100%.
Je présente humblement la réponse ultime au problème des colonnes flexibles à gouttières fixes. Je nomme par la présente ma solution "la manœuvre oméga". Il est livré avec la possibilité de gérer des colonnes de largeur mixte arbitraires (en ajoutant jusqu'à 100% de largeur totale exactement ou légèrement moins pour l'arrondi), toute taille de gouttière, toute quantité prédéfinie de colonnes en largeur, gère des quantités arbitraires de lignes avec auto-wrapping, et utilise des éléments inline-block et fournit donc les options d'alignement vertical fournies avec inline-block, ET il ne nécessite aucun balisage supplémentaire et ne nécessite qu'une seule déclaration de classe sur le conteneur (sans compter la définition des largeurs de colonne). Je pense que le code parle de lui-même. Voici l'implémentation du code pour 2 à 6 colonnes utilisant des gouttières 10px et des classes d'assistance bonus pour les pourcentages.
EDIT: énigme intéressante. J'ai réussi à obtenir deux versions légèrement différentes; un pour mozilla et ie8 +, l'autre pour webkit. Il semble que l'astuce Word-spacing ne fonctionne pas dans le webkit, et je ne sais pas pourquoi l'autre version fonctionne dans le webkit mais pas ie8 +/mozilla. La combinaison des deux vous permet de couvrir tout et je suis prêt à parier qu'il existe un moyen d'unifier cette tactique ou quelque chose de très similaire pour contourner le problème.
EDIT2: Je l'ai surtout! Magique text-align: justify obtient WebKit presque là avec celui d'espacement des mots. L'espacement semble juste un peu petit, comme une question de pixels à droite et peut-être un extra dans les gouttières. Mais il est utilisable et il semble plus fiable de conserver les colonnes que tout ce que j'ai utilisé auparavant. Il ne réduit jamais à moins de colonnes, il se compressera jusqu'à ce que le navigateur obtienne une barre de défilement horizontale.
Edit3: Je l'ai un peu près de la perfection. La définition de la taille de police à 0 normalise la plupart des problèmes restants avec un espacement désactivé. Je dois juste corriger IE9 maintenant qui le réduit si sa police est de taille 0.
EDIT4: J'ai obtenu la réponse à IE à partir d'autres messages de largeur de fluide: -ms-text-justify: distribute-all-lines. Testé dans IE8-10.
/* The Omega Maneuver */
[class*=cols] { text-align: justify; padding-left: 10px; font-size: 0;
-ms-text-justify: distribute-all-lines; }
[class*=cols]>* { display: inline-block; text-align: left; font-size: 13px;
Word-spacing: normal; vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.cols2 { Word-spacing: 20px; padding-right: 20px; }
.cols3 { Word-spacing: 30px; padding-right: 30px; }
.cols4 { Word-spacing: 40px; padding-right: 40px; }
.cols5 { Word-spacing: 50px; padding-right: 50px; }
.cols6 { Word-spacing: 60px; padding-right: 60px; }
.cols2 > * { margin-right: -10px; }
.cols3 > * { margin-right: -20px; }
.cols4 > * { margin-right: -30px; }
.cols5 > * { margin-right: -40px; }
.cols6 > * { margin-right: -50px; }
Quelques aides:
.⅛, .⅛s >* { width: 12.50%; }
.⅙, .⅙s >* { width: 16.66%; }
.⅕, .⅕s >* { width: 20.00%; }
.¼, .¼s >* { width: 25.00%; }
.⅓, .⅓s >* { width: 33.00%; }
.⅜, .⅜s >* { width: 37.50%; }
.⅖, .⅖s >* { width: 40.00%; }
.½, .½s >* { width: 50.00%; }
.⅗, .⅗s >* { width: 60.00%; }
.⅝, .⅝s >* { width: 62.50%; }
.⅔, .⅔s >* { width: 66.00%; }
.¾, .¾s >* { width: 75.00%; }
.⅘, .⅘s >* { width: 80.00%; }
.⅚, .⅚s >* { width: 83.33%; }
.⅞, .⅞s >* { width: 87.50%; }
.blarg-five-twelfs { width: 41.66%; }
Vous pouvez voir mon magnum opus en action parmi un champ de gloire ici: http://jsfiddle.net/xg7nB/15/
<div class="cols4">
<div class="⅙">This is my magnum opus</div>
<div class="¼">I finally beat css</div>
<div class="⅙">⚉ ☺ ☻ ♾ ☢</div>
<div class="blarg-five-twelfs">I BEAT IT FOREVER</div>
</div>
L'implémentation minimale absolue, en utilisant comme exemple 4 colonnes de largeur égale (25%) et des gouttières 10px, est la suivante:
.fourEqualCols { Word-spacing: 40px; padding: 0 40px 0 10px;
text-align: justify; font-size: 0;
-ms-text-justify: distribute-all-lines; }
.fourEqualCols>* { margin-right: -30px; width: 25%;
display: inline-block; Word-spacing: normal;
text-align: left; font-size: 13px; }
<div class="fourEqualCols ">
<div>GLORIOUSLY CLEAN MARKUP</div>
<div>I hate extra markup and excessive class props</div>
<div>Naked code</div>
<div>get intimate</div>
</div>
Donc, ce code remplace essentiellement à peu près n'importe quel cadre de grille existant, n'est-ce pas? Si vous pouvez définir arbitrairement des gouttières et ensuite créer des ensembles de colonnes qui atteignent une largeur de 100%, c'est strictement supérieur à la plupart/à tous les cadres de grille, en fait, n'est-ce pas? Si vous ne développez plus pour IE7 comme beaucoup d'entre nous, alors cela combiné avec le dimensionnement de la boîte: la bordure de la boîte rend le remplissage et la bordure également un problème.
Edit: oh à droite vous vouliez affleurer les côtés du conteneur. Aucun problème avec cela, j'ai dû ajouter spécifiquement des gouttières latérales afin que nous puissions simplement changer certaines valeurs par 10 et nous débarrasser du rembourrage et du tour est joué. http://jsfiddle.net/bTty3/
[class^=cols] { text-align: justify; font-size: 0;
-ms-text-justify: distribute-all-lines; }
[class^=cols] >* { display: inline-block; text-align: left; font-size: 13px;
Word-spacing: normal; vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.cols2 { Word-spacing: 20px; padding-right: 10px; }
.cols3 { Word-spacing: 30px; padding-right: 20px; }
.cols4 { Word-spacing: 40px; padding-right: 30px; }
.cols5 { Word-spacing: 50px; padding-right: 40px; }
.cols6 { Word-spacing: 60px; padding-right: 50px; }
.cols2 >* { margin-right: 0 }
.cols2 >* { margin-right: -10px; }
.cols3 >* { margin-right: -20px; }
.cols4 >* { margin-right: -30px; }
.cols5 >* { margin-right: -40px; }
.cols6 >* { margin-right: -50px; }
Même html
<div class="cols4">
<div class="⅙">This is my magnum opus</div>
<div class="¼">I finally beat css</div>
<div class="⅙">⚉ ☺ ☻ ♾ ☢</div>
<div class="blarg-five-twelfs">I BEAT IT FOREVER</div>
</div>
Essayez cette pure solution CSS2: violon de démonstration
CSS de base ( violon sans les cosmétiques):
html, body {
padding: 0;
margin: 0;
}
#wrap {
padding-right: 30px;
overflow: hidden;
}
.col {
float: left;
margin-left: 40px;
margin-right: -30px;
}
.col:first-child {
margin-left: 0;
}
.small {
width: 16.66%;
}
.medium {
width: 25%;
}
.large {
width: 41.66%;
}
HTML:
<div id="wrap">
<div class="col small"></div>
<div class="col medium"></div>
<div class="col small"></div>
<div class="col large"></div>
</div>
Testé sur Win7 dans IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 6.0, Chrome 13.0.
Mettre à jour:
Maintenant, si vous aimez que cela fonctionne avec un nombre arbitraire de colonnes, vous devez ajouter une classe supplémentaire au conteneur en spécifiant le nombre de colonnes:
<div class="cols-12 count-04">
<div class="col width-02"></div>
<div class="col width-03"></div>
<div class="col width-02"></div>
<div class="col width-05"></div>
</div>
Voir ce violon mis à jour démontrant un certain nombre de comptes de colonnes.
Bug possible:
En théorie, cette solution devrait fonctionner pour n'importe quel nombre de colonnes pour chaque largeur de colonne minimale possible dans n'importe quelle largeur de fenêtre de navigateur. Mais il semble que tous les navigateurs s'avèrent incapables de gérer: 1. un grand nombre de colonnes d'une largeur de colonne, ou 2. une petite largeur de fenêtre de navigateur.
Notez que tous les navigateurs d'une largeur minimale de 1440 pixels, ce qui équivaut à 12 fois 120 pixels (l'espace occupé par toutes les marges de 10 pixels), gèrent très bien la solution. Et lorsque vous utilisez 2 colonnes de largeur de colonne ou plus, l'exigence d'une largeur de navigateur minimale tombe en effet à 720 pixels (6 * 120 pixels). Ce dernier cas semble plus réaliste, mais je ne peux toujours pas expliquer ce comportement du navigateur.
J'ai essayé de résoudre le problème en introduisant une classe supplémentaire - dernière colonne comme démontré par ce violon , mais cela ne résout pas le problème pour les petites largeurs de navigateur. Cela résout une petite erreur d'arrondi en raison des pourcentages de largeur cassés, mais ce problème pourrait être ignoré, je suppose.
J'aimerais entendre d'autres experts css sur celui-ci, j'ai donc ajouté une prime.
Pourquoi n'utilisez-vous pas
.column > .panel {
padding: 10px 0 10px 10px;
}
.column:first-child > .panel {
padding-left: 0px;
}
Cela fera des espaces de 10 pixels uniquement entre les boîtes et sans utiliser le dernier enfant.
En référence à la question d'origine "Existe-t-il un moyen, en utilisant du CSS pur, d'obtenir une disposition en colonnes de largeur fluide avec des marges de largeur fixes?"
Il est remarquable à quel point le CSS devient extrêmement difficile avec ce genre de questions. La semaine dernière, j'ai travaillé sur un "modèle de base" pour créer mon propre "Saint Graal", y compris la bordure, la marge et les rembourrages ... Il semble que CSS échoue pour ce genre de questions. Bien que la question à l'esprit soit assez facile, elle devient (presque?) Impossible à réaliser en CSS, en particulier entre les navigateurs.
La partie amusante est que ces questions sont facilement résolues en utilisant des tableaux. Je ne comprends pas pourquoi nous sommes obligés par la société du Web d'utiliser des div à la place pour des arguments aussi vagues que la "sémantique" et "l'aperçu facile" car la plupart des arguments sont faibles, voire faux. Les gens qui disent que les tableaux posent plus de problèmes n'ont manifestement aucune compréhension de la vraie difficulté qui se trouve dans CSS.
Quoi qu'il en soit, si vous voulez avoir une structure de table (comme les colonnes font partie d'une table), je suggère d'utiliser 'display: table'.
Pour obtenir l'image sous la question d'origine avec du CSS pur, les éléments suivants peuvent être utilisés:
CSS
html,body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
overflow: auto;
}
.table{
background: pink;
display: table;
width: 100%;
height: 100%;
}
.tableRow{
display: table-row;
}
.tableCell{
display: table-cell;
vertical-align: top;
height: 100%;
}
/*
Ensures the full size of the table-cell has the behaviour of a block-element.
This is needed, because 'table-cell' will behave differently in different browsers.
*/
.tableCell>div{
height: 100%;
}
/*
Padding has to be used instead of margin in 'border-box' modus.
*/
.tableCell>div>div{
height: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
/*
The final content.
*/
.tableCell>div>div>div{
background: lightblue;
padding: 5px;
height: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#col1{
width: 16.66%;
}
#col1>div>div{
padding-right: 10px;
}
#col2{
width: 25%;
}
#col2>div>div{
padding-right: 10px;
}
#col3{
width: 16.66%;
}
#col3>div>div{
padding-right: 10px;
}
#col4{
width: 41.66%;
}
HTML
<div class="table">
<div class="tableRow">
<div id='col1' class="tableCell">
<div><div><div>16.66%</div></div></div>
</div>
<div id='col2' class="tableCell">
<div><div><div>25%</div></div></div>
</div>
<div id='col3' class="tableCell">
<div><div><div>16.66%</div></div></div>
</div>
<div id='col4' class="tableCell">
<div><div><div>41.66%</div></div></div>
</div>
</div>
</div>
Je dirais qu'il est assez exagéré d'utiliser des divs supplémentaires pour juste une marge, mais malheureusement, CSS n'a pas de modèle `` margin-box '', ce qui résoudrait en fait un milliard de problèmes.
Cette quantité de code imbriqué pourrait vous faire penser "pourquoi ne pas utiliser d'autres techniques? car cela peut entraîner moins de code. Pour un souhait très précis, ce serait le cas. Cependant, d'autres techniques impliquent souvent un positionnement flottant ou absolu. Ces techniques ne peuvent pas faire la même chose: les flotteurs, par exemple, peuvent atteindre des colonnes de longueur égale, mais lorsque vous voulez une bordure ou une marge, vous vous trouverez en difficulté. Pour un positionnement absolu, cela ressemble plus à l'opposé: vous pouvez résoudre le problème de marge, mais la hauteur ne peut être basée que sur une colonne.
À mon avis, CSS n'a pas satisfait aux exigences. Bien qu'il soit question de remplacer les tableaux pour positiong, après toutes ces années, il n'est toujours pas possible d'obtenir les mêmes résultats. Atteindre les structures de table du "Saint Graal des Saint Graal" n'est pas seulement le moyen le plus simple, il y a aussi le seul moyen ... du moins, pour autant que je sache après avoir essayé des centaines de possibilités.
La question restante est: pourquoi utiliser des divs si vous les utilisez comme tables? Je ne me comprends pas bien, mais les gens semblent avoir leurs raisons.
Découvrez la réponse de thirtydot dans ce fil pour un CSS/HTML pur (mise en page fluide avec des "colonnes" également espacées sans JavaScript) ...
Largeur du fluide avec DIVs également espacés
http://jsfiddle.net/thirtydot/EDp8R/
La modification du JSFiddle démontre que les "colonnes" peuvent être faites pour avoir des largeurs fixes différentes et avoir toujours des marges égales et fluides.
Enfin, un autre exemple utilisant des pourcentages tout en conservant des marges égales et fluides.
Je me rends compte que ce n'est peut-être pas une solution exacte, mais cela vous rapproche assez, je pense.
J'utilise la grille de l'OOCSS pour cela
https://github.com/stubbornella/oocss
J'ai récemment mis une démo en ligne sur mon propre site car il n'y a pas d'exemples appropriés en ligne :(
http://www.leipeshit.com/awesome_stuff/oocss/core/grid/grids_all.html
Un moyen plus simple d'obtenir le même effet consiste à laisser le contenu à l'intérieur de vos colonnes créer vos gouttières plutôt que d'appliquer des marges/remplissage aux colonnes elles-mêmes. Cela peut être fait avec des grilles fixes, fluides, élastiques, etc.
Par exemple:
/* Gutters */
h1, h2, h3, h4, h5, h6,
p, ul, ol, blockquote,
hr, address, pre, object, fieldset
{
margin-right: .75rem;
margin-left: .75rem;
padding-right: .75rem;
padding-left: .75rem;
}
Cela simplifie également le dimensionnement de vos colonnes, l'imbrication et l'application d'arrière-plans à vos pièces lego.
J'ai récemment développé une solution alternative pour cela qui permet toute combinaison de colonnes flexibles dans une ligne avec une marge fixe et cohérente sur toutes les colonnes, quelle que soit la largeur de l'élément parent.
Cela n'utilise aucun JavaScript et fonctionne dans IE8 +.
Dans cette solution, la marge est définie sur deux classes - il est donc facile de la changer pour des conceptions réactives. Les largeurs de colonnes sont également représentatives de l'espace qu'elles utilisent, par exemple une ligne à 2 colonnes a des largeurs de 50% et une ligne à 4 colonnes a des largeurs de 25%.
Vous pouvez voir un exemple sur http://www.andrewjamestait.co.uk/conflexgrids/
Ou il est disponible sur GitHub à https://github.com/andrewjtait/conflexgrids
Pourquoi ne pas utiliser le rembourrage comme dans votre premier exemple et ensuite définir box-sizing: border-box sur tous les éléments?
Si vous pouvez vivre avec un autre div imbriqué par colonne, vous pouvez définir la marge souhaitée pour chacun. Pour vous débarrasser de la marge sur les bords extérieurs gauche et droit, vous pouvez définir une marge négative sur le récipient extérieur.
Par exemple: en utilisant pureCSS pure-g est le conteneur externe, pure-u- * est un nœud de colonne (display: inline-block) contenant le div imbriqué. l'espacement est le nom de cette extension personnalisée du système de grille pureCSS pour autoriser les marges de colonne.
.pure-g.spacing {
margin: 0 -10px;
}
.pure-g.spacing [class *= "pure-u"] > div {
margin: 10px;
}
Devrait fonctionner sur la plupart des navigateurs. Dites-moi si ce n'est pas le cas - je l'utilise déjà.
cordialement, Max