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

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Mettre une div derriere une autre ( en arrière plan )

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Mettre une div derriere une autre ( en arrière plan ) (Lu 1064 fois)

Mettre une div derriere une autre ( en arrière plan )
« sur: le 30-12-2006 a 13:54:16 »

bsketeur
Membre récent

Hors-Ligne

Sexe: Male

Messages: 17

bonjour a tous j'ai un menu deroulant et j'aimerai le faire derouler 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

sode de ma feuille de style

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

code de ma page web

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style_div.css">
</head>

<body>
<div align="center">
<div id="bandeau"><img src="banniere_r1_c1.gif" width="50" height="128"><img src="banniere_r1_c2.gif" width="54" height="128"><img src="banniere_r1_c3.gif" width="63" height="128"><img src="banniere_r1_c4.gif" width="53" height="128"><img src="banniere_r1_c5.gif" width="63" height="128"><img src="banniere_r1_c6.gif" width="68" height="128"><img src="banniere_r1_c7.gif" width="81" height="128"><img src="banniere_r1_c8.gif" width="80" height="128"><img src="banniere_r1_c9.gif" width="64" height="128"><img src="banniere_r1_c10.gif" width="48" height="128"><img src="banniere_r1_c11.gif" width="44" height="128"><img src="banniere_r1_c12.gif" width="48" height="128"><img src="banniere_r1_c13.gif" width="35" height="128"></div>
<div id="menu">
<ul id="menuDeroulant">
      <li>
         <a href="#">Le Club</a>
         <ul class="sousMenu">
            <li><a href="#">L'Historique</a></li>
            <li><a href="#">Le bureau</a></li>
            <li><a href="#">Les sponsors</a></li>
         </ul>
      </li>
      <li>
         <a href="#">Les Equipes</a>
         <ul class="sousMenu">
            <li><a href="#">Les Equipes</a></li>
            <li><a href="#">Les Convocations</a></li>
            <li><a href="#">Les Résultats</a></li>
            <li><a href="#">Les Classements</a></li>

         </ul>
      </li>
      <li>
         <a href="#">Les Photo</a>
         <ul class="sousMenu">
            <li><a href="#">Les Matchs</a></li>
            <li><a href="#">Les Soirée</a></li>
         </ul>
      </li>
      <li>
         <a href="#">Discussion</a>
         <ul class="sousMenu">
            <li><a href="#">Forums</a></li>
         </ul>
      </li>
   <li>
         <a href="#">Les Liens</a>
         <ul class="sousMenu">
            <li><a href="#">La Mayenne</a></li>
            <li><a href="#">La Sarthe</a></li>
            <li><a href="#">Le Maine</a></li>
            <li><a href="#">La FFF</a></li>
         </ul>
     </li>
   </ul></div>
<div id="contenu"><div id="blocnews"></div>

</div>
</div>
</body>
</html>

Rapporter au modérateur

Re:Mettre une div derriere une autre ( en arrière plan )
« Répondre #1 sur: le 30-12-2006 a 20:19:54 »

theonlydrayk
Invité

Pour positioner des elements derriers d'autre (ou devant) tu prend la command z-index de css

CSS
Code:

img {
position:absolute;
top:0;
right:0;
z-index:0;
}
h1.title {
color:#000;
background-color:transparent;
position:absolute;
top:0;
right:0;
z-index:1;
}

img va se retrouver derriere le h1.title parce qu'il a un z-index plus petit

Documentation Officielle (anglais) :
http://www.w3.org/TR/REC-CSS2/visuren.html#z-index