28172 sujets

CSS et mise en forme, CSS3

Mise en forme "Fixed" et extensible

Bonjour.

Cela fait un petit moment que je suis bloqué sur un problème dans la réalisation d'une page web et j'espère que vous pouvez m'aider.

Je dois réaliser une page web avec la structure suivante:

* Un En-tête (head) ; qui contient un menu déroulant et un fil d'Ariane.
* Un DIV (center) contenant les diverses informations des différentes pages.
* Un pied de page (foot).

Voici la difficulté:

* Head et Foot doivent toujours se trouver respectivement en haut et en bas de la fenêtre de l'utilisateur même si celui-ci scroll.
* Center contient suffisamment d'informations pour nécessité un scrolling vertical et horizontal (des grands tableaux).

J'ai donc opté pour mettre head et foot en position fixed ce qui me donne un résultat très correct pour les navigateurs récents. Mais une fois sur IE6 les positions fixed ne sont plus prisent en charge.
J'ai donc essayé de mettre en pratique les différentes techniques que j'ai pu voir sur divers sites et forums du net, en particulier le remplacement du scrolling de l'élément HTML par un scrolling de center.
Néanmoins je ne sais pas si c'est parce que je ne peux utiliser de valeurs en pixels pour définir la hauteur de center (page extensible) ou si c'est par ce qu'elle contient une flopée d'éléments en position:absolute. Mais cette solution donne n'importe quoi dans IE6.

Y-a-t'il une solution à ma situation actuelle (pour faire comprendre les position fixed par IE6).

Ou alors si quelqu'un connait une autre manière de réaliser cette mise en forme sans passer par le positionnement fixed je suis preneur, j'ai beau avoir cherché longtemps je ne sais pas comment je pourrais m'y prendre autrement.

Merci.
Bon je pense que je n'ai pas été assez clair ou que je n'ai pas utilisé la méthodologie attendu sur ce forum.
Si je peux me permettre une nouvelle tentative :

j'ai une page web avec la structure suivante (bon c'est pas exactement ma page web c'est une version simplifier pour bien cerné le problème Smiley langue ) 


<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<div id="head"></div>
<div id="corps">
<div id="objet"></div>
</div>
<div id="foot"></div>
</body>
</html>


et un css :


#head{
background:#FFFF00;
position:fixed;
z-index:1;
height:100px
width:100%;}

#corps{
padding:100px 0 100px 0;
background:#FF00FF;
width:2000px;
height:2000px;}

#objet{
position:absolute;
    top:250px;
    left:100px;
    width:50px;
    height:50px;
    background:#FFFFFF;}

#foot{
width:100%;
background:#00FFFF;
position:fixed;
    bottom:0px;
z-index:2;}


Ça marche très bien sauf sous IE6.
j'ai donc essayer une feuille de style conditionnelle contenant la petite manipulation pour renarder IE6:

body, html {
height: 100%;
margin: 0;
padding: 0;
}
html {
overflow: visible;
}
body {
overflow: auto;}
#head, #foot{
position:absolute;
}


Mais bon là il y a deux problème, le scrolling horizontal et l'élément objet positionné en absolu.

Je voulais donc savoir si il y avais une solution pour arriver malgré tout au même résultat?
Modifié par Dexe (29 May 2008 - 12:04)
Sujet clos
Aller à