Je but dans du code css. Je réalise la partie css pour un site intranet mais je bloque sur le possitionnement du menu.
<Body>
<Conteneur Div>
<header h1>
<Menu Div>
< Menu Déroulant>
</Menu Div>
<Contenu Div>
<Information Div>
Code : Tout sélectionner
/*contenue pour le site mennu etc */
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
background:#41b7d4;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}
div#conteneur
{
width: 1000px ;
height: auto;
margin: 0 auto ;
text-align: left ;
border: 1px solid #0066CC;
background: #fff ;
}
h1#header
{
border-bottom: 1px dashed #41b7d4;
height: 100px ;
background: url(../img/header_1000x100.png) no-repeat left top ;
}
div#menu
{
border: 1px solid #41b7d4;
width:1000px;
height:50px;
position: absolue;
}
/////////////
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
background: #6A6458;
width: 644px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
top: 0;
left: 0;
position: absolue;
z-index: 100;
}
#menuDeroulant li
{
float: left;
width: 100px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
//////////////
div#contenu
{
position: relative;
margin: 100px 0px 0 10px ;
width: 1000px;
border: 2px solid #41b7d4;
overflow: auto;
z-index: 2;
}
div#contenu h2
{
margin: 0 10px 0 10px;
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
color: #FF6600 ;
background: url(../img/bouton.jpg) no-repeat left bottom ;
border-bottom: 1px solid #41b7d4 ;
border-left: 1px solid #41b7d4 ;
z-index: 2;
clear: left;
}
div#information
{
clear: left;
margin: 10px auto;
padding: 0 15px 0 0;
text-align: right ;
color: #0066CC ;
}
table#table_creation_audit, table#table_creation_question, table#ajout_question, table#ajout_constat, table#table_maj1, table#rps_question, table#visualisation_audit, table#table_creation_rapport
{
width:800px;
margin: 0 auto;
border-collapse: collapse;
border: 1px solid #94107e;
}
table#table_creation_audit td, th , table#table_creation_question td,th, table#ajout_question td, th, table#ajout_constat td, th, table#table_maj1 td, th, table#rps_question td, th, table#visualisation_audit td, th, table#table_creation_rapport td, th
{
border: 1px solid #94107e;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
.important {color : red;}
.italique {font-style:italic;}
/*fin pour le site mennu etc */
/*CSS concernant inventaire */
Le problème c'est que je voudrait que le menu déroulant passe au-dessus de la partie contenue, car actuellement le menu ne passe pas par dessus et décale tout la suite du site.
Je pense qu'il faut que je joue sur les position et z-index? Mais j'ai essayer et je ne suis pas arrivé.
quel erreur est-je commise?
Merci
guigui69
