Creer une page avec un cadre fixe en bas

Résolu
bibibengo Messages postés 18 Statut Membre -  
adns Messages postés 1152 Statut Membre -
Bonjour,
Je veux créer une page d'accueil comportant un cadre (pseudo-frame) au bas de la page qui reste fixe lors du defilement.
Pour cela j'ai crée un div :

Voici le CSS que j'a crée:
#conteneur{
position:absolute;
width:900px;
height:600px;
overflow:inherit;
margin:auto;
margin-left:15px;
margin-right:15px;
top:0px;
left:0px;
}
#haut{
position:absolute;
width:900px;
height:600px;
top:0px;
left:0px;
margin:auto;
overflow:visible;
margin-left:10px;
margin-right:10px;
}
#banniere{
position:fixed;
width:1000px;
height:50px;
top:580px;
margin:auto;
margin-left:15px;
margin-right:10px;
overflow:auto;
text-align:center;
background-color:#FFDFFF;
}
#content_banniere{
position:absolute;
width:950px;
height:45px;
top:580px;
margin:auto;
margin-left:15px;
margin-right:10px;
}
#close_banniere{
position:absolute;
width:50px;
height:50px;
top:580px;
left:900px;
text-align:center;
font:Arial, Helvetica, sans-serif;
color:#FFF;
font-weight:bold;
font-size:13px;
margin-left:15px;
margin-right:10px;
text-align:center;
background-color:#009900;
}
Voici le code de la page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="/relook_ok/css/blocs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<div id="haut">Haut</div>
<div id="banniere">
<div id="content_banniere">Banniere</div> //Doit contenir une animation flash
<div id="close_banniere">x</div>//Doit permettre de fermer le calque Banniere
</div>
</div>
</body>
</html>

Mon probleme c'est que le calque qbanniere et son contenu reste invisible à l'exécution.
Si quelqu'un à l'expérience de ce genre de page qu'il me donne un coup de main.

3 réponses

  1.
    adns Messages postés 1152 Statut Membre 153
     
    Bonjour,

    quelque chose comme ca ? 

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="/relook_ok/css/blocs.css" rel="stylesheet" type="text/css" />
<style>
#conteneur{
position:absolute;
width:900px;
height:600px;
overflow:inherit;
margin:auto;
top:0px;
left:0px;
}
#haut{
position:absolute;
width:900px;
height:600px;
top:0px;
left:0px;
margin:auto;
overflow:visible;
margin-left:10px;
margin-right:10px;
}
#banniere{
position:fixed;
width:100%;
height:50px;
bottom:0;
text-align:center;
background-color:#FFDFFF;
}
#content_banniere{
position:absolute;
width:100%;
height:45px;
}
#close_banniere{
position:absolute;
text-align:center;
font:Arial, Helvetica, sans-serif;
color:#FFF;
font-weight:bold;
font-size:13px;
text-align:center;
background-color:#009900;
right :10px;
bottom: 35px;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="haut">Haut</div>

</div>
<div id="banniere">
<div id="content_banniere">Banniere</div> 
<span id="close_banniere">x</span>
</div>
</body>
</html>


    Adns
    0
  2. bibibengo Messages postés 18 Statut Membre 4
     
    OK, je vais essayer pour voir
    0
  3. bibibengo Messages postés 18 Statut Membre 4
     
    Merci bcp, c'est ce que je voulais. je crois que mes calques se chevauchaient si j'ai bien compris.
    Il reste le script pour fermer le calque.
    0
    1. adns Messages postés 1152 Statut Membre 153
       
      Les calques se chevauchais et j'ai retouché un peu le CSS
      Ce que tu devrait aussi faire pour adapter ton site a chaque résolution d'écran en utilisant des % plutôt que des valeur en pixel. au moins pour la largeur ;)

      Adns
      0
    2. bibibengo Messages postés 18 Statut Membre 4
       
      ok c'est bien pigé, merci encore une fois de plus
      0
    3. adns Messages postés 1152 Statut Membre 153
       
      De rien mais pense au tag résolu :)
      0