Bonjour à tous, 
Voilà, j'ai voulu faire un classeur pour mes cartes. Le nombre d'éditions étant important et pouvant les regrouper par 3, j'ai opté pour la solution du menu déroulant vertical.
Un petit tour dans les tutos d'Alsa et hop, intégration du menu sur la page.
Sous FireFox, pas de problème : tout se positionne comme je le veux
Par contre sous IE6, c'est la cata : il me décale de façon très importante tout le bloc et apparament dans la foulée le bloc du corps à sa droite ...
J'ai essayé de mettre tous les margin et le padding à 0 mais rien à faire, il persiste à créer un décalage
Et je ne vois vraiment pas pourquoi ... 
Je vous donne un lien vers la page web en ligne ainsi que vers le fichier CSS en ligne
Pour ceux qui veulent le code :
Pour le xHTML :
Pour le CSS :
Merci d'avance à tous ceux qui pourront m'aider !
Edit : le chargement de la page pourrait être un peu long, car les images du design ne sont pas encore compressées. Désolé ...
Edit 2 : en voulant couper des parties de la page pour la rendre plus légère sur le forum, je me suis rendu compte que j'avais supprimé dans la foulée le tag de fermeture de la balise "dl". La page est de nouveau valide^^
Modifié par Pandore (20 Feb 2006 - 23:27)
Voilà, j'ai voulu faire un classeur pour mes cartes. Le nombre d'éditions étant important et pouvant les regrouper par 3, j'ai opté pour la solution du menu déroulant vertical.
Un petit tour dans les tutos d'Alsa et hop, intégration du menu sur la page.
Sous FireFox, pas de problème : tout se positionne comme je le veux
Par contre sous IE6, c'est la cata : il me décale de façon très importante tout le bloc et apparament dans la foulée le bloc du corps à sa droite ...
J'ai essayé de mettre tous les margin et le padding à 0 mais rien à faire, il persiste à créer un décalage
Et je ne vois vraiment pas pourquoi ... Je vous donne un lien vers la page web en ligne ainsi que vers le fichier CSS en ligne
Pour ceux qui veulent le code :
Pour le xHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Cartes Magic recherchées</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="style general de la page" href="magic-mana-noir2.css" />
<script type="text/javascript" src="menu-deroulant.js"></script>
<script type="text/javascript" src="texte-defilant.js"></script>
</head>
<body>
<div id="global">
<div id="site">
<div id="header">
</div>
<div id="barre-defilante">
<form id="defiletexte" action="#">
<p>
<input type="text" id="defilbox" />
</p>
</form>
</div>
<div id="menu_gauche">
<!-- Début du menu déroulant -->
<dl id="menu">
<dt><a href="#">Accueil</a></dt>
<dt onmouseover="javascript:montre('smenu1');"><a href="#">Ravnica</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li>Ravnica</li>
<li>Le Pacte des Guildes</li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Kamigawa</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Champions de Kamigawa</a></li>
<li>Traitres de Kamigawa</li>
<li>Libérateurs de Kamigawa</li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Mirrodin</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Mirrodin</a></li>
<li><a href="#">Sombracier</a></li>
<li><a href="#">La 5ème Aube</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Carnage</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Carnage</a></li>
<li><a href="#">Fléau</a></li>
<li><a href="#">Légions</a></li>
</ul>
</dd>
</dl>
<!-- Fin du menu déroulant -->
</div>
<!-- Début du site -->
<div id="corps">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quam. Donec sed libero et mi auctor aliquam. Maecenas blandit purus quis tellus. Etiam ornare orci tincidunt tortor. Proin in velit sed dolor pharetra tempus. Etiam ut turpis. Etiam cursus imperdiet velit. Quisque quis velit sodales erat tincidunt fringilla. Quisque mollis. Vivamus lectus nisi, interdum ut, fringilla ut, hendrerit vitae, lacus. Nam pulvinar justo nec tortor. Maecenas vehicula magna in ante. Donec leo sem, rutrum in, posuere ac, rhoncus non, urna. Morbi porta turpis sed odio.
</p>
<p>
Ut eleifend. Aliquam congue felis non velit. Donec nulla libero, gravida et, iaculis eu, imperdiet sit amet, mi. Sed risus nisl, interdum porttitor, porttitor in, cursus non, dolor. Morbi commodo nisi in metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec dui est, varius at, pretium sed, sagittis et, nulla. Maecenas vitae nisl. Nulla ut ante. Pellentesque vel mi. Phasellus eget magna ut nisl laoreet adipiscing. Maecenas dui nibh, facilisis et, hendrerit eget, laoreet sit amet, ipsum. Morbi vitae nunc at est sodales luctus. Sed id eros.
</p>
<p>
Mauris lacus est, tristique eget, malesuada eu, gravida eget, erat. Aenean feugiat, turpis a ultrices rhoncus, sapien sem scelerisque elit, et elementum sem urna non metus. Quisque egestas, lacus a ullamcorper aliquam, nibh enim suscipit tellus, ut facilisis pede lorem sed enim. Mauris in leo sit amet lectus pulvinar faucibus. Aliquam semper justo eu erat. Integer urna lectus, posuere ut, porta quis, rutrum nec, nisl. Aenean nulla erat, consequat vitae, sodales nec, placerat varius, odio. Suspendisse eu arcu accumsan lorem euismod porta. Phasellus posuere mattis tellus. Fusce sollicitudin consectetuer metus. Nulla facilisi. Integer pretium tristique libero. Proin ut magna. Maecenas massa.
</p>
<p>
Quisque feugiat purus ut sapien. Donec auctor odio nec diam. Vivamus feugiat faucibus urna. Aenean magna. Phasellus velit tellus, feugiat quis, tristique vitae, convallis eu, tortor. Phasellus lobortis tempor est. Aliquam erat volutpat. Curabitur turpis. Cras a dolor. Vivamus nulla. Nam urna lectus, tempor semper, cursus a, rhoncus eu, metus. Phasellus sollicitudin nibh ut dui. Vestibulum blandit lectus. Pellentesque imperdiet odio quis erat. Pellentesque interdum ante eget elit. Nunc sodales aliquam elit. Duis aliquam nulla sed urna.
</p>
<p>
Cras malesuada bibendum sapien. Donec vulputate, leo quis cursus auctor, lectus elit posuere lorem, eget viverra sem felis eu justo. Nulla eget felis. Quisque vel diam. Maecenas metus lectus, egestas nec, pretium vitae, varius malesuada, magna. Vestibulum semper urna eget augue. Integer id sapien. Duis vehicula accumsan felis. Nullam venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eleifend cursus erat. Nullam consequat elit a nulla. Cras tincidunt semper justo. Curabitur pede libero, fringilla ut, congue id, placerat et, orci. Pellentesque mauris. Vestibulum interdum vestibulum augue. Aliquam erat volutpat. Aenean viverra. Phasellus placerat varius eros. Duis lobortis ligula.
</p>
</div>
<!-- Fin du site -->
<div id="footer">
<!-- Liens vers les validateurs du W3C -->
<div class="css_valid">
<a href="http://validator.w3.org/check?uri=referer"><img src="design-mana-noir/valid-xhtml10.png" alt="Logo valid xHTML 1.0 Strict" title="valid xHTML 1.0 Strict !" /></a>
</div>
<div class="css_valid">
<a href="http://jigsaw.w3.org/css-validator/"><img src="design-mana-noir/vcss.png" alt="Logo css valid" title="valid CSS !" /></a>
</div>
<!-- Copyrights -->
<div id="copyrights">
<p>
©2006 - tous droits réservés - Magic The Gathering, le logo Magic, les symboles du jeu sont des marques déposées de Wizards
of the Coast. Les illustrations présentent sur ces pages sont la propriété de Wizards of the Coast et de leurs créateurs.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Pour le CSS :
body {font-family:verdana, serif;font-size: 0.85em;text-align:center;margin:0;padding:0;background-image:url("img/papierkraft.jpg");background-repeat: repeat;}
#global {border-left:1px solid black;border-right:1px solid black;position:absolute;left: 50%;width: 780px;margin-left: -390px;background-image: url("design-mana-noir/fond-corps1.png");background-repeat: repeat-y;background-position:top;}
#site {width:780px;margin:auto;padding:0px;z-index: 1;}
#header {width:780px;height:200px;margin:auto;background-image: url("design-mana-noir/header.png");background-repeat: no-repeat;}
#barre-defilante {width:764px;height:33px;margin:auto;background-image: url("design-mana-noir/fond-barre-defilante.png");background-repeat: repeat-x;border:1px solid black;}
/* D�but du CSS de la barre de texte d�filant */
#barre-defilante #defiletexte {position:relative;display:block;width:764px;top:7px;left:0px;margin:0px;padding:0px;}
#barre-defilante #defiletexte p {margin:0px;padding:0px;width:764px;color:black;font-family:"Trebuchet ms", serif;font-size:0.8em;}
input {background-color:transparent;border:none;width:764px;}
/* Fin du CSS de la barre de texte d�filant */
#menu_gauche {float:left;width:140px;margin:0px;margin-top:20px;padding:0 0 0 8px;}
/* D�but du CSS du menu d�roulant */
dl, dt, dd, ul, li {margin: 0;padding: 0;list-style-type: none;}
#menu {position: relative;top: 0px;left: 5px;width: 140px;}
#menu dt {cursor: pointer;width:113px;background: #A9BFCB;height: 20px;line-height: 20px;margin: 2px 0;border: 1px solid gray;text-align: center;font-weight: bold;}
#menu dd {position: absolute;z-index: 100;left: 8em;margin-top: -1.4em;width:200px;background: #A9BFCB;border: 1px solid gray;}
#menu ul {padding: 2px;}
#menu li {text-align: center;color:red;font-size: 85%;height: 18px;line-height: 18px;}
#menu li a, #menu dt a {color: #000;text-decoration: none;display: block;}
#menu li a:hover {text-decoration: underline;}
/* Fin du CSS du menu d�roulant */
#corps {width:580px;margin-left:175px;margin-right:5px;margin-bottom:12px;text-align:left;}
#corps p {width:580px;margin:auto; padding:15px 0 0 0;text-align:justify;}
#footer {width:764px;height:60px;background-color:white;margin:auto;padding-top:10px;padding-bottom:10px;text-align:right;font-size:0.75em;font-family:verdana, serif;border:1px solid black;}
#copyrights {float:left;width:490px;margin:0px;padding:0px;color:black;font-family:"Trebuchet ms", serif;font-size:0.9em;}
#copyrights p {margin-bottom:0px;margin-top:7px;margin-left:15px;text-align:justify;}
.css_valid {float:left;margin-top:15px;margin-bottom:15px;margin-left:30px;border:0px;}Merci d'avance à tous ceux qui pourront m'aider !
Edit : le chargement de la page pourrait être un peu long, car les images du design ne sont pas encore compressées. Désolé ...
Edit 2 : en voulant couper des parties de la page pour la rendre plus légère sur le forum, je me suis rendu compte que j'avais supprimé dans la foulée le tag de fermeture de la balise "dl". La page est de nouveau valide^^
Modifié par Pandore (20 Feb 2006 - 23:27)