Bonjour,
J'ai un petit problème avec une page web.
Mon but est d'écrire une page web de largeur fixe (775px). Cependant, l'une des sections de ma page web doit pouvoir dépasser ces 775px, car lle contient un ensemble de liens clickables générés à la volée. Je souhaite entourer cette secion d'une bordure avec coins arrondis. La taille de cette section n'est bien entendu pas fixe, que ce soit en largeur ou en hauteur (il peut y avoir deux barres de liens)
J'ai donc créé 4 fichiers Gifs pour les quatre coins, que je positionne de manière absolue par rapport à la section.
Cependant, j'ai un problème d'alignement de mes coins de droite, lorsque je charge ma page avec IE, alors que sous Mozilla, l'alignement est parfait.
Voici le code simplifié de ma page. Dans celle ci, en guise de coin, j'ai mis des petits rectangles rouges, pour que vouis puissiez essayer facilement chez vous (copier/coller du code)
Le pire avec IE, c'est que selon le nombre d'éléments dans mon menu, l'alignement est parfois correct et parfois pas, c'est assez aléatoire. Pourriez vous m'aider?
Modifié par Yoyo@ (02 Feb 2006 - 22:55)
J'ai un petit problème avec une page web.
Mon but est d'écrire une page web de largeur fixe (775px). Cependant, l'une des sections de ma page web doit pouvoir dépasser ces 775px, car lle contient un ensemble de liens clickables générés à la volée. Je souhaite entourer cette secion d'une bordure avec coins arrondis. La taille de cette section n'est bien entendu pas fixe, que ce soit en largeur ou en hauteur (il peut y avoir deux barres de liens)
J'ai donc créé 4 fichiers Gifs pour les quatre coins, que je positionne de manière absolue par rapport à la section.
Cependant, j'ai un problème d'alignement de mes coins de droite, lorsque je charge ma page avec IE, alors que sous Mozilla, l'alignement est parfait.
Voici le code simplifié de ma page. Dans celle ci, en guise de coin, j'ai mis des petits rectangles rouges, pour que vouis puissiez essayer facilement chez vous (copier/coller du code)
Le pire avec IE, c'est que selon le nombre d'éléments dans mon menu, l'alignement est parfois correct et parfois pas, c'est assez aléatoire. Pourriez vous m'aider?
<!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>Modifié par Yoyo@ (02 Feb 2006 - 22:55)