bonjour à tous
j'ai un menu déroulant et j'aimerai le faire dérouler sur le corps de ma page mais je ne trouve pas comment mettre la div du corps en arriere plan qq'un peu t'il maider
merci
Version complète: sur le forum Webmaster Hub : Mettre une div derriere une autre ( en arrière plan )
Bonjour
regarde dans tes paramètres de la balise <div> concernée le paramètre z-index:xx
Ce xx correspond à la "profondeur" du div dans la contruction de ta page
Pat
regarde dans tes paramètres de la balise <div> concernée le paramètre z-index:xx
Ce xx correspond à la "profondeur" du div dans la contruction de ta page
Pat
Hello,
Petit complément :
Source Alsacréations
Petit complément :
CITATION
Attention aux décalages ! Les menus déroulants utilisent la propriété "display : block" et "display : none". Au départ et lorsqu'ils sont masqués, les sous-menus ont la valeur "none", cela signifie qu'ils n'occupent aucun espace dans la page.
En s'affichant, ils occupent alors un espace qui n'existait pas avant et peuvent "pousser" le reste de votre site !
C'est pourquoi, dans ces cas là, il faudra toujours positionner le menu et le site à part (chacun en position absolue) et leur donner un z-index (profondeur) différent, comme vous le voyez sur l'exemple de résultat. Dans ce cas, le menu sera placé au-dessus du reste du site et s'affichera sans le gêner.
En s'affichant, ils occupent alors un espace qui n'existait pas avant et peuvent "pousser" le reste de votre site !
C'est pourquoi, dans ces cas là, il faudra toujours positionner le menu et le site à part (chacun en position absolue) et leur donner un z-index (profondeur) différent, comme vous le voyez sur l'exemple de résultat. Dans ce cas, le menu sera placé au-dessus du reste du site et s'affichera sans le gêner.
Source Alsacréations
un petit complément...
"z-index" ne fonctionne que si "position" est déclaré aussi...
"z-index" ne fonctionne que si "position" est déclaré aussi...
merci pour vos expliquation mais je vais vous mettre mon code parce que je croi que vous n'etes pas sur la meme longueur d'onde que moi je pense
Edit captain_torche : merci d'utiliser la balise CODEBOX pour les codes longs
CODE
div {
text-align:center;
}
div#bandeau {
width:751px;
height:128px;
background-color:#FFFFFF;
}
div#contenu {
width:751px;
height:450px;
background-color:#FFFFFF;
}
div#menu {
width:751px;
height:125px;
background-color:#FFFFFF;
}
div#menudroit {
float:right;
width:150px;
height:150px;
background-color:#FFFFFF;
}
div#blocnews {
width:150px;
height:150px;
background-color:#FFFFFF;
}
div#corps {
text-align:left;
float:left;
width:601px;
height:450px;
background-color:#FFFFFF;
}
div#sondage {
width:150px;
height:250px;
background-color:#FFFFFF;
}
body {
font-family: "Comic Sans MS";
font-size: 11px;
background: #FFFFFF top left no-repeat;
margin: 0;
padding: 0;
}
#menuDeroulant
{
background: #6A6458;
width: 751px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: auto;
color:#FF9900;
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:#FF9900;
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; }
text-align:center;
}
div#bandeau {
width:751px;
height:128px;
background-color:#FFFFFF;
}
div#contenu {
width:751px;
height:450px;
background-color:#FFFFFF;
}
div#menu {
width:751px;
height:125px;
background-color:#FFFFFF;
}
div#menudroit {
float:right;
width:150px;
height:150px;
background-color:#FFFFFF;
}
div#blocnews {
width:150px;
height:150px;
background-color:#FFFFFF;
}
div#corps {
text-align:left;
float:left;
width:601px;
height:450px;
background-color:#FFFFFF;
}
div#sondage {
width:150px;
height:250px;
background-color:#FFFFFF;
}
body {
font-family: "Comic Sans MS";
font-size: 11px;
background: #FFFFFF top left no-repeat;
margin: 0;
padding: 0;
}
#menuDeroulant
{
background: #6A6458;
width: 751px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: auto;
color:#FF9900;
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:#FF9900;
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; }
Edit captain_torche : merci d'utiliser la balise CODEBOX pour les codes longs
Mouais, sans le HTML ça risque dêtre tendu nanard. 
Tu pourrais pas nous mettre ta page en ligne ? Je suis sûr qu'on y verra tout de suite plus clair !
Tu pourrais pas nous mettre ta page en ligne ? Je suis sûr qu'on y verra tout de suite plus clair !
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.