Rechercher : dans
Par :

Probleme css avec ce menu ?

nonogemeaux, le 24 jun 2009 à 15:20:29 
 Signaler ce message aux modérateurs

Bonjour,

j'ai un souci avec mon menu que je ne vois plus s'afficher sur mes pages alors que l'include php
semble correcte. Je pense qu'il y a des erreurs dans mon css ou peut-être
éventuellement dans le script java lié au menu

Pouvez-vous m'aide à les corriger s'il vous plait, un grand merci par avance:


/* MENU DE GAUCHE PARTIE CSS*/
#menu
{
float: left;
width: 15.5%;
height:500px;
white-space: nowrap;
background-image:url("");
background-repeat: no-repeat;
border: 3px solid white;
}


#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin-left: 0;
margin-bottom: 0;
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}


#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #000000; /* couleur de fond */
color : #ffffff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 190px; /* largeur */
}

#menu p
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #000000; /* couleur de fond */
color : #ffffff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 190px; /* largeur */
}


/* Inversement des couleurs lorsque la souris passe */

#menu a:hover
{
color : #000000; /* Noir */
background : #ffffff; /* Blanc*/
}

#menu li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #ffffff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 190px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
margin-left: 190px;
margin-top: -38px;
}


#menu li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #ffffff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul
{
margin : -38px 0 0 190px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #ffffff; /* Petite bordure à gauche pour ne pas coller ... */
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu li:hover ul ul, #menu 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 */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu 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 */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}

/* MENU DE GAUCHE PARTIE XHTML*/


<!-- Les menus -->
<ul>

<li>
<p>Biographie
<ul>
<li><a href="biographiecourte.php">courte</a></li>
<li><a href="biographiedetaillee.php">détaillée</a></li>
</ul>
</p>
</li>

<li>
<p>Musique-ecouter
<ul>
<li><a href="leson...php">Le son de la vie</a></li>
<li><a href="leson.php">Le son du silence</a></li>
</ul>
</p>
</li>

<li>
<p>Poesie-lire

<ul>
<li><a href="presentationpoesie.php">Présentation</a></li>
<li><a href="poemespublies.php">Poèmes publiés</a></li>
<li><a href="poemesinedits.php">Poèmes inédits</a></li>
</ul>
</p>
</li>

<li>
<p>Acheter

<ul>
<li><a href="acheter.php">CD "Le son du silence"</a></li>
<li><a href="acheterlolo.php">Recueil "Lolo tôtelle"</a></li>
</ul>
</p>
</li>


<li>
<p>Titre rubrique?
<ul>
<li><a href="la-piece-pour-piano-de-vos-reves.php">La piece <br/>de vos rêves</a></li>
<li><a href="../galerie-photos/Galerie-photos/album/index.html">Galerie-photos</a></li>
</ul>
</p>
</li>
</ul>


/* SCRIPT MENU DE GAUCHE*/

<script type="text/javascript">
<!--
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
// -->
</script>

Configuration: Windows Vista
Firefox 3.0.11

Meilleures réponses pour « probleme css avec ce menu ? » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...