Me revoici !
J'ai ENFIN réussi a reproduire l'erreur !
Je poste le code ci joint, désolée, c'est long, mais je ne touche plus a rien, car ne je ne suis pas sure de reproduire le bug autrement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>4 - toto.com</title>
<style type="text/css">
/* ---[ STRUCTURE ]--- */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
height: auto;
}
table, td, tr, th {
margin:0;
padding:0;
}
a:link {
text-decoration: none !important;
color: black !important;
}
a:visited {
text-decoration: none !important;
color: black !important;
}
a:hover {
text-decoration: underline !important;
}
div#container {
height: auto;
}
div#menu-haut {
background-color: #D7D7D7;
position: absolute;
width: auto;
height: 21px;
top: 35px;
right: 0px;
left: 209px;
font-size: 11px;
}
span.menu-haut img {
border: 0px;
position: relative;
top: 5px;
}
div#menu-haut a {
text-decoration: none;
color: Black;
}
span.menu-haut{
position:relative;
bottom: 5px;
margin-left: 4px;
margin-right:4px;
}
div#recherche {
background-color: #FF8A0D;
height: 26px;
position: relative;
top: 57px;
padding-left: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: White;
}
input.menu-recherche {
font-weight: bold;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
position: relative;
bottom: 3px;
}
input.menu-recherche-bouton {
position: relative;
top: 3px;
}
form {
margin: 0px;
}
div#zone-centrale {
position: absolute;
top: 108px;
bottom: 0px;
left: 0px;
}
div#menu-gauche {
background-color: #EEEEEE;
height: auto;
width: 157px;
border-top: solid 1px #6F6259;
border-right: solid 1px #6F6259;
position: absolute;
top: 0px;
bottom: 0px;
-moz-border-radius-topright: 6px;
}
div#menu-droite {
background-color: #EEEEEE;
height: auto;
width: 90px;
border-top: solid 1px #6F6259;
border-right: solid 1px #6F6259;
border-left: solid 1px #6F6259;
position: absolute;
top: 0px;
bottom: 0px;
left: 855px;
z-index: 10;
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
}
img#logo {
position: absolute;
top: 5px;
left: 5px;
}
ul#menu-gauche {
font-size: 11px;
list-style: none;
margin: 0px;
padding-left:0px;
}
li.menu-gauche-titre {
font-size: 12px;
font-weight: bold;
list-style: none;
padding-left: 0px;
margin: 0px;
color: #FF8A0D;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
border-top: solid 1px #6F6259;
border-bottom: solid 1px #6F6259;
}
li.menu-gauche-titretop {
font-size: 12px;
font-weight: bold;
list-style: none;
padding-left: 0px;
margin: 0px;
color: #FF8A0D;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
border-bottom: solid 1px #6F6259;
}
li.menu-gauche-service {
background-color: #CCCCCC;
border-bottom:solid 1px white;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 15px;
background-image: url(images/liste-fleche.png);
background-repeat: no-repeat;
background-position: 5px;
}
li.menu-gauche-service a {
color: black;
}
li.menu-gauche-service a:hover {
text-decoration: underline;
}
li.menu-gauche-entree a {
color: black;
}
li.menu-gauche-entree a:hover {
text-decoration: underline;
}
li.menu-gauche-entree {
border-bottom:solid 1px white;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 15px;
background-image: url(images/liste-fleche.png);
background-repeat: no-repeat;
background-position: 5px;
}
div#contenu {
width: 757px;
width: 810px;
/*width : 493px;*/
position: absolute;
left: 170px;
}
div#contenu-reduit {
width: 500px;
position: absolute;
left: 170px;
}
div#aujourdhui {
background-image: url(images/acceuil-rubrique-enfants.jpg);
background-position: top center;
background-repeat: no-repeat;
padding-top: 65px;
position: relative;
width: 100%;
/*top: 58px;
left: 0px; */
}
div#aujourdhui div.titre {
width: 100%;
border-bottom: solid 2px #FF8A0D;
background-image: url(images/fond-titre-enfants.png);
background-repeat: no-repeat;
padding-left: 6px;
padding-top: 1px;
height: 18px;
color: white;
font-weight: bold;
}
div#aujourdhui div.contenu {
padding-right: 33px;
padding-top: 5px;
}
div#aujourdhui div.contenu div.titre-article {
font-weight: bold;
color: #FF8A0D;
}
div#aujourdhui div.contenu div.auteur {
font-style: italic;
margin-bottom: 10px;
font-size: 11px;
}
div#aujourdhui div.contenu div.suite {
color: #646464 !important;
padding-top: 5px;
position: absolute;
margin-left: 200px;
}
div#aujourdhui div.contenu img {
float: left;
margin-right: 10px;
}
div#themes {
float: left;
margin-top: 30px;
}
div#themes div.titre {
width: 100%;
background-image: url(images/fond-titre-enfants.png);
background-repeat: no-repeat;
padding-left: 6px;
padding-top: 1px;
height: 18px;
color: white;
font-weight: bold;
}
div#themes div.contenu {
position: relative;
/* width: 750px;*/
width : 493px;
border: solid 2px #FF8A0D;
padding: 5px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}
div#contenu-libre {
float: left;
position: relative;
}
div#contenu-libre div.titre {
width: 100%;
background-image: url(images/fond-titre-enfants.png);
background-repeat: no-repeat;
padding-left: 6px;
padding-top: 1px;
height: 18px;
color: white;
font-weight: bold;
}
div#contenu-libre div.contenu {
position: relative;
width : 493px;
/*width: 750px;*/
border: solid 2px #FF8A0D;
padding: 5px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}
div#article {
float: left;
position: relative;
width : 493px;
}
div#article div.titre {
width: 100%;
background-image: url(images/fond-titre-enfants.png);
background-repeat: no-repeat;
padding-left: 6px;
padding-top: 1px;
height: 18px;
color: white;
font-weight: bold;
}
div#article div.auteur {
font-style: italic;
margin-bottom: 10px;
font-size: 11px;
}
div#article div.titre-article {
font-weight: bold;
color: #FF8A0D;
}
div#article div.contenu-article {
margin-top: 5px;
border-top: dotted 2px #FF8A0D;
padding-top: 5px;
}
div#article div.contenu {
position: relative;
/*width: 630px;*/
width : 493px;
border: solid 2px #FF8A0D;
padding: 1px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}
div#mais-aussi {
border: solid 2px #FF8A0D;
float: right;
/*width : 95px;*/
width: 300px;
-moz-border-radius: 8px;
margin-top: 18px;
font-size: 10px;
padding: 1px;
padding-left:0;
margin-left: 10px;
}
div#home-dossier {
float: left;
position: relative;
margin-right: 15px;
width: 415px;
}
div#home-dossier div.titre {
width: 100%;
background-image: url(images/fond-titre-dossier-aujourdh.png);
background-repeat: no-repeat;
padding-left: 6px;
padding-top: 1px;
height: 18px;
color: white;
font-weight: bold;
}
div#home-dossier div.contenu {
padding-top: 5px;
position: relative;
width: 415px;
font-size: 11px;
border-top: solid 2px #FFAD5B;
}
div#home-dossier div.contenu img {
float: left;
margin-right: 8px;
padding-top: 3px;
}
div#home-dossier div.contenu div.titre-article {
font-weight: bold;
color: #EA735D;
}
div#home-dossier div.contenu div.contenu-dossier {
/*font-size: 11px;*/
}
div#home-dossier div.contenu div.auteur {
font-style: italic;
margin-bottom: 10px;
font-size: 11px;
}
div#home-dossier div.contenu div.suite{
color: #646464 !important;
font-size: 11px;
text-align: right;
margin-top: 8px;
background-image: url(images/picto-suite.png);
background-repeat: no-repeat;
background-position: center right;
padding-right: 10px;
margin-right: 30px;
}
a.gris:link, a.gris:visited {
color: #646464 !important;
text-decoration: none;
}
div#home-dossier div.contenu a:hover {
text-decoration: underline;
}
div#home-actus {
float: left;
position: relative;
margin-left: 0px;
}
div#home-actus div.titre {
width: 100%;
background-image: url(images/fond-titre-actus.png);
background-repeat: no-repeat;
padding-left: 6px;
padding-top: 1px;
height: 18px;
color: white;
font-weight: bold;
}
div#home-actus div.contenu {
position: relative;
width: 221px;
border: solid 2px #D87FC5;
padding: 5px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}
div#home-actus div.contenu div.actu {
clear: both;
margin-bottom: 5px;
}
div#home-actus div.contenu div.actu img {
float: left;
margin-right: 5px;
padding-top: 3px;
}
div#home-actus div.contenu div.actu div.titre-actu {
color: #B42B97;
font-weight: bold;
margin-bottom: 2px;
}
div#home-actus div.contenu div.actu div.contenu-actu {
font-size: 11px;
}
div#home-actus div.contenu div.actu div.contenu-actu a {
color: black;
text-decoration:none;
}
div#home-actus div.contenu div.actu div.contenu-actu a:hover {
text-decoration:underline;
}
div#prochain-dossier {
margin-top: 10px;
border: solid 2px #FEAD5C;
width: 400px;
float: left;
position: relative;
margin-right: 15px;
-moz-border-radius: 8px;
padding: 5px;
}
div#prochain-dossier div.titre {
color: #EA735D;
font-weight: bold;
font-size: 11px;
background-image: url(images/picto-prochain-dossier.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 18px;
}
div#prochain-dossier div.contenu {
font-size: 11px;
}
img#elles-temoignent {
border: 0px;
margin-top: 8px;
position: relative;
}
div#incontournables {
width: 665px;
}
div#incontournables div.titre {
width: 100%;
background-image: url(images/fond-titre-incontournable.png);
background-repeat: no-repeat;
padding-left: 6px;
padding-top: 1px;
height: 18px;
color: white;
font-weight: bold;
}
div#incontournables div.contenu {
font-size: 11px;
border: solid 2px #FF8A0E;
padding: 10px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
}
div#incontournables div.contenu div.titre-article a {
font-size: 12px;
font-weight: bold;
color: #FF8A0E !important;
text-decoration: none;
}
div#incontournables div.contenu div.titre-article a:hover {
text-decoration: underline;
}
div#incontournables div.contenu td {
width: 50%;
vertical-align: top;
padding-left: 30px;
padding-right: 20px;
background-image: url(images/fond-incontournables.png);
background-repeat: no-repeat;
background-position: top left;
}
div#contenu td {
vertical-align: top;
}
div#footer {
font-size: 11px;
padding-top: 2px;
float: left;
width: 100%;
margin-top: 20px;
text-align: center;
background-color: #FFD259;
height: 18px;
border: solid 4px #FFD259;
-moz-border-radius: 8px;
color: #FF8A0D;
}
div#footer-index {
font-size: 11px;
padding-top: 2px;
float: left;
/*width: 657px;*/
margin-top: 20px;
text-align: center;
background-color: #FFD259;
height: 18px;
border: solid 4px #FFD259;
-moz-border-radius: 8px;
}
div#footer-index a:link {
color: black;
text-decoration: none;
}
div#footer-index a:hover {
text-decoration: underline;
}
div#footer-index a:visited {
color: black;
text-decoration: none;
}
input {
border: "1px solid #7f9db9";
}
/* DOSSIER PAYANT*/
/* ------------------------------------ *
CSS
mardi 26 décembre 2006 11:02:00
HAPedit 3.1.11.111
* ------------------------------------ */
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.80em;
font-weight: normal;
margin: 0px;
padding: 0px;
background:#ffffff;
background-position: top right;
background-repeat: repeat-y;
color:#000000;
}
.composition {
list-style: none ;
margin: 0 ;
padding: 0 ;
padding-left : 20px;
margin-left : 5px;
background-image: url(../../images/icone_document.png);
background-position: top left;
background-repeat: no-repeat;
}
.plus, .plus li {
list-style: none;
/*background-image: none;*/
height:3px;
margin:1px;
color:#e10f84;
font-weight:bold;
}
#aud_ac_fact {
border: 1px solid #e10f84;
}
input {
border: 1px solid Gray;
}
/*************/
#print{
text-align:center;
}
#print a{
text-decoration:none;
}
#print a:hover{
text-align:right;
text-decoration:underline;
}
#logo {
margin: 1em 60px 0 60px;
padding: 1em 0 0 0;
position: absolute;
left: 170px;
}
/* *************/
div#content
{
margin: 1em 60px 0 60px;
text-align:justify;
padding: 1em 0 0 0;
width: 757px;
position: absolute;
left: 170px;
background: #fff;
}
#titre{
margin: 1em 20px 0 60px;
}
.titre{
text-align: center;
background: #e10f84;
font-weight: bolder;
color:white;
font-size: 18px;
margin-top: 50px;
text-decoration: none;
}
#titre-doc{
text-align:center;
background:;
color:black;
font: 2.4em Helvetica, Sans-Serif;
margin-top:0px;
font-weight: bolder;
border-bottom:2px solid #e10f84;
}
div, span, p {
line-height: 1.5em;
vertical-align: top;
/* border: 1px solid black;*/
}
.contenu , .resume {
margin-bottom: 20px;
}
.contenu, .resume {
text-indent: 5px;
text-align:left;
}
img#& {
text-indent : 20px;
margin-left: 20px;
}
/* IDENTIQUE A PRINT */
body {
font-size: 0.90em;
}
#container{
margin:0;
padding: 0;
left :0;
height : auto;
padding-right:50px;
}
#zone-centrale {
left : 0;
padding : 0;
margin: 0;
}
div#container #zone-centrale {
margin: 0;
padding: 0;
right:10px;
top : 60px;
left: 0;
}
div#container #zone-centrale #content {
position:relative;
text-align:justify;
margin: 0;
margin-right: 25%;
margin-left:5%;
left:20px;
width:17cm;
width : 80%;
/*float: left; */
}
#content {
background-color: #ABABAB;
left:0;
}
#footer {
display: none;
}
p#print {
/*display: none;*/
}
#titre_dossier {
background-color: #cccccc;
font-weight: bold;
font-style: italic;
font-size: 18px;
}
#logo {
left : 0;
padding-left: 0;
margin-left:50px;
padding-top : 0;
}
.titre, .titre-article{
text-align: center;
background: #fff;
font-weight: bold;
width:99%;
color:#e10f84;
font-size: 16px;
margin-top: 0px;
margin-bottom: 5px;
text-decoration: none;
border-bottom: 1px solid #e10f84;
}
p {
padding-right : 10px;
}
.resume {
display: none;
}
/* Réglage pour impression */
@media print {
@page { size:21.0cm 29.7cm; margin:2cm 1cm 2cm 1cm; }
body {
font-size: 0.90em;
line-height : 1.2em;
}
#container{
float: none !important;
left :0;
height : auto;
padding-right:50px;
}
#zone-centrale {
float: none !important;
left : 0;
padding : 0;
margin: 0;
}
div#container #zone-centrale {
margin: 0;
padding: 0;
right:10px;
top : 60px;
left: 0;
float: none !important;
}
div#container #zone-centrale #content {
position:relative;
text-align:justify;
margin: 0;
left:0px;
width:17cm;
float: none !important;
}
#content {
float: none !important;
background-color: #ABABAB;
left:0;
}
#footer {
display: none;
}
p#print {
display: none;
}
#logo {
left : 0;
padding-left: 0px;
margin-left:0;
padding-top : 0;
}
.titre, .titre-article{
text-align: center;
background: #fff;
font-weight: bolder;
width:99%;
color:#e10f84;
font-size: 18px;
margin-top: 0px;
margin-bottom: 5px;
text-decoration: none;
border: 1px solid #e10f84;
}
p {
padding-right : 10px;
}
.resume {
display: none;
}
}
</style>
</head>
<body>
<div id="container">
<a href="http://www.toto.com/maquette_TEST/"><img src="http://www.toto.com/maquette_TEST/images/logo.png" height="41" width="211" alt="toto.com" border="0" id="logo" /></a>
<div id="zone-centrale">
<div id="content">
<p id="titre_dossier">4</p>
<p class="titre">
pompage_word
</p><p class="resume">
pompage_word
</p><p class="contenu">
<p class="MsoNormal">POMPAGE - Web design puisé à la source.<br />
<br />
* Accueil<br />
* Tous les articles<br />
* Ressources<br />
* À propos du site<br />
* Contact<br />
<br />
La vengeance des menus déroulants<br />
<br />
Par Patrick Griffiths et Dan Webb<br />
<br />
Notre premier article sur les menus déroulants «Suckerfish dropdowns», publié
sur A List Apart, a montré avec un certain succès qu'on pouvait mettre en œuvre
des menus déroulants sur une base de CSS : ils se sont révélés légers,
accessibles, et fonctionnaient dans Internet Explorer grâce à leur imitation de
la pseudo-classe :hover.<br />
<br />
Vous les avez aimés, les revoilà : ils sont plus accessibles, encore plus
légers (seulement 12 lignes de Javascript), bénéficient d'une compatibilité
accrue (ils fonctionnent sous Opera et Safari sans devoir utiliser le moindre
hack) et peuvent avoir plusieurs niveaux de profondeur.<br />
Menus déroulants à un niveau<br />
<br />
Bon, on ne va pas tergiverser. Le HTML auquel on a affaire va ressembler à ceci
:<o:p /></p>
<ul type="disc"><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Squaliformes</a><o:p /></li><ul type="circle"><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Echinorhinidés</a><o:p /></li><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Oxynotidés</a><o:p /></li><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Squalidés</a><o:p /></li></ul><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Orectolobiformes</a><o:p /></li><ul type="circle"><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Parascylliidés</a><o:p /></li><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Brachaeluridés</a><o:p /></li><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Orectolobidés</a><o:p /></li><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Stégostomatidés</a><o:p /></li><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Hémiscylliidés</a></li></ul></ul>
<p class="MsoNormal">Voilà
: une bonne vieille liste non numérotée, bien structurée.<br />
<br />
Pour démarrer, nous avons besoin d'un style de base :<br />
<br />
#nav, #nav ul {<br />
padding: 0;<br />
margin: 0;<br />
list-style: none;<br />
}<br />
<br />
#nav a {<br />
display: block;<br />
width: 10em;<br />
}<br />
<br />
#nav li {<br />
float: left;<br />
width: 10em;<br />
}<br />
<br />
Remarquez qu'il vaut mieux indiquer une largeur (width) dans le sélecteur #nav
li, sinon Opera va péter un câble. Rappelez-vous aussi que dès qu'on fait
flotter des éléments, le contenu situé en-dessous du menu déroulant doit être
dégagé (avec clear: left).<br />
<br />
Bien sûr, il faut cacher les listes que l'on veut voir se dérouler, mais pour
avoir une meilleure accessibilité on évitera d'utiliser display: none, qui
dissimule des éléments à certains lecteurs d'écran (comme on peut fréquemment
le constater dans les articles portant sur les remplacements d'images). Vous
pensez peut-être qu'il y a mille façons de régler ce problème, mais après avoir
expérimenté de façon exhaustive tout ce qui est width, height, margin, top ou
clip à travers un grand nombre de navigateurs, la meilleure solution (pour ce
qui est des listes à plusieurs niveaux, en tous cas) réside dans une
manipulation de la propriété left.<br />
<br />
Les spécifications CSS affirment que pour une boîte positionnée de façon
absolue, les valeurs top, right, bottom et left doivent créer un décalage par
rapport au bloc qui la contient. Malheureusement, Opera décide de décaler les
boîtes positionnées en absolu par rapport à la page, ce qui explique pourquoi
les premiers "Suckerfish Dropdowns" ne fonctionnaient pas sous Opera
: ils s'appuyaient sur les propriétés top et left avec des longueurs
explicites.<br />
<br />
Donc, à la place de display: none, on utilise left: -999em pour expédier la
liste déroulante hors de notre champ de vision, et ensuite left: auto (plutôt
que left: 0) pour la ramener en position :<br />
<br />
#nav li ul {<br />
position: absolute;<br />
width: 10em;<br />
left: -999em;<br />
}<br />
<br />
#nav li:hover ul {<br />
left: auto;<br />
}<br />
<br />
Le problème est entièrement réglé pour tous les navigateurs qui supportent la
pseudo-classe :hover, mais pour Internet Explorer il va falloir balancer le
Javascript "Suckerfish" :<br />
<br />
sfHover = function() {<br />
var sfEls =
document.getElementById("nav").getElementsByTagName("LI");<br />
for (var i=0; i<br />
<sfels.length;>sfEls[i].onmouseover=function() {<br />
this.className+=" sfhover";<br />
}<br />
sfEls[i].onmouseout=function() {<br />
this.className=this.className.replace(new RegExp(" sfhover\\b"),
"");<br />
}<br />
}<br />
}<br />
if (window.attachEvent) window.attachEvent("onload", sfHover);<br />
<br />
En gros, ce code va appliquer la classe "sfhover" aux items
("li") de la liste ("ul") nommée ("id")
"nav", lorsque ces items sont survolés par la souris. Cette classe
est ensuite retirée en utilisant une expression régulière lorsque la souris
quitte la zone.<br />
<br />
Donc, maintenant que les Suckerfish sont bourrés de nouvelles classes, l'étape
suivante consiste simplement à répéter le sélecteur :hover avec les sélecteurs
de classe "sfhover" :<br />
<br />
#nav li:hover ul, #nav li.sfhover ul {<br />
left: auto;<br />
}<br />
<br />
Et voilà. Vous avez un beau menu déroulant à un niveau.<br />
Menus déroulants à plusieurs niveaux<br />
<br />
L'arti<u>cle d'origine sur les "Suckerfish Dropdowns" ne
s'intéressait qu'aux menus déroulants à un niveau, mais en étendant un peu la
logique de cascade, il s'avère tout à fait possible de créer également des men</u>us
déroulants à plusieurs niveaux en CSS. Et, contrairement au code Javascript
"Suckerfish" d'origine, la fonction "sfhover" applique le
comportement à tous les items ("li") descendant de "nav",
pas seulement aux enfants directs : donc, les menus déroulants à plusieurs
niveaux sont désormais tout à fait utilisables, même avec Internet Explorer.<br />
<br />
Pour commencer, disons que nous avons affaire à une structure de liste avec
davantage de niveaux, comme celle-ci :<o:p /></sfels.length;></p>
<ul type="disc"><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Squaliformes</a><o:p /></li><ul type="circle"><li style="margin-bottom: 12pt;" class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Echinorhinidés</a></li><li style="margin-bottom: 12pt;" class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Echinorhinus
brucus</a></li></ul><li style="margin-bottom: 12pt;" class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Echinorhinus
cookei</a><o:p /></li><ul type="circle"><li style="color: rgb(0, 153, 153);" class="MsoNormal"><span style="color: windowtext;"><a href="http://www.toto.com/maquette_TEST/admincp/">Oxynotidés</a></span><o:p /></li><ul type="square"><li style="color: rgb(0, 153, 153);" class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Oxynotus
paradoxus</a><o:p /></li><li style="color: rgb(0, 153, 153);" class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Oxynotus
bruniensis</a><o:p /></li><li style="color: rgb(0, 153, 153);" class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Oxynotus
caribbaeu</a><o:p /></li><li style="color: rgb(0, 153, 153);" class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Oxynotus
centrina</a><o:p /></li><li class="MsoNormal"><span style="color: rgb(0, 153, 153);"><a href="http://www.toto.com/maquette_TEST/admincp/">Oxynotus
japonicus</a></span><o:p /></li></ul></ul><li class="MsoNormal"><a href="http://www.toto.com/maquette_TEST/admincp/">Orectolobiformes</a><o:p /></li></ul>
<ol type="1" start="1"><li class="MsoNormal">Nous allons devoir rajouter
quelques petites choses à la méthode originale. Tout d'abord, la liste de
troisième niveau (<o:p /></li><li class="MsoNormal">dans notre exemple
"Echinorhinus brucus", "Echinorhinus cookei", etc)
doit se dérouler sur le côté de l'item de liste qui lui correspon<o:p /></li><li class="MsoNormal">d (en l'occurence
"Echinorhinidés"), il faut donc rajouter cette règle qui
s'appliquera à tous les menus déroulants après le premier :<o:p /></li></ol>
<p style="margin-bottom: 12pt;" class="MsoNormal"><br />
#nav li ul ul {<br />
margin: -1em 0 0 10em;<br />
}<o:p /></p>
<ol type="1" start="1"><li class="MsoNormal">Comme on ne peut pas
préciser explicitement le point de départ supérieur de nos boîtes en
position absolue, elles se situeront sous la ligne de l'item de liste
survolé, ce qui explique pourquoi le niveau de listes <o:p /></li><li class="MsoNormal">suivant doit être placé à
-1em. Mais cela ne suffira pas à élever suffisamment les menus pour qu'ils
arrivent au niveau de l'item de liste correspondant, parce que les
hauteurs de ligne par défaut sont supérieures à 1em (souv<o:p /></li><li class="MsoNormal">ent 1.2em), on doit donc
rajouter un petit quelque chose à la règle initiale de l'élément ul :<o:p /></li></ol>
<p class="MsoNormal"><br />
#nav, #nav ul {<br />
padding: 0;<br />
margin: 0;<br />
list-style: none; <br />
line-height: 1;<br />
}<br />
<br />
À cause de l'effet de cascade qui veut que l'affichage de la liste de deuxième
niveau révèle également celle du troisième niveau, il faut aussi cacher
explicitement cette liste de troisième niveau (souvenez-vous que nous devons
répéter la pseudo-classe :hover avec la classe .sfhover) :<br />
<br />
#nav li:hove<b>r ul ul, #nav li.sfhover ul ul {<br />
left: -999em;</b><br />
}<br />
<br />
Bien sûr, on peut passer outre cette règle de façon à afficher lorsque l'item
de liste correspondant sera survolé, en étendant le principe d'affichage du
menu déroulant (qui donnait ceci, avec le menu à un seul niveau : #nav li:hover
ul, #nav li.sfhover ul { left: auto; }) :<br />
<u><br />
#nav li:hov</u>er ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li
li.sfhover ul {<br />
left: auto;<br />
}<br />
<br />
Et <i><u>avec ça nous obtenons un solide menu déroulant à deux niveaux.<br />
<br />
En suivant la même logique, vous pouvez fabriquer autant de niveaux de menus
que vous le voulez :<br />
<br />
Pour les menus déroulants à trois niveaux :<br />
</u></i><br />
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul {<br />
left: -999em;<br />
}<br />
<br />
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover
ul, #nav li li.sfhover ul, #nav <br />
<br />
li li li.sfhover ul {<br />
left: auto;<br />
}<br />
<br />
Et pour quatre niveaux, même si c'est peu probable...<br />
<br />
<span style="background: rgb(0, 153, 0) none repeat scroll 0%; color: rgb(204, 153, 0); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">#nav li:hover ul ul, #nav
li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover </span><span style="color: rgb(204, 153, 0);"><br />
<br />
<span style="background: rgb(0, 153, 0) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">ul ul ul, #nav li.sfhover ul ul ul ul {</span><br />
<span style="background: rgb(0, 153, 0) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">left: -999em;</span><br />
<span style="background: rgb(0, 153, 0) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">}</span><br />
</span><br />
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li
li:hover ul, #nav li.sfhover ul, <br />
<br />
#nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {<br />
left: auto;<br />
}<br />
Exemples<br />
À ce stade, vous avez peut-être déjà regardé les exemples très dépouillés à un,
à deux, et à trois niveaux, ce qui e<u><sup>st sans doute l'idéal pour observer
le code source de la manière la plus claire et basique possible; mais bien
entendu vous pouvez rendre tout ceci plus agréable à l'œil. Vous pouvez même en
faire un menu vertical au lieu d'un horizontal.<br />
Fiche technique</sup></u><br />
<br />
* Article original : Son of Suckerfish Dropdowns<br />
* Auteur : Patrick Griffiths et Dan Webb<br />
* Date de parution : 18 mai 2004<br />
* Traduction : Frédéric Chotard<br />
* Date de traduction : février 2005<br />
<br />
À propos de l<span style="color: rgb(204, 0, 51);">'auteur<br />
<br />
Patrick Griffiths es</span>t un artisan du web basé à Londres qui possède un
penchant pour la musique soul, l’évolution, et les promenad<span style="background: rgb(0, 255, 102) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">es de son site de compagnie, HTML Dog. Selon son
humeur, il peut préférer le surnom PTG.</span><br />
<br />
<span style="background: rgb(0, 255, 102) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Humble développeur web le jour, Dan Webb se
transforme la nuit venue en invincible DJ. On ne sait pas ce qui lui demande le
plus de pouvoirs, la mise en place de sites aux standards pour différentes
instances gouvernementales britanniqu</span>es, ou la mise à feu des boîtes de
nuit londoniennes.<br />
<br />
© 2001-2007 Pompage Magazine et les auteurs originaux - RSS - About this site</p>
</p>
<p> </p>
</div>
</div>
</div>
</body>
</html>
J'ai le
problème a la page 5, dernière ligne. La ce n'est pas énorme, mais parfois, ça coupe le texte en plein milieu, et c'est donc parfaitement illisible..
Si vous aviez des idées, parce que là.... je sèche complètement !
Merci par avance..[/i][/i]
Modifié par 3nityy (11 Oct 2007 - 16:21)
