je voudrais faire une page qui scroll verticalement quand elle est trop longue (normal..) mais qui passe "sous"une div fixe qui me sert de header. Comme il y a de la transparence, on doit voir le texte de la page passer sous le header.
Pour ce faire, j'organise mon HTML comme ça :
Html
Code : Tout sélectionner
<body>
<div class="contenant">
<div class="contenu"><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- TemplateBeginEditable name="contenu" -->
<!-- TemplateEndEditable --></div>
</div>
<div class="header">
<img src="../web%20Design/headerTransparence.png" width="650" height="90">
</div>
</body>et ma CSS :
Code : Tout sélectionner
body {
font-family: Arial, Helvetica, sans-serif;
size">font-size: 12pt;
text-decoration: none;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: auto;
position: absolute;
left: 0px;
top: 0px;
}
.header {
position: absolute;
width: 100%;
top: 0px;
text-align: left;
height: 200px;
overflow: hidden;
}
.contenant {
width: auto;
overflow: auto;
height: 100%;
}
.contenu {
top">margin-top: 0px;
right">margin-right: 0px;
bottom">margin-bottom: 0px;
left">margin-left: 250px;
width: 650px;
}Je n'arrive pas trop a comprendre le overflow, le float et tout ça et donc, j'ai pas mal tatonné en partant d'un tutoriel dans lequel les div ne se chevauche jamais....
Comme de toute façon, il faudra faire une petite détection pour savoir si la zone transparente est un PNG (sous mozilla...) ou un Flash (sous IE) je peux sans probléme avoir deux systémes de CSS différents ...
Voila le problème avec mozilla :
Comme vous pouvez le voir, le texte de la div "contenu" passe bien sous le PNG mais ma div "header" s'affiche par dessus l'ascenseur...
Et avec IE6, ça part carrement dans tous les sens !
Quand on réduit trop la fenetre, on se retrouve avec 3 ascenseurs dont un qu'il faut aller chercher avec le scroll horizontal car il se cache SOUS les autres !
(L'aspect bleu du PNG est normal sous IE... je le remplacerait par un Flash avec le PNG dedans quand ça sera nesseçaire.)
A force de tatoner et de toucher à tout, j'ai du faire n'importe quoi...
Est ce que quelqu'un aurait l'amabilité de me corriger ou mieux, de me donner une organisation CSS qui me permettrait de faire ce que je veux sous une forme minimaliste, je l'adapterai à mes besoins mais en partant sur une base saine.
merci d'avance.