Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: bsketeur le le 30-12-2006 a 13:54:16

Titre: Mettre une div derriere une autre ( en arrière plan )
Posté par: bsketeur le le 30-12-2006 a 13:54:16

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>

Titre: Re:Mettre une div derriere une autre ( en arrière plan )
Posté par: theonlydrayk le le 30-12-2006 a 20:19:54

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 (http://www.w3.org/TR/REC-CSS2/visuren.html#z-index)

Titre: Re:Mettre une div derriere une autre ( en arrière plan )
Posté par: bsketeur le le 30-12-2006 a 20:23:26

merci pour ton aide j'essaie sa tout de suite