|
|
Line 109: |
Line 109: |
| | | |
| } | | } |
- | | + | /* ---------------------- Dolphin nav ---------------------- */ |
- | #menulisttop, #menulisttop ul /* Liste */
| + | #dolphincontainer{ |
- | { | + | position:relative; |
- | | + | height:56px; |
- | padding : 0; /* pas de marge intérieure */
| + | color:#000000; |
- | margin : 0; /* ni extérieure */
| + | background:#006c05; |
- | list-style : none; /* on supprime le style par défaut de la liste */
| + | width:100%; |
- | line-height : 21px; /* on définit une hauteur pour chaque élément */
| + | font-family:Helvetica,Arial,Verdana,sans-serif; |
- | text-align : center; /* on centre le texte qui se trouve dans la liste */
| + | |
- | | + | |
| } | | } |
- | | + | #dolphinnav{ |
- | #menulisttop /* Ensemble du menu */ | + | position:relative; |
- | { | + | height:33px; |
- | font-weight : bold; /* on met le texte en gras */
| + | font-size:12px; |
- | font-family : sansf;
| + | text-transform:uppercase; |
- | font-size : 12px; /* hauteur du texte : 12 pixels */
| + | font-weight:bold; |
| + | background:#fff url(images/dolphin_bg.png) repeat-x bottom left; |
| + | padding:0 0 0 20px; |
| } | | } |
- | | + | |
- | #menulisttop a /* Contenu des listes */ | + | #dolphinnav ul{ |
- | { | + | margin:0; |
- | display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
| + | padding:0; |
- | padding : 0; /* aucune marge intérieure */
| + | list-style-type:none; |
- | background : #000; /* couleur de fond */
| + | width:auto; |
- | color : #fff; /* couleur du texte */
| + | float:left; |
- | text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
| + | |
- | width : 130px; /* largeur */
| + | |
| } | | } |
- | | + | #dolphinnav ul li{ |
- | #menulisttop li /* Elements des listes */ | + | display:block; |
- | { | + | float:left; |
- | float : left;
| + | margin:0 1px; |
- | /* pour IE qui ne reconnaît pas "transparent" */
| + | |
- | border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
| + | |
| } | | } |
- | | + | #dolphinnav ul li a{ |
- | /* IE ne reconnaissant pas le sélecteur ">" */
| + | display:block; |
- | html>body #menulisttop li
| + | float:left; |
- | { | + | color:#eaf8ea; |
- | border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
| + | text-decoration:none; |
| + | padding:0 0 0 20px; |
| + | height:33px; |
| } | | } |
- | | + | #dolphinnav ul li a span{ |
- | #menulisttop li ul /* Sous-listes */ | + | padding:12px 20px 0 0; |
- | { | + | height:21px; |
- | position: absolute; /* Position absolue */
| + | float:left; |
- | /*width: 120px; /* Largeur des sous-listes */
| + | |
- | height: 42px;
| + | |
- |
| + | |
- |
| + | |
- | left: -999em; /* Hop, on envoie loin du champ de vision */
| + | |
| } | | } |
- | | + | /*#dolphinnav ul li a:hover{ |
- | | + | color:#fff; |
- | #menulisttop li ul li /* Éléments de sous-listes */ | + | background:transparent url(images/dolphin_bg-OVER.png) repeat-x bottom left; |
- | { | + | |
- | /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
| + | |
- | border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
| + | |
- |
| + | |
| } | | } |
- | | + | #dolphinnav ul li a:hover span{ |
- | /* IE ne reconnaissant pas le sélecteur ">" */
| + | display:block; |
- | html>body #menulisttop li ul li
| + | width:auto; |
- | { | + | cursor:pointer; |
- | border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
| + | }*/ |
| + | #dolphinnav ul li.sfhover a{ |
| + | color:#fff; |
| + | background:#27931d url(images/dolphin_left-ON.png) no-repeat top left; |
| + | line-height:275%; |
| } | | } |
- | | + | #dolphinnav ul li.sfhover a span{ |
- | #menulisttop li ul ul | + | display:block; |
- | { | + | padding:0 20px 0 0; |
- | margin : -22px 0 0 120px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
| + | width:auto; |
- | /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
| + | background:#27931d url(images/dolphin_right-ON.png) no-repeat top right; |
- | border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
| + | height:33px; |
- | }
| + | |
- | | + | |
- | /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
| + | |
- | html>body #menulisttop li ul ul
| + | |
- | {
| + | |
- | border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
| + | |
- | }
| + | |
- | | + | |
- | #menulisttop a:hover /* Lorsque la souris passe sur un des liens */
| + | |
- | {
| + | |
- | color: #000; /* On passe le texte en noir... */
| + | |
- | background: #fff; /* ... et au contraire, le fond en blanc */
| + | |
- | }
| + | |
- | | + | |
- | #menulisttop li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
| + | |
- | {
| + | |
- | left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
| + | |
| } | | } |
| | | |
- | #menulisttop li.sfhover ul, #menulisttop li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */ | + | #dolphinnav ul li.sfhover ul |
| { | | { |
| left: 0; /* Repositionnement normal */ | | left: 0; /* Repositionnement normal */ |
Line 206: |
Line 182: |
| overflow:hidden; | | overflow:hidden; |
| } | | } |
| + | /* ---------------------- END Dolphin nav ---------------------- */ |
| | | |
| .clearboth { | | .clearboth { |