Creer une page avec un cadre fixe en bas

Résolu
bibibengo Messages postés 18 Date d'inscription   Statut Membre Dernière intervention   -  
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   -
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.

A voir également:

3 réponses

Réponse 1 / 3
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   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
Réponse 2 / 3
bibibengo Messages postés 18 Date d'inscription   Statut Membre Dernière intervention   4
 
OK, je vais essayer pour voir
0
Réponse 3 / 3
bibibengo Messages postés 18 Date d'inscription   Statut Membre Dernière intervention   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
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   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
bibibengo Messages postés 18 Date d'inscription   Statut Membre Dernière intervention   4
 
ok c'est bien pigé, merci encore une fois de plus
0
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
De rien mais pense au tag résolu :)
0