28172 sujets

CSS et mise en forme, CSS3

Menu vertical css et javascript

Salut à vous,
J'ai vraiment besoin d'aide en ce moment... Je suis en train de faire un menu vertical avec un sous-menu qui s'ouvre sur le coté lorsque la souris est sur l'élément du menu.

Voilà mon problème, lorsque le sous-menu s'ouvre sur le coté, mon pied de page qui est sous le menu, ne descend pas. Il demeure où il est et le sous-menu embarque par dessus le pied de page. Je ne sais pas comment régler ce problème, ça fait 2 jours que je cherche!

Voici mes codes :

Ma page html...


<div id="entete">

    <img src="logo_entete.jpg" class="logo_entete" alt="Logo Mobilier de l'époque" />
    <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','225','height','174','title','anim_accueil','src','anim-accueil','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','anim-accueil' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="225" height="174" title="anim_accueil">
      <param name="movie" value="anim-accueil.swf" />
      <param name="quality" value="high" />
      <embed src="anim-accueil.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="225" height="174"></embed>
    </object></noscript>

</div>


<div id="corps_centre">


	<script type="text/javascript">
    
    //Nested Side Bar Menu (Mar 20th, 09)
    //By Dynamic Drive:  http://www.dynamicdrive.com/style/
 
    
    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[i]).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>

<div id="menu">
	
        <div class="sidebarmenu">
        <ul id="sidebarmenu1">
            <li><a href="index.html">Accueil</a></li>
            <li><a href="#">Historique</a></li>
            <li><a href="#">Produits</a>
                <ul>
                    <li><a href="#">Sobe (2000)</a></li>
                    <li><a href="#">Urbaine (5000)</a></li>
                    <li><a href="#">Vintage (6000)</a></li>
                    <li><a href="#">Aristocrate (7000)</a></li>
                    <li><a href="#">St-James (8000)</a></li>
                    <li><a href="#">Tendance (9000)</a></li>
                    <li><a href="#">Newport (10 000)</a></li>
                    <li><a href="#">New Set (12 000)</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
        </div>
</div>    
    
    <div id="texte_accueil">
	<h1>Le monde du meuble vous ouvre ses portes.</h1>
	<p>Venez découvrir ce que Mobilier de l'époque met à votre disposition par le biais de 		détaillants québécois, ontariens et même des Maritimes.</p>
	<p>Vous serez charmés par les collections de prestige que nous vous offrons.</p>
	</div>

</div>

<div id="pied_page">
<p>Carte du site &nbsp; / Contact <br />
&copy; Tout droit réservé Mobilier de l'époque 2009-2010</p>
</div>

</body>



Voici mon css...

body
{
	width:100%;
	background-color:#fff;
}

img
{
	display:block;
	margin:0;
}


/* Id pour la page d'intro surtout */


h1
{
	color:#b7b309;
	text-align:left;
	font-size:26px;
}

#choix_langue 
{
	float:left;
	margin:0;
	width:45%;
	height:95%;
	text-align:center;
	color:#b7b309;
	font-size:36px;
	background-color:#fff;
}

.logo
{
	text-align:center;
	width:100%;
}


.choix_langue a
{
	color:#b7b309;
	text-decoration:none;
}


#animation_photos 
{
	background-color:#fff;
	width:50%;
	height:95%;
	margin:0;
	padding:2px;
	padding-left:10px;
	float:right;
}

#pied_page 
{
	width:100%;
	text-align:center;
	font-size:10px;
	color:#b7b309;
	padding:20px 0 0 0;
	background-color:#fff;
	clear:both;

}

/* Id pour la page d'accueil surtout */

#entete
{
	width:98%;
	margin-bottom:25px;
	text-align:right;
}

#corps_centre
{
	width:100%;
}


#menu
{
	width:35%;
	float:left;
}


#texte_accueil
{
	width:50%;
	float:right;
	padding:15px;
}

.logo_entete
{
	float:left;
}


/*pour le menu*/

.sidebarmenu
{
width:40%;
}

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 20px "Times New Roman", Times, serif;
width: 160px; /* Main Menu Item widths */
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color:#b7b309;
text-decoration: none;
padding: 6px;

}

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

.sidebarmenu ul li a:visited{
color:#e9e542;
}

.sidebarmenu ul li a:hover{
background-color:#fff;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 200px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.jpg) no-repeat 70% 50%;
}

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



J'espère que vous avez tout pour pouvoir m'aider!

J'aimerais vraiment avoir un menu comme ça mais que ça fonctionne... Alors SVP! Aidez moi!!! Smiley sweatdrop [/i][/i]
Le sous-menu étant positionné en absolu, il n'y a absolument aucune chance qu'il repousse quelque autre bloc que ce soit (le pied de page ou quoi que ce soit d'autre). C'est justement une des caractéristiques principales du positionnement absolu.

Quant au fait que le sous-menu passe en dessous du pied de page... ça se règle à priori en utilisant correctement la propriété z-index. Une petite recherche sur le site devrait te donner une bonne idée de la manière dont il faut l'utiliser. Tu pourras en profiter, si tu penses avoir quelques lacunes sur le positionnement CSS, pour consulter le Guide de Survie du positionnement CSS, et les articles qui y sont indiqués comme pré-requis et références. Ça ne fait jamais de mal. Smiley smile
Salut,

Je n'ai malheureusement pas de page à vous montrer car il n'est pas encore en ligne! Ma boss est supposé faire l'achat de l'hébergement cette semaine! Smiley decu

J'ai parcouru les articles sur le positionnement et je m'y perds tellement!

J'ai mis mon sous-menu en position relative et maintenant, mon pied de page descend bel et bien.! Smiley smile

Parcontre, maintenant, c'est le sous-menu qui ne s'affiche pas égale à son élément dans le menu (je veux dire que le premier élément de la catégorie produit ne s'affiche pas en ligne avec le nom ''produit'' de mon menu... il est plus bas!)

Et aussi, dans explorer, j'ai un bog... je n'arrive pas à descendre la page correctement lorsque les sous-menu sont visible... on dirait que ça veut rien savoir même si la barre de défilement est là! Est-ce que c'est mon javascript qui fonctionne mal ou une incompatibilité ou encore un mauvais css?

Merci beaucoup de m'aider... c'est la première fois que je fais un menu avec sous-menu et je ne veux pas que ma boss m'enlève ce projet... je veux le réussir!


Je vous remet mon nouveau code css... le html n'a pas changé!


body
{
	width:100%;
	background-color:#fff;
}

img
{
	display:block;
	margin:0;
}


/* Id pour la page d'intro surtout */


h1
{
	color:#b7b309;
	text-align:left;
	font-size:26px;
}

#choix_langue 
{
	float:left;
	margin:0;
	width:45%;
	height:95%;
	text-align:center;
	color:#b7b309;
	font-size:36px;
	background-color:#fff;
}

.logo
{
	text-align:center;
	width:100%;
}


.choix_langue a
{
	color:#b7b309;
	text-decoration:none;
}


#animation_photos 
{
	background-color:#fff;
	width:50%;
	height:95%;
	margin:0;
	padding:2px;
	padding-left:10px;
	float:right;
}

#pied_page 
{
	width:98%;
	text-align:center;
	font-size:10px;
	color:#b7b309;
	padding:20px 0 0 0;
	background-color:#fff;
	clear:both;

}

/* Id pour la page d'accueil surtout */

#entete
{
	width:98%;
	margin-bottom:25px;
	text-align:right;
}

#corps_centre
{
	width:98%;
}


#menu
{
	width:35%;
	float:left;
}


#texte_accueil
{
	width:50%;
	float:right;
	padding:15px;
}

.logo_entete
{
	float:left;
}


/*pour le menu*/

.sidebarmenu
{
width:40%;
}

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 20px "Times New Roman", Times, serif;
width: 160px; /* Main Menu Item widths */
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color:#b7b309;
text-decoration: none;
padding: 6px;

}

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

.sidebarmenu ul li a:visited{
color:#e9e542;
}

.sidebarmenu ul li a:hover{
background-color:#fff;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position:relative;
width: 200px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.jpg) no-repeat 70% 50%;
}

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

Modifié par dassyka (24 Aug 2009 - 18:51)
Sujet clos
Aller à