28217 sujets

CSS et mise en forme, CSS3

Faire comme avec les frames...

Bonjour à tous.
Nouveau dans les css, galère pas mal... Smiley confus

En fait, j'aime bien les sites où on a, un peu à la manière des frames (non, non, tapez pas la tête !!!) :
- un header toujours fixé en haut (normal pour un header...)
- un footer toujours fixé en bas (idem...)
- une zone de rédactionnel centrale, qui prend tout la place disponible en hauteur, laissée par le header et le footer.
En fait, le but est de n'avoir à scroller que dans la zone centrale de rédactionnel, et pas directement dans la fenêtre du browser.

J'ai pas mal lu de posts et de tutos, donc ceux excellents de Raph. et je ne trouve pas mon bonheur.

Quelqu'un a sûrement du rencontrer ce problème et doit avoir une solution. Je ne demande pas qu'on me fasse le boulot, juste une aide ou des liens.

Merci d'avance et bonne journée à tous.
Bonjour,

je ne sais pas si ton idée est une bonne idée.

Je m'explique, sur un écran en 640x400 ou en 800x600 le header et le footer peuvent prendre toute la place. Surtout pour une personne qui augmente la taille des carractères pour mieux voir.
Bonjour ;
fais une recherche avec "scroll", sur le site, tu auras déjà quelques avis à ce propos...
DSC : effectivement, le problème peut se poser, mais en fait je travaille pas mal avec des objets graphiques, donc dans tous les cas, il devront prendre un minimum de place...

J'ai fait une mise en page à bas de <table>, etc... et c'est ça que je veux reproduire (vous imaginez que c'est le b... à gérer avec des <table> :
www.bleudargens.fr/mak.html

Merci pour votre aide.
Je ne sais aps si c'est la meilleures des facond e proceder mais sinon il te suffit d'utiliser la propriété css overflow pour la div qui sera "scrolable"

.scroll {
overflow: auto;
}
J'ai essayé avec le scroll:auto, mais le problème est que par exemple sur mon pc qui est en 1600x1280, dans tous les cas, s'il n'y a pas beaucoup de texte, le footer sera collé en dessous de la zone scrollable.

Et moi je veux qu'il se mette en bas de la fanêtre du navigateur dans tous les cas...
Merci pour ton post, mais ça ne résoud pas le problème...

Si tu passes sur une résolution supérieure, tu verras que ton footer est collé au milieu de la page. Moi je voudrais qu'il aille dans tous les cas en bas de page, et que la zone où il y a le texte soit agrandie de façon dynamique... et que la scrollbar apparaisse ou pas...
Meme si je ne suis pas certain pour l'accesibilité de ton idée...

Avec l'exemple poupsylo

<html>
<head>
<title>Test</title>

    <style type="text/css">
    <!--
			body {
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
				}
				
      #h {
				border: 1px solid red;
				display: block;
				height: 25px;
				position: absolute;
					top: 0px;
				width: 100%;
				}
				
      #c {
				overflow: scroll;
				display: block;
				background: gray;
				padding: 25px 0 25px 0;
				height: 100%;
				width: 100%;
				}
				
      #f {
				display: block;
				border: 1px solid blue;
				height: 25px;
				position: absolute;
					bottom: 0px;
				width: 100%;
				}
    -->
    </style>
</head>

<body>
	<div id="h">
	hhhhhhhhhh
	</div>
	
	<div id="c">
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	<p>sdfgs</p>
	</div>
	
	<div id="f">
	ffffffffffff
	</div>
</body>
</html>


A toi de jouer...
Modifié par DSC (23 Mar 2005 - 12:31)
Je me répète surement mais avec un 

position: fixed;
bottom:0px;


sur ton footer, ça marche.
Mais avec Firefox et pas IE.
Je crois qu'il n'y aucun moyen de le faire avec IE en XHTML et CSS.

Tu veux le faire en tableau toi ?

Edit : je crois que le
position:absolute
bottom:0px

pose des problèmes lors de redimensionnement de la fenêtre ou scroll.
J'ai déjà essayé de faire la même chose, et c'est vraiment la M....
Modifié par johanna33 (23 Mar 2005 - 12:34)
le code proposé est utilisable tel quel pour IE...

sinon, oui, ce n'est pas vraiment la solution mais bon. C'est tout ce que je peux apporter.

Désolé: le code est quelque peu mal ordonné Smiley langue
Oui ça marche avec IE.
Mais je crois avoir eu des pbs lorsque l'on redimensionne la fenêtre.
Le footer se met en bas de la fenêtre, et si on l'agrandit, je crois qu'il reste au même endroit, soit alors : par dessus le contenu.

Enfin il me semble avoir eu un problème de ce genre là.
A tester.
En cherchant un peu tu devrais trouver des solutions. C'est même assez facile.

Mais si tu cherche un peu plus encore tu te rendras sans doute compte que même les solutions qui fonctionnent techniquement sont mauvaises pour pleins de raisons

mollette centrale de la souris inopérante.
navigation clavier impossible
techniques d'ancrage aléatoires voire inopérantes.
dans le cas de l'utilisation de position:fixed; le pire problème c'est qu'un navigateur qui reconnait cette valeur de la propriété (comme les geckos) se trouve accablé d'un scrolling incroyablement laborieux si on l'utilise.

Remarque : il est préférable de choisir overflow:auto; à overflow:scroll; (enfin si je ne vous ais pas découragé d'utiliser l'overflow, ce qui était mon but).

++
Merci DSC pour ta solution.

Dans l'esprit c'est ça que je veux.
Dans la pratique, effectivement, quand on agrandit, le header et le footer restent où il faut, mais le scroll passe dessous, alors qu'il faudrait qu'il s'arrête avant...

Bon, ce qui me rassure, c'est que ma question n'est pas complètement débile, et que faire l'équivalent des <table> avec des <div> n'est pas aussi simple / souple qu'il n'y parait. Par contre, je ne discute pas de l'intérêt quant au poids du code et de la maintenabilité...

Juste une petit remarque : si tous les forums pouvaient être aussi réactifs que celui-là...
Merci à touts en tout cas pour votre aide.

Suis donc preneur si quelqu'un a une solution ou un début de...
Sujet clos
Aller à