28173 sujets

CSS et mise en forme, CSS3

Cadre a hauteur variable et maximisée

Bonjour

j'espère que je ne créé pas de doublons, mes recherches m'ont pas donnée de réponse.

Je fait un site en XHTML strict et CSS

Mon problème est le suivant:
j'arrive pas a avoir un cadre dont la hauteur varie avec la taille du navigateur, sachant que j'ai entete et pied de page.

J'ai une image d'entete maximisée en largeur, et de 100px de haut
Une barre de navigation fixée en bas de 64px de haut
Pour l'entete, je l'ai fixée par left=0px; top=0px; height=100px;
Pour la barre du bas, left=0px; height=64px; bottom=0px;
La dessus pas de soucis, tout navigateur confondu
Le probleme, c'est le cadre du milieu. C'est un div avec bordure
Je l'ai fixé comme suit:
- top:110px;
- width: 770px;
- bottom: 70px;
Sous FF et IE7 pas de soucis, le cadre est maximisé au milieu
Mais sous IE6, le cadre est fixé en au, mais la hauteur varie suivant le texte.

Tous les blocs sont en absolute

J'ai compris que ie6 utilise soit top soit bottom pour fixer le positionnement, mais pas les deux.
Mais je n'arrive pas a trouver de solution, pour faire malgrès tout ce cadre, en pure CSS si possible

MErci pour votre aide
Bonjour, un exemple peut-être utile :
Page sur toute la hauteur de la fenêtre, avec pied de page en bas

Il « suffit » de rajouter un en-tête et d'utiliser le positionnement fixe à la place du positionnement absolu pour l'en-tête et le pied de page.

C'est un peu compliqué à gérer, mais c'est la meilleure piste à creuser. Certains proposeront peut-être des « solutions » à base de overflow: auto, mais il ne faut pas les écouter, ce sont de vils menteurs. Smiley cligne

J'ai passé ces dix derniers jours à expliquer dans quatre ou cinq sujets différents :
- que les blocs avec barre de défilement interne sont une mauvaise idée (ergonomie et accessibilité problématiques) ;
- que l'on peut faire un design avec éléments fixes grâce à position: fixed, design compatible IE7 + Firefox + les autres navigateurs récents, et élégamment dégradable pour IE6.

Je vais donc m'accorder des vacances et ne pas le répéter une cinquième ou sixième fois. Faire une petite rechercher sur le forum sur les thèmes évoqués dans les deux points ci-dessus pour plus d'informations.

Bonne continuation. Smiley smile
Salut,

Un peu chaud pour les débordements de texte, mais compatible me semble t'il IE6&7, FF.

Tout ça un peu "casse gueule" 
<style type="text/css">
*{margin: 0; padding: 0;}
body, html{
position: relative;
height: 100%;

}

#header{
width: 100%;
height:100px;
background: red;
position: absolute;
top: 0;
left: 0;
}

#milieu{
width: 100%;
height:100%;
background: yellow;
}

#milieu .spacer_haut{
height:100px;
}

#milieu .spacer_bas{
height:50px;
}

#milieu p{
margin: 25px;
}

#footer{
width: 100%;
height:50px;
background: lime;
position: absolute;
bottom: 0;
left: 0;
}

</style>

</head>
<body>

<div id="header">
</div>

<div id="milieu"> 
	<div class="spacer_haut"></div>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque id felis. Mauris ac neque vitae metus faucibus ullamcorper. Aliquam non pede. Vestibulum non velit vitae nisl blandit molestie. Donec non augue. Fusce lacinia, ligula ut cursus venenatis, ante mi porttitor ipsum, ac dictum enim libero non nisi. Fusce molestie. Aliquam felis. Cras elementum, lectus eu bibendum tincidunt, ante magna ultricies pede, id feugiat tortor ante sit amet lectus. Cras mattis gravida mi. Vivamus facilisis, pede at euismod bibendum, magna nunc luctus nunc, rutrum sodales ipsum arcu mollis leo. Ut lacus. Phasellus libero mi, fringilla ac, laoreet sed, lobortis posuere, elit. Etiam sed purus. Phasellus quis turpis. Cras vulputate, ante porttitor lacinia luctus, ligula velit pharetra lacus, dictum volutpat diam nisi non libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pulvinar. Nam nisl leo, tincidunt ut, rhoncus ut, ullamcorper ut, turpis.
	</p>	
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque id felis. Mauris ac neque vitae metus faucibus ullamcorper. Aliquam non pede. Vestibulum non velit vitae nisl blandit molestie. Donec non augue. Fusce lacinia, ligula ut cursus venenatis, ante mi porttitor ipsum, ac dictum enim libero non nisi. Fusce molestie. Aliquam felis. Cras elementum, lectus eu bibendum tincidunt, ante magna ultricies pede, id feugiat tortor ante sit amet lectus. Cras mattis gravida mi. Vivamus facilisis, pede at euismod bibendum, magna nunc luctus nunc, rutrum sodales ipsum arcu mollis leo. Ut lacus. Phasellus libero mi, fringilla ac, laoreet sed, lobortis posuere, elit. Etiam sed purus. Phasellus quis turpis. Cras vulputate, ante porttitor lacinia luctus, ligula velit pharetra lacus, dictum volutpat diam nisi non libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla pulvinar. Nam nisl leo, tincidunt ut, rhoncus ut, ullamcorper ut, turpis.
	</p>	

	
	
	
	<div class="spacer_bas"></div>
</div>

<div id="footer">
</div>

Modifié par ghost (24 Mar 2007 - 14:35)
Bonjour

merci pour les réponses.
J'ai mis un peu de temps, mais j'ai réussi a adapter mon site avec le tuto fourni.
Seulement, j'aimerais rajouter un petit truc, que je n'arrive pas.

Entre l'entete et le pied de page, j'aimerais que le texte soit encadré.
Je je met le text entre div, avec border, ca encadre, mais a la hauteur du texte.
J'aimerais que le cadre lui aussi soit maximisé, jusqu'au pied de page, dans le cas ou le texte rempli pas l'écran.
Le début du carde commencerais sous l'entete.
J'ai réussi depuis lontemps a faire ca sous firefox, mais sous ie6 ca va pas.

Question subsidiaire: je comprends pas bien l'intéret du div dernier-element, qui d'ailleurs se situe exactement sous le texte ...

Merci pour tout
Ya il un logo alsacréation que je puisse ajouter librement a mon site quand j'aurais fini ?
ledaberun a écrit :
Entre l'entete et le pied de page, j'aimerais que le texte soit encadré.
Je je met le text entre div, avec border, ca encadre, mais a la hauteur du texte.
J'aimerais que le cadre lui aussi soit maximisé, jusqu'au pied de page, dans le cas ou le texte rempli pas l'écran.

Le seul moyen d'obtenir un bloc qui prendrait 100% de la hauteur moins un espace réservé en haut et moins un espace réservé en bas, c'est via une utilisation fine du positionnement absolu, et comme tu as déjà pu le tester ça ne marchera pas sous IE6. De plus, même si ça marche ça reste problématique, car le bloc est alors figé en hauteur, et le contenu peut alors dépasser.

La meilleure chose à faire est alors de laisser le bloc de contenu prendre la hauteur de son contenu, tout en simulant un bloc prenant toute la hauteur voulue.
Techniquement, tu vas placer les bordures gauche et droite en image de fond du conteneur global (celui en min-height: 100%), la bordure haute comme image de fond ou partie de l'image de fond de l'en-tête, et la bordure basse comme image de fond ou partie de l'image de fond du pied de page.

Bref, il va falloir travailler en trompe-l'oeil.

ledaberun a écrit :
Question subsidiaire: je comprends pas bien l'intéret du div dernier-element, qui d'ailleurs se situe exactement sous le texte ...

De mémoire, il sert à éviter des problèmes de fusion des marges. Voir la toute dernière partie du tutoriel.

ledaberun a écrit :
Ya il un logo alsacréation que je puisse ajouter librement a mon site quand j'aurais fini ?

Tu devrais en trouver sur cette page :
http://css.alsacreations.com/Comment-soutenir-Alsacreations
Ok, effectivement, il faut ruser.
Je vais travailler la dessus
Dire que j'obtenais exactement ce que je voullais avec firefox, et simplement ...
C'est comme ca

Merci beaucoup pour les conseils donnés, et pour toute l'aide fournie par ce site.
Je manquerais pas de passer le mot.
Bonne continuation !
Sujet clos
Aller à