Aller au contenu

Mettre une div derriere une autre ( en arrière plan )


Sujets conseillés

Posté

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

Posté

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

Posté

Hello,

Petit complément :

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.

Source Alsacréations

Posté

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

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; }

Edit captain_torche : merci d'utiliser la balise CODEBOX pour les codes longs

Posté

Mouais, sans le HTML ça risque dêtre tendu nanard. :whistling:

Tu pourrais pas nous mettre ta page en ligne ? Je suis sûr qu'on y verra tout de suite plus clair !

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...