mathmax a écrit :
En fait je veux me servir de ces divs pour faire une mise en page. Je voudrais que les cinq cadres çi -dessus soient collés et aient des bordures.
Hum... Acrobatique, avec des dégradations multiples à gérer selon les résolutions et les navigateurs, mais pourquoi pas ? (voir l'exemple ci-dessous, avec une façon différente de gérer la chose).
mathmax a écrit :
Pour corriger le bug des trois pixels, je pensais utiliser un hack ou un commentaire conditionnel et dedans définir une marge négative a droite (resp à gauche) pour #float1 (resp #float2) ou alors positionner en relatif les bloc #flux et les décaler de 3 pixels. Laquelle de ces 2 solutions est la meilleure? Y en a t-il une autre qui soit plus efficace?
Aucune des deux ne fonctionnera.
Une combinaison de marges et de positions relatives permettrait de ramener la largeur
apparente du conteneur (dans l'exemple ci-dessus) à 300 pixels. Mais sa largeur réel restant surdimensionnée à 303px, cela ne changerait pas grand-chose sur le fond :
<!--[if lte IE 6]>
<style type="text/css">
#wrapper {
width: 303px;
}
#flux1,#flux2,#float2 {
margin-left: -3px;
position: relative;
right: 3px;
}
</style>
<![endif]-->
Le gain est minime par rapport aux 306 pixels affichés par la solution précédente (3 ou 6 pixels de différence entre un navigateur et un autre sont tout aussi admissibles)
Mais surtout, c'est en évitant de dimensionner le conteneur et les éléments en flux, et en se plaçant dans le second cas de figure du three pixels jog que tu le gèreras au mieux. En effet :
mathmax a écrit :
A ce sujet, je ne suis pas sûr d'avoir bien compris le sens de cette phrase:
Dans un design "réel", il serait possible d'éviter de dimensionner les 3 éléments en flux et donc de leur conférer le layout (propriété spécifique IE) qui provoque l'apparition d'espaces de 3 pixels incompressibles entre eux et les 2 flottants
Le
three pixels jog est inévitable. Mais il se produit de deux manières différentes :
- si l'élément en flux a le
layout (état d'une boîte CSS spécifique à Internet Explorer Windows), les 3 pixels apparaissent à l'extérieur de l'élément, comme dans le code ci-dessus. Les éléments aquierent le layout de différentes manières, et notamment en les dimensionnant.
- si l'élément en flux n'a pas le layout (il n'est pas dimensionné), le three pixels jog se produit tout de même, mais à l'intérieur de l'élément. L'espace de 3 pixels apparaît dans chaque boîte de ligne des textes jouxtant le flottant. Il n'apparaît plus pour les boîtes de lignes situées plus bas que le flottant.
Ici, en ne dimensionnant plus les éléments en flux, on se place dans le second cas, qui est une dégradation plus facile à gérer.
Exemple (en utilisant les bordures, dans un conteneur centré par des marges, le tout en %) :
<style type="text/css">
<!--
#wrapper {
border: 1px solid red;
margin: 0 10%;
overflow: auto;
}
#float1,#float2 {
float: left;
width: 25%;
padding-top: 10px;
padding-bottom: 10px;
}
#float1 {
border-right: 1px solid red;
}
#float2 {
float: right;
border-left: 1px solid red;
}
#flux1,#flux2,#flux3 {
padding-top: 10px;
padding-bottom: 10px;
}
#flux1 {
border-bottom: 1px solid red;
margin-left: 25%;
}
#flux2 {
margin: 0 25%;
}
#flux3 {
border-top: 1px solid red;
border-right: 1px solid red;
margin-right: 25%;
clear:left;
}
p {
margin: 0 10px;
}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
#wrapper {
height: 1%;
overflow: visible;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="float1">
<p>#float1</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="flux1">
<p>#flux1</p>
<p>A doter d'une bordure gauche si nécessaire selon la largeur des contenus.</p>
</div>
<div id="float2">
<p>#float2</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="flux2">
<p>#flux2</p>
<p>A doter de bordures latérales si nécessaires selon la longueur des contenus.</p>
</div>
<div id="flux3">
<p>#flux3</p>
<p>Doté d'une bordure droite lorsque le contenu de #float2 n'est pas suffisant pour amener la bordure de celui-ci assez bas.</p>
</div>
</div>
Notes :
- l'
overflow:auto permet au conteneur de s'étendre à toute la hauteur de
#float2 dans les navigateurs conformes.
- La CSS conditionnelle règle ici un autre problème lié au
layout dans IE Windows, sur le calcul des largeurs et annule les effets indésirables de l'
overflow:auto dans ce navigateur.
- le jeu de padding des
div et des marges des
p évite l'interférence de paddings en pixels dans le calcul de largeur des
div
- il peut être nécessaire d'ajouter des bordures latérales supplémentaires sur l'un ou l'autre des 3
div en flux, selon la longueur du contenu. C'est le cas dans cet exemple pour la bordure droite de
#flux3. Mais la dégradation n'est pas très heureuse dans IE5.0 et IE5.5, ou selon les résolutions (voir éventuellement des correctifs en commentaires conditionnels...)
mathmax a écrit :
autre question: Si j'ai bien compris les commentaires conditionnels sont à utiliser de préférence par rapport aux hacks. Mais quels sont les avantages de ces derniers? Il y a bien une raison à leur existance.
En fait, les hacks procèdent de 3 raisons :
- il n'existe pas d'équivalent aux Commentaires conditionnels pour les autres navigateurs : certains préfèrent tout passer en hacks, tant qu'à faire (raison de moins en moins solide avec la conformité croissantes de Firefox, Opera et Safari).
- pour IE (le gros des hacks), certains considèrent plus "conforme" (?) de régler un problème CSS via CSS uniquement, sans avoir à ajouter quelque-chose dans le HTML. Ce qui n'est guère convainquant, les commentaires conditionnels étant parfaitement conformes ou tout ce qu'on voudra, et nettement plus fiables.
- il a fallu un certain temps pour que les commentaires conditionnels soient exhumés de la doc MSDN. On avait pris l'habitude des hacks CSS entre-temps. Disons que si Tantek Celik avait prôné les commentaires conditionnels au lieu de son hack historique, d'autres habitudes auraient sûrement été prises...
Modifié par Laurent Denis (07 Sep 2005 - 08:39)
Alors là vraiment merci! C'est exactement ce que je voulais faire. Je n'avais pas pensé au float:right. Tu m'apprends en plus l'existance des commentaires conditionnels. Ca à l'air super pour corriger les bugs d'Internet Explorer! 
Une question: peut-on mettre ces commentaires ailleurs que dans <head> (dans la feuille CSS par exemple)?
