28172 sujets

CSS et mise en forme, CSS3

Bonsoir,
Après maintes recherches sur le net (et votre site), je n'ai pas trouvé de solution à mon pbm d'affichage de mon menu.
C'est 1 menu à 2 niveaux dont le 2ème niveau est caché et ne s'affiche que lors le curseur passe sur le 1er niveau. ca fonctionne mal (sous IE et FF).
Je pense que c'est la propriété Visibility qui pose pbm.
Il y 3 fichiers : 1 html, 1 css, et 1 JS (pour IE !)
Si qqun pouvait jeter un oeil et me dire ce qui fait défaut, je précise que je suis débutante et que je me suis farçie 36 sites, forums, tutos etc depuis plusieurs semaines, en vain. J'ai bien mérité un peu d'aide non Smiley cligne ?
je joins les 3 fichiers en question.
Merci à l'âme charitable qui pourra me dépanner (je craque) Smiley biggrin
Titus2

HTML :
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Accueil</a></li>
<li><a href="#">Actualités</a></li>
<li><a href="#">Qui sommes-nous ?</a></li>
<li><a href="#">Nos lieux d'accueil</a>
<ul><li><a href="#">La Chaume</a></li>
<li><a href="#">Oaza</a></li></ul></li>

<li><a href="#">Vidéos & bulletins</a></li>

<li><a href="#">Nos actions</a>
<ul><li><a href="#">Sauvetages</a></li>
<li><a href="#">Campagnes de stérilisations</a></li></ul></li>

<li><a href="#">Adoptions</a>
<ul><li><a href="#">Photos des candidats</a></li>
<li><a href="#">Formalités d'adoption</a></li></ul></li>

<li><a href="#">Comment nous aider ?</a></li>
<li><a href="#">Liens & partenaires</a></li>
<li><a href="#">Nous contacter</a></li></ul></div>

CSS :

.sidebarmenu ul{
margin: 216px 25px;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 190px; /* Main Menu Item width */
border-bottom: 1px solid #ccc;

}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
color: white;
text-decoration:none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #CCCCCC; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: rosybrown;

}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
float:right;
top: -216px;
width: 170px; /*Sub Menu Items width */
visibility:collapse;
}

.sidebarmenu a.subfolderstyle{
background: url(Flechedroite.gif) no-repeat 97% 50%;
}


/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 29px; }
* html .sidebarmenu ul li a { height: 25%; }
/* End */

Javascript (inséré dans le html entre les balises head) :
<script type="text/javascript">
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script>

[/i]
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif

Quand à ton problème, je pense que tu n'as pas eu de réponse du fait que tu n'as pas donné une page en ligne qui aide généralement bien plus que le code complet, car nous n'avons pas la faculté des navigateurs d'assembler tout ça ensemble pour voir ce que ça donne. Smiley cligne