Aller au contenu

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


nanard

Sujets conseillés

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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 !

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

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



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