Salut,
Avant tout, merci pour la patience que vous voudrez bien accorder à mon problème (peut être résolvable rapidement par des pros du CSS)
J'essaie de coder une page HTML à la main (je n'ai pas trouvé de meilleur moyen pour pouvoir faire les choses précisément), et j'ai un léger problème de mise en page. En fait, ma page web va être à largeur fixe (775px) mais dans l'une des sections, je veux donner la possibilité à l'utilisateur de sélectionner des options, et le niombre d'options peut être très grand, ce qui fait que je veux pouvoir avoir un bloc qui dépasse sur la droite, et dont la largeur s'adapte automatiquement au contenu. J'utilise donc pour celà un bloc de type "float: left", et avec un fond en couleur. Ca marche très bien au global. Mais j'ai voulu mettre des coins arrondis à mon bloc. Celui ci étant de taille variable, j'ai créé 4 gifs pour mes quatre coins. Et je les positionne en absolu par rapport au bloc parent.
Le problème, c'est qu'avec IE6, j'ai un décalage de 1px sur la droite qui apparait de temps en temps, selon le nombre d'éléments dans mon menu, ce qui fait que le coin n'est pas bien aligné avec la bordure de l'élément sous jacent, alors que sous Mozilla, c'est toujours bien aligné. Et ce qui est fou, c'est que si je rajoute quelques éléments à ma liste ou en enlève quelques uns, le problème disparaît...
Voici le code source simplifié de ma page (vous pouvez faire un copier/coller pour l'exploiter, je n'utilise aucun élement extérieur). En guise de coin, j'ai mis des carrés rouge, histoire de ne pas avoirà utiliser d'image externe, pour bien vous montrer le problème... Essayez sous IE6, et vous verrez le mauvais alignement à droite. Avez Mozilla, pas de problème...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body { padding:0; margin:0; font: 80% arial, helvetica, sans-serif;}
#main { position: relative; margin: 0 auto; width: 775px;}
#sectionarea { position: relative; background-color: #aaa; border: 2px solid #06f; float: left; padding: 0 10px; }
#sectionarea #sectiontl { position: absolute; top: -2px; left: -2px; background-color: red; width: 9px; height: 9px; font-size: 0px;}
#sectionarea #sectiontr { position: absolute; top: -2px; right: -2px; background-color: red; width: 9px; height: 9px; font-size: 0px;}
#sectionarea #sectionbl { position: absolute; bottom: -2px; left: -2px; background-color: red; width: 9px; height: 9px; font-size: 0px;}
#sectionarea #sectionbr { position: absolute; bottom: -2px; right: -2px; background-color: red; width: 9px; height: 9px; font-size: 0px;}
.sectionpart { font-weight: bold; margin: 10px 0; position: relative; width: expression('1px'); }
.sectionpart .label { position: absolute; top: 2px; left: 0px; width: 200px; color: #333; }
.sectionpart table { border-collapse: collapse; margin-left: 100px; border: 1px; }
.sectionpart td { padding: 0; }
.sectionpart td a { display: block; padding: 0 2px; text-decoration: none; color: black; border: 2px solid #ccc; background-color: #ccc; }
</style>
</head>
<body>
<div id="main">
<div id="sectionarea">
<div class="sectionpart">
<div class="label">First Letter:</div>
<table>
<tr>
<td><a href="#">A</a></td>
<td><a href="#">B</a></td>
<td><a href="#">C</a></td>
<td><a href="#">D</a></td>
<td><a href="#">E</a></td>
<td><a href="#">F</a></td>
<td><a href="#">G</a></td>
<td><a href="#">H</a></td>
<td><a href="#">I</a></td>
<td><a href="#">J</a></td>
<td><a href="#">K</a></td>
<td><a href="#">L</a></td>
<td><a href="#">M</a></td>
<td><a href="#">N</a></td>
<td><a href="#">O</a></td>
<td><a href="#">P</a></td>
<td><a href="#">Q</a></td>
<td><a href="#">R</a></td>
<td><a href="#">S</a></td>
<td><a href="#">T</a></td>
<td><a href="#">U</a></td>
<td><a href="#">V</a></td>
<td><a href="#">W</a></td>
<td><a href="#">X</a></td>
<td><a href="#">Y</a></td>
<td><a href="#">Z</a></td>
</tr>
</table>
</div>
<div class="sectionpart">
<div class="label">Test:</div>
<table>
<tr>
<td><a href="#">A</a></td>
<td><a href="#">B</a></td>
<td><a href="#">C</a></td>
</tr>
</table>
</div>
<div id="sectiontl"></div>
<div id="sectiontr"></div>
<div id="sectionbl"></div>
<div id="sectionbr"></div>
</div>
</div>
</body>
</html> |
Seiez vous capables de me dire d'où vient le problème et/ou de trouver une alternative? J'ai essayé de mettre des divs à la place de ma table, mais j'ai alors beaucoup de mal avec le positionnement.
Merci beaucoup.
Message édité par Yoyo@ le 02-02-2006 à 17:00:03
