28173 sujets

CSS et mise en forme, CSS3

Pied de page (bottom:0) en tête (top:0) et milieu scrollable mais...

Bonjour à tous,

Pour me conformer aux standards, j'essaie tant que possible de mettre en forme via des css. Malheureusement je rencontre parfois des problèmes comme par exemple celui-ci (problème qui serait vite résolu il faut bien le dire avec des frames):

Je voudrais faire une mise en page où la hauteur de la bannière supérieure serait fixe tout comme le pied de page (à bottom:0px) toujours visible à l'écran et pouvoir placer entre la bannière et le pied de page une zone de texte scrollable qui se redimensionne quelque soit la taille de la fenêtre (sans déborder sur les deux autres zones).

J'aimerais éviter de jouer avec de % parce je voudrais que l'en tête et le pied restent fixes.

Me fais-je bien comprendre?

Merci d'avance,
JL
Salut et bienvenu,

Pour ce qui est de ton conteneur à dimension variable, il existe un moyen pour que ce dernier s'adapte à ton contenu... Tu trouveras une réponse dans ce sujet .

Pour ce qui d'empêcher le débordement sur tes en-tête et pied de page, il te suffit d'indiquer un padding-bottom et un padding-top fixés au dimension (en hauteur) de tes en-tête et pied de page.

Voilà,
j'espère que pour toi, c'est plus clair Smiley biggrin
Merci mais ça n'a pas l'air d'être ça...ou alors j'ai mal compris

J'ai trouvé un exemple de la mise en page que je voudrais faire en CSS

!!Attention l'exemple n'est pas de moi, celui-ci est mis en place via des frames...mais est-ce possible de reproduire cela en css?

http://www.visible.be

J'ai déjà pas mal cherché mais je ne trouve pas ce type de mise en page...
Si j'ai bien compris, tu veux :
- un en-tête fixe, un contenant de taille fixe et un pied de page fixe ?

Ne suffit-il donc pas de faire un conteneur général avec à l'intérieur le header (top:0;), le footer (bottom:0;) et enfin le content qui se cale au milieu et à l'intérieur duquel tu fais ta mise en page ?

Dès lors que ton contenu dépasse la taille fixée, tu devrais voir apparaitre la scrollbar, enfin, il me semble. Smiley murf
Non ça je sais faire
A vrai dire, c'est justement que la hauteur du bloc contenant le texte soit variable qui m'intéresse
Dans l'url que je propose plus haut, il faut redimensioner la fenêtre pour observer le comportement des trois blocs (header,text,footer)
Le header et le footer sont toujours apparents quelque soit la hauteur de la page. Et le texte se cale exactement entre eux avec un ascenseur.
Dernière avis : Smiley smile
Si tu mets le contenur général à 100% de la taille de ton navigateur et qu'à l'intérieur tu fixes le header et le footer à 0, ils resteront fixes, non ? Smiley rolleyes
Oui j'avais pensé comme toi mais...

>> modèle de mise en page à imiter :http://www.visible.be pour bien comprendre ma question (redimensionner la fenêtre)

Voici un css qui afficherait bien un en-tête et un pied de page fixes :



html,body{
	height:100%;
}
#header {
position:absolute;
top:0px;
height: 30px;
width:inherit;
border-bottom:1px solid #000000;
background-color: #D7D7D7;
text-align:center
}
#footer {
position:absolute;
bottom:0px;
height: 30px;
width:inherit;
border-top:1px solid #000000;
background-color: #D7D7D7;
text-align:center
}
#conteneur {
position: absolute;
width: 770px;
left: 50%;
height:100%;
margin-left: -390px;
background-color:#D7D7D7;
background-image:url(images/mot_g.gif);
background-repeat:repeat-y;
border:1px solid #000000;
}
#texte {	
	text-align:justify;
	overflow:scroll;
}

et dans le body

<body>
<div id="conteneur">
<div id="header">Bannière supérieure</div>
<div id="footer">Pied de page </div>
<div id="texte">
Alors alors?

</div>
</div>
</body>

Je voudrais que l'id texte occupe la place entre header et footer...Est-ce possible sans faire height:% >> ce qui représente une approximation à mon avis....

NB:Je ne vous parle pas des différences d'interprétation lFF et IE orsque j'utilise des padding ou des margin
Modérateur
bonjour,
j'ai bricolé ça sous forme de gabarit, je ne sais pas trop comment le decrire mais c'esttres proche de ce que tu veut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>pouet pouet</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style  type="text/css">

* {margin:0;padding:0;}
html,body{
	height:100%;margin:0 ;width:800px;
}

#conteneur {
height:100%;
margin-bottom:-60px;
background-color:yellow;
overflow:auto;
}
#margeban {height:100px;}
#header {
height:100px;
background-color:red;
position:absolute;
width:784px;
}
#margepied {height:60px;}
#footer {
height:60px;
width:784px;
background-color:green;
position:relative;
z-index:1;
}
</style> 
</head>
<body>
<div id="conteneur">
<div id="header">Bannière supérieure</div>
<div id="margeban">
</div>
debut <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
v
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>fin !
<div id="margepied"></div>
</div>
<div id="footer">Pied de page </div>

</body>
</html>

... sans tableau.

a plus
super merci gcyrillus, c'est vrai que ça se rapproche assez de ce que je cherche ...juste le scroll qui s'affiche sur toute la hauteur mais bon

Encore bravo pour le site qui est animé par des gens très sérieux et rigoureux

A bientôt!
Sujet clos
Aller à