Tout d'abord bonjour a tous,
Je me tourne vers vous car j'ai voulu faire un menu dynamique qui affiche les sous-menu en passant la souris sur le menu, le tout en css.
Globalement, cela fonctionne plutôt bien. Mais deux problèmes surviennent ...
1. Lorsque mon sous-menu s'affiche, il passe derrière le corps, alors que je voudrais qu'il soit au premier plan.
2. Mon corps a décider de se placer en dessous du menu, alors que je voudrais qu'il soit a sa droite ! J'ai l'impression que le menu prend toute la largeur de la page ... (Ce problème existe depuis que j'ai changer la position des blocks afin que le pied de page passe bien en dessous du menu, et pas juste en dessous du corps)
Si quelqu'un aurait la gentillesse de m'aider
Voici mon code HTML :
Et mon CSS :
Je me tourne vers vous car j'ai voulu faire un menu dynamique qui affiche les sous-menu en passant la souris sur le menu, le tout en css.
Globalement, cela fonctionne plutôt bien. Mais deux problèmes surviennent ...
1. Lorsque mon sous-menu s'affiche, il passe derrière le corps, alors que je voudrais qu'il soit au premier plan.
2. Mon corps a décider de se placer en dessous du menu, alors que je voudrais qu'il soit a sa droite ! J'ai l'impression que le menu prend toute la largeur de la page ... (Ce problème existe depuis que j'ai changer la position des blocks afin que le pied de page passe bien en dessous du menu, et pas juste en dessous du corps)
Si quelqu'un aurait la gentillesse de m'aider
Voici mon code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../css/design.css" />
<title>PM-IU-F</title>
</head>
<body>
<div style="top: 17px; left: 227px;" class="titreentete">
<ul>
<a href="../index.html" title="Aller à la page d'accueil">Accueil</a>
<a href="../contact-F.html" title="Contactez-nous">Contact</a>
<a href="../sitemap-F.html" title="Sitemap">Sitemap</a>
</ul>
</div>
<div class="entete">
<div class="barrehaut"></div>
<div class="enteteimg"><img style="width: 1200px; height: 121px;" src="img/bleuciel.jpg" /></div>
<div class="enteteimg2"><img style="width: 250px; height: 100px;" src="img/logo.jpg" /></div>
<div class="header-breadcrumbs"></div>
</div>
<div id="menu">
<h1 class="title2">Nos produits</h1>
<ul class="menu">
<li>
<span><a href="../exploration-fran%E7ais/exploration-tout.html">Exploration</a></span>
<span class="content">
<ul class="menu">
<li><a href="../exploration-fran%E7ais/hysterometre-F.html">Hystéromètre</a></li>
<li><a href="../exploration-fran%E7ais/PM-Hystero-F.html">PM Hystéro</a></li>
<li><a href="../exploration-fran%E7ais/speculum-F.html">Speculum Vaginal</a></li>
</ul>
</span>
</li>
</ul>
<ul class="menu">
<li>
<span><a href="../prelevement-fran%E7ais/prelevement-tout.html">Prélèvement</a></span>
<span class="content">
<ul class="menu">
<li><a href="../prelevement-fran%E7ais/Endobiops-F.html">Endobiops</a></li>
<li><a href="../prelevement-fran%E7ais/Prelevinjec-F.html">Prelevinjec</a></li>
<li><a href="../prelevement-fran%E7ais/PM-Brush-F.html">PM BRUSH</a></li>
</ul>
</span>
</li>
</ul>
<ul class="menu">
<li>
<span><a href="../fiv-fran%E7ais/FIV-tous.html">FIV</a></span>
<span class="content">
<ul class="menu">
<li><a href="../fiv-fran%E7ais/PM-FIV-IU-F.html">PM FIV</a></li>
<li><a href="../fiv-fran%E7ais/PM-IU-F.html">PM IU</a></li>
<li><a href="../fiv-fran%E7ais/PM-TRANS-SET-F.html">PM TRANS SET</a><li>
</ul>
</span>
</li>
</ul>
<ul class="menu">
<li>
<span><a href="../ponction-ovocytes-fran%E7ais/ponction-tout.html">Ponction d'Ovocytes</a></span>
<span class="content">
<ul class="menu">
<li><a href="../ponction-ovocytes-fran%E7ais/aiguille-ponction.html">Aiguille de Ponction</a></li>
<li><a href="../ponction-ovocytes-fran%E7ais/Set-ponction.html">Set de ponction</a></li>
</ul>
</span>
</li>
</ul>
<ul class="menu">
<li>
<span><a href="../set-pose-sterilet-fran%E7ais/set-pose-sterilet.html">Set de Pose de Stérilet</a></span>
</li>
</ul>
<ul class="menu">
<li>
<span><a href="../pince-usage-unique-fran%E7ais/pinces-usage-unique.html">Pinces à Usage Unique</a></span>
</li>
</ul>
<ul class="menu">
<li>
<span><a href="../pince-metal-reutilisable-fran%E7ais/pinces-reutilisables.html">Pinces Réutilisables</a></span>
</li>
</ul>
<ul class="menu">
<li>
<span><a href="../pince-biopsie-fran%E7ais/pinces-biopsie.html">Pinces à Biopsie</a></span>
</li>
</ul>
<ul class="menu">
<li>
<span><a href="desinfectants-tous.html">Désinfectants ANIOS</a></span>
<span class="content">
<ul class="menu">
<li><a href="surfanios-citron.html">Surfanios Citron</a></li>
<li><a href="surfanios-premiuim.html">Surfanios Premium</a></li>
<li><a href="Aniosurf-premiuim.html">Aniosurf Premium</a><li>
<li><a href="surfasafe.html">Surfasafe</a></li>
<li><a href="anyosyme-dd1.html">Aniosyme DD1</a></li>
<li><a href="septanios-MD.html">Septanios MD</a></li>
<li><a href="steranios.html">Steranios 2%</a></li>
<li><a href="septanios-MD.html">Septanios MD</a></li>
<li><a href="steranios.html">Steranios 2%</a></li>
<li><a href="aniosafe-manuclear-hf.html">Aniosafe Manuclear</a></li>
<li><a href="anios-gel-85NPC.html">Anios Gel</a></li>
<li><a href="lingettes-wipanios.html">Lingettes Wip'Anios</a></li>
<li><a href="bac-2l-5l.html">Bacs Wip'Anios</a></li>
</ul>
</span>
</li>
</ul>
<ul class="menu">
<li>
<span><a href="../gants-fran%E7ais/gants-tout.html">Gants d'examen</a></span>
<span class="content">
<ul class="menu">
<li><a href="../gants-fran%E7ais/Gants-latex-non-poudrees-F.html">Gants Latex Non Poudrés</a></li>
<li><a href="../gants-fran%E7ais/Gants-nitrile-non-poudrees-F.html">Gants Nitrile Non Poudrés</a></li>
</ul>
</span>
</li>
</ul>
</div>
<div class="main"><!-- Pagetitle -->
<h1 class="title1">Exploration</h1>
<div class="barrebas"></div>
<br />
<!-- Content unit - One column -->
<h2 class="title3"><strong>Hysteromètre</strong></h2>
<p><img alt="Endobiops" title="Endobiops" src="../../photos-gyn%E9co1/CF061643.jpg" /></p>
<br />
<h2 class="title3"><strong>PM Hystéro</strong></h2>
<p><img alt="Endobiops" title="Endobiops" src="../../photos-gyn%E9co1/CF061643.jpg" /></p>
<br />
<h2 class="title3"><strong>Speculum Vaginal</strong></h2>
<p><img title="Endobiops" src="../../photos-gyn%E9co1/CF061643.jpg" /></p>
<br />
<br />
</div>
<div class="footer"><p><strong><strong>Copyright © 2009 | Tous droits réservés |<br /> PM FIV IU-gynécologie</strong></strong></p>
</div>
</body>
</html>
Et mon CSS :
body{
margin : auto;
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
}
.main
{
float : left;
margin-left: 320px;; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
height: 790px;
width : 896px;
position : relative;
}
.barrehaut{
height: 40px;
padding:1.0em 0 1.5em 0;
background:rgb(204, 204, 204);
width : 1200px;
margin-left : 20px;
}
.header-breadcrumbs {
padding:1.0em 0 1.5em 0;
background:rgb(100,100,100);
width : 1200px;
margin-left : 20px;
}
.barrebas{
width:100%;
height: 10px;
background:rgb(204, 204, 204);
}
.entete{
float : top;
padding-top : 10px;
position : relative;
}
.enteteimg{
margin-left : 20px;
margin-bottom : 5px;
}
.enteteimg2{
position :absolute;
margin-top : -180px;
margin-left : 8%;
}
.titreentete{
width:350px;
position:absolute;
z-index:3;
margin-top : 10px;
margin-left : 600px;
}
.titreentete a{
padding-right : 10px;
}
.titreentete ul{
float:right;
padding:0 15px 0 0;
font-weight:bold;
}
.titreentete li{
display:inline;
list-style:none;
}
.titreentete li a{
display:block;
float:left;
padding:2px 5px 2px 5px;
color:rgb(125,125,125) ;
text-decoration:none;
font-size:120%;
}
.titreentete a:hover{
text-decoration:none;
color:rgb(50,50,50);
}
/* Nouveau menu /*
#menu
{
font-size: 20px;
background-color : #FFFFFF;
/*position :absolute;*/
width: 230px;
height: 790px;
margin-bottom: 10px;
margin-left : 20px;
margin-top : 40px;
}
ul.menu li span {
margin: 0px 3px 3px 0px;
color: #ffffff;
background-color : #FFFFFF;
/*border: 1px solid #FFFFFF;*/
display: inline-block;
width : 205px;
}
ul.menu li span.content {
display: none;
position: absolute;
width : 240px;
}
ul.menu li span.content ul li{
padding-bottom : 5px;
padding-top : 5px;
border-bottom: 2px solid #FFFFFF;
}
ul.menu li:hover > span
{
background-color :rgb(204, 204, 204);
}
ul.menu li:hover > span.content {
display: inline;
background-color :rgb(204, 204, 204);
}
ul.menu {
list-style: none;
margin: 0px;
padding: 0px;
padding-top: 10px;
width: 230px;
}
ul.menu li {
position: relative;
border: 0px solid #000000; /* J'ignore pourquoi le fait de mettre ça évite que les éléments soit affiché un en-dessous de l'autre dans IE 7 */
}
ul.menu li span {
margin: 0px;
margin-bottom : 5px;
padding: 10px;
}
ul.menu li {
display: inline-block;
/*background-color: #ffffff;*/ /* Pour éviter que l'élément ne soit plus over quand on est entre les éléments */
margin-left: -4px; /* Problème avec Opéra 9.6 */
}
*+html ul.menu li {
margin-left: 0px; /* Paramètre par défault */
}
ul.menu li, x:-moz-any-link, x:default {
margin-left: 0px; /* Paramètre par défault */
}
/* Ancien menu /*
/*.menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
background-image: url("images/bordure.jpg");
background-repeat: repeat-x repeat-y;
width: 230px;
height: 790px;
padding: 0px;
padding-top: 50px;
margin-bottom: 10px;
margin-left : 20px;
margin-top : 240px;
position :absolute;
display:block;
clear:both;
}
.menu1
{
font-size: 20px;
background-color : rgb(204, 204, 204);
}
.menu2
{
font-size: 18px;
}
.menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.gif"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.menu a /* Tous les liens se trouvant dans un menu */
{
color: #5F80CB;
}
.menu a:hover /* Quand on pointe sur un lien du menu */
{
color: black;
text-decoration : none;
}*/
.title1
{
color : #3B3D7D;
font-size : 40px;
text-align : center;
}
.title2
{
background-color : #9494A1;
font-size : 26px;
text-align : center;
color : #FFFFFF;
}
.title3
{
background-color : rgb(204, 204, 204);
color : #4043A4;
font-size : 22px;
}
table {
border: medium solid #3B3D7D;
border-collapse: collapse;
width: 600px;
margin-left : 25px;
}
th {
font-family: monospace;
font-size : 15px;
border: thin solid #3B3D7D;
width: 50%;
padding: 5px;
background-color: #9494A1;
background-image: url(sky.jpg);
}
td {
font-family: sans-serif;
font-size : 11px;
border: thin solid #3B3D7D;
width: 50%;
padding: 5px;
text-align: center;
background-color: #ffffff;
}
caption {
font-family: sans-serif;
}
.footer {
/*clear: left;
clear : top;*/
height:3.7em;
padding :5px;
background:rgb(225,225,225);
overflow:visible !important /*Firefox*/;
overflow:hidden /*IE6*/;
text-align : center;
position : relative;
margin-left : 320px;
width : 890px;
float : left;
}
p img{
width : 350px;
height : 100px;
margin-left : 150px;
}
.img_carree{
width:200px;
height: 200px;
margin-left: 225px;
}
.img_carree_1{
width:570px;
height: 600px;
margin-left: 40px;
}
