Bonjour à tous!!
j'ai vraiment besoin d'un coup de main pour la mise en forme d'une application que je suis en train de coder...je suis débutant en mise en forme CSS mais malgré les bon tutos de Raphael il y a des choses qui m'échappent vraiment.
Voilà j'ai la mise en forme suivante:
Mais j'ai un gros problème le menu déroulant contenu dans temporaire...et bien lorsqu'il se déroule il decale les div en dessous... ca fout en l'air la mise en forme!
J'ai testé en supprimant la div temporaire...mais là problème...le menu s'affiche et de suite après le formulaire aussi et non en dessous.
ALors comment faire pour le div menu...j'aimerai que les sous-menus puissent apparaitre sans bouger les éléments en dessous.
voici le style:
voilà cequ'il se passe quand je déroule le menu avec la div temporaire:
capture1
sans la div temporaire et sans même dérouler le menu:
capture2
Quelqu'un peut m'aider?
j'ai vraiment besoin d'un coup de main pour la mise en forme d'une application que je suis en train de coder...je suis débutant en mise en forme CSS mais malgré les bon tutos de Raphael il y a des choses qui m'échappent vraiment.
Voilà j'ai la mise en forme suivante:
<div id="conteneur">
<div id="header">Le hautde page
</div>
<div id="temporaire">
<div id="menu">le menu déroulant CSS proposé sur le site</div>
</div>
<div id="centre">
<div id="form">le formulaire</div>
</div>
<div id="footer">Le footer</div>
</div>
Mais j'ai un gros problème le menu déroulant contenu dans temporaire...et bien lorsqu'il se déroule il decale les div en dessous... ca fout en l'air la mise en forme!
J'ai testé en supprimant la div temporaire...mais là problème...le menu s'affiche et de suite après le formulaire aussi et non en dessous.
ALors comment faire pour le div menu...j'aimerai que les sous-menus puissent apparaitre sans bouger les éléments en dessous.
voici le style:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur {
position: absolute;
width: 800px;
left: 50%;
margin-left: -375px;
}
#header {
height: 100px;
width: 800px;
background-image: url("header2.jpg");
}
#centre {
background-color:#ddd;
}
.temporaire {
height: 20px;
}
#pied {
height: 30px;
background-color: #99CC99;
}
#form {
color: #000;
background-color: #fff;
padding: 5px;
border-left: 1px solid #FF8BAE;
border-bottom: 1px solid #FF8BAE;
border-right: 1px solid #FF8BAE;
}
p {margin: 0;}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
/*MENU DEROULANT*/
#menu {
width: 800px;
}
#menu dl {
float: left;
width: 9em;/*12em*/
text-align: left;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #2E93F1;
border: 1px solid #000000;
margin: 1px;
color: #fff;
}
#menu dd {
display: none;
border: 1px solid #468DCC;
}
#menu li {
text-align: center;
background: #2E93F1;
}
#menu li a, #menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #6DB4F5;
}
/*ONGLET*/
ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #FF8BAE;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: #FFB7CD;
margin: 2px 2px 0 2px;
border: 1px solid #FF8BAE;
}
ul#tabnav li.active {
border-bottom: 1px solid #fff;
background-color: #fff;
}
ul#tabnav li.active a {
color: #000;
}
ul#tabnav li.active a:hover {
color: #000;
}
#tabnav a {
float: left;
display: block;
color: #fff;
text-decoration: none;
padding: 4px;
}
#tabnav a:hover {
background: #fff;
color: #FF8BAE;
}
voilà cequ'il se passe quand je déroule le menu avec la div temporaire:
capture1
sans la div temporaire et sans même dérouler le menu:
capture2
Quelqu'un peut m'aider?
et je vous laisserai tranquille! 
