Bonjour à tous,
Je tenais d'abord à remercier toutes les personnes qui composent ce forum car vous m'êtes d'une grande aide pour régler les problèmes que j'ai pendant mon stage.
Voilà mon problème:
J'ai adapté un menu horizontale que j'ai trouvé sur le net pour le site que je suis en train de développer. Il est composé de 2 niveaux, le 2eme niveau apparait en dessous du 1er quand on passe la souris sur un des éléments du 1er niveau. Jusqu'à là aucun soucis, mon menu apparaît correctement sous FF, Chrome et Safari mais sous IE 6 et IE 7 le sous menu apparaît mais il est décalé sur la droite.
Pour voir mon menu en action suivez le petit lien (surtout ne prêtez pas attention au contenu qui est là juste pour remplir
).
le code HTML, avec un peu de php pour avoir la page active:
Et le css en rapport avec le menu:
J'aimerais ,donc, que le sous-menu apparaisse en dessous de son menu "parent" et non décalé sur la droite.
J'espère avoir été clair, en attendant une réponse,Bonne journée à tous et à toutes.
ReVaXx
Modifié par ReVaXx (03 May 2011 - 16:00)
Je tenais d'abord à remercier toutes les personnes qui composent ce forum car vous m'êtes d'une grande aide pour régler les problèmes que j'ai pendant mon stage.
Voilà mon problème:
J'ai adapté un menu horizontale que j'ai trouvé sur le net pour le site que je suis en train de développer. Il est composé de 2 niveaux, le 2eme niveau apparait en dessous du 1er quand on passe la souris sur un des éléments du 1er niveau. Jusqu'à là aucun soucis, mon menu apparaît correctement sous FF, Chrome et Safari mais sous IE 6 et IE 7 le sous menu apparaît mais il est décalé sur la droite.
Pour voir mon menu en action suivez le petit lien (surtout ne prêtez pas attention au contenu qui est là juste pour remplir
).le code HTML, avec un peu de php pour avoir la page active:
<div id="menu-top">
<div id="main-handle">
<ul id="main-nav">
<li><a class="main-link
<?php if (stristr($_SERVER['PHP_SELF'], 'index.php')==true) echo ' current';?>"
href="/stage_flo_pas_touche/www/vitrine/index.php">Accueil</a>
</li>
<li><a class="main-link
<?php if (stristr($_SERVER['PHP_SELF'], 'produit')==true) echo ' current';?> "
href="/stage_flo_pas_touche/www/vitrine/produits/nosproduits.php">Produits</a>
<ul class="sub-links"
<?php if (stristr($_SERVER['PHP_SELF'], 'produit')==true) echo 'id="current-nav"';?> >
<li><a
<?php if (stristr($_SERVER['PHP_SELF'], 'automate.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/produits/automate/automate.php" title="automate">Automate</a> </li>
<li><a
<?php if (stristr($_SERVER['PHP_SELF'], 'robot.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/produits/robot/robot.php" title="Robot">Robot</a> </li>
<li><a
<?php if (stristr($_SERVER['PHP_SELF'], 'hybride.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/produits/hybride/hybride.php" title="hybride">hybride</a> </li>
</ul>
</li>
<li><a class="main-link
<?php if (stristr($_SERVER['PHP_SELF'], 'formation')==true) echo ' current';?>" style="cursor: default;"
href="#">Formation</a>
<ul class="sub-links"
<?php if (stristr($_SERVER['PHP_SELF'], 'formation')==true) echo 'id="current-nav"';?>>
<li ><a
<?php if (stristr($_SERVER['PHP_SELF'], 'nosformation.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/formation/nosformation.php" title="formation">Formation</a> </li>
<li><a
<?php if (stristr($_SERVER['PHP_SELF'], 'liste-formation.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/formation/liste-formation.php" title="liste formations">liste formation</a> </li>
</ul>
</li>
<li><a class="main-link
<?php if (stristr($_SERVER['PHP_SELF'], 'societe')==true) echo ' current';?> " href="#" style="cursor: default;">Societe</a>
<ul class="sub-links" <?php if (stristr($_SERVER['PHP_SELF'], 'societe')==true) echo 'id="current-nav"';?> >
<li><a
<?php if (stristr($_SERVER['PHP_SELF'], 'legroupe.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/societe/legroupe.php" title="legroupe">Le Groupe</a> </li>
<li><a
<?php if (stristr($_SERVER['PHP_SELF'], 'sav.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/societe/sav.php" title="sav">Notre SAV</a> </li>
</ul>
</li>
<li><a class="main-link
<?php if (stristr($_SERVER['PHP_SELF'], 'galerie')==true) echo ' current';?> "
href="/stage_flo_pas_touche/www/vitrine/galerie/galerie.php">Galerie</a>
<ul class="sub-links" <?php if (stristr($_SERVER['PHP_SELF'], 'galerie')==true) echo 'id="current-nav"';?> >
<li><a
<?php if (stristr($_SERVER['PHP_SELF'], 'nosvideos.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/galerie/nosvideos.php" title="videos">Nos videos</a> </li>
<li><a
<?php if (stristr($_SERVER['PHP_SELF'], 'nosinstallations.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/galerie/nosinstallations.php" title="installtions">Nos installations</a> </li>
</ul>
</li>
<li><a class="main-link
<?php if (stristr($_SERVER['PHP_SELF'], 'contact')==true) echo ' current';?> "
href="/stage_flo_pas_touche/www/vitrine/contact/contact.php">Contact</a>
<ul class="sub-links" <?php if (stristr($_SERVER['PHP_SELF'], 'contact')==true) echo 'id="current-nav"';?> >
<li><a
<?php if (stristr($_SERVER['PHP_SELF'], 'qui.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/contact/qui.php" title="qui">Qui sommes-nous?</a> </li>
<li><a
<?php if (stristr($_SERVER['PHP_SELF'], 'ou.php')==true) echo 'class="current"';?>
href="/stage_flo_pas_touche/www/vitrine/contact/ou.php" title="ou">Ou sommes-nous?</a> </li>
</ul>
</li>
</ul>
</div>
<!-- End main-handle-->
</div>Et le css en rapport avec le menu:
/*correctif pour IE6, pour afficher les sous menus horizontalement*/
.ISIE67 #main-nav li{
display: inline;
float: none;
}
/*design du menu-top*/
#menu-top {
position: absolute;
top: 220px;
height: 65px;
width: 100%;
min-width: 800px;
max-width: 1900px;
background: black;
list-style: none;
}
#menu-top-center {
margin-top: 10px;
background: white;
width: 100%;
min-width: 800px;
max-width: 1900px;
height: 30px;
border-radius: 5px;
}
#main-handle {
background: white;
margin-top: 5px;
width: 100%;
}
#main-nav {
margin: 0 0 0 17%;
height: 30px;
padding-left: 0px;
}
#main-nav li {
display: block;
float: left;
width: auto;
min-width: 80px;
}
#main-nav li a {
padding: 6px 10px 5px 10px;
margin-right: 5px;
text-decoration: none;
font-family: Arial, sans-serif;
text-transform: uppercase;
font-weight: bold;
color: #064080;
/*centrage du texte des menus*/
position: relative;
top: 5px;
}
#main-nav li ul {
margin: 0;
padding: 0;
}
#main-nav li a:hover, #main-nav li a.active {
background: #dde9ec;
}
.main-link a {
font-size: 0.9em;
}
.sub-links {
display: none;
float: none;
position: absolute;
top: 35px;
width: auto;
min-width: 160px;
height: 30px;
padding: 2px 5px;
background: white;
}
.sub-links a {
font-size: 0.75em;
padding: 0;
}
.sub-links li {
padding: 0 5px;
margin: 0;
width: auto;
min-width: 80px;
}
#main-nav li .sub-links li a:hover{
background: #dde9ec;
font-style: italic;
}
.current {
background: #c8d0d7;
}
.hoover {
background:#dde9ec;
}
/*fin design menu top*/
J'aimerais ,donc, que le sous-menu apparaisse en dessous de son menu "parent" et non décalé sur la droite.
J'espère avoir été clair, en attendant une réponse,Bonne journée à tous et à toutes.
ReVaXx
Modifié par ReVaXx (03 May 2011 - 16:00)
