Problème de mise en page CSS

[Cleden]

Bonjour,

J'envisage de refondre un site que je sent un peu étriqué dans son costume. J'ai donc choisi de lui donner une largeur relative.

Je me suis largement inspiré des différentes mises en page disponibles à la page http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Mon idée est la suivante: Je souhaiterai:

- Que la mise en page fasse 100% de la hauteur de l'écran

- Que le menu, le header et le footer restent fixes à l'écran

- Que seule la partie droite monte et descende avec l'ascenseur

Je suis arrivé presque à ces fins avec le modèle suivant: http://www.ouetu.com/newdesign.php

Malheureusement, il y a quelques problèmes à ma mise en page:

- Je ne parviens pas à laisser un petit blanc de chaque coté

- Les tailles des headers et footers diminuent lorsque la hauteur de l'écran diminue.

Vous allez me dire : "C'est normal, tu as spécifié des valeurs en pourcentage pour tes hauteurs de header et footer".

Je vous répond que c'est la seule manière que j'ai trouvé pour que la mise ne page fasse 100% de la hauteur.

Mes questions sont donc les suivantes:

Comment couvrir 100% de la hauteur de la page avec un header et footer de hauteur fixe ? En gros, c'est la zone du milieu qui s'adapte.

Comment rajouter à cela un menu, header et footer fixes, c'est à dire qui ne bougent pas à l'écran ?

En espérant que mes idées soient réalisables,

Loïc.

[the_penguin]

Tu peux spécifier la hauteur de ton header et de ton footer en px et placer ton contenu comme ceci :

.frame
{
    position: absolute;
    top: 100px; /* la hauteur de ton header */
    left: 150px /* la largeur de ton menu */
    bottom: 100px /* la hauteur de ton footer */
    right: 0; /* pas d'espace à droite */
}

Je n'ai pas testé ce code mais a priori il devrait marcher

[thierryf]

Bonjour,

Pour réaliser ce que tu veux, le plus simple serait de faire une structure en 4 frames de ta page.

Le 1er frame c'est ton en-tete (header)

Le 2eme c'est ton menu

Le 3eme c'est ton contenu "scrollable"

Le 4eme ton pied de page (footer).

Un premier frameset contiendra à gauche ton menu et à droite ton contenu (positionnement vertical).

Un frameset général contiendra ton en-tete, ton frameset menu+contenu, et ton pied de page. Il te suffira d'indiquer les hauteurs de chacun de ces 3 frames.

Voilà. Pas besoin de CSS, sauf pour la présentation de tes 4 éléments de ta page.

Il faut savoir :

1 / Que la propriété "height" des CSS cause davantage de problème qu'elle n'en résoud. Il faut éviter de l'utiliser.

2 / Une structure en frame n'est pas recommandée pour le référencement d'un site. J'imagine donc que le référencement n'est pas important pour ton site.

[the_penguin]

2 / Une structure en frame n'est pas recommandée pour le référencement d'un site. J'imagine donc que le référencement n'est pas important pour ton site.

Il n'y a pas que pour le référencement qu'elle cause des problèmes : à méditer

[Cleden]

Tu peux spécifier la hauteur de ton header et de ton footer en px et placer ton contenu comme ceci :

.frame
{
    position: absolute;
    top: 100px; /* la hauteur de ton header */
    left: 150px /* la largeur de ton menu */
    bottom: 100px /* la hauteur de ton footer */
    right: 0; /* pas d'espace à droite */
}

Je n'ai pas testé ce code mais a priori il devrait marcher

<{POST_SNAPBACK}>

J'ai adapté ton code, et il marche parfaitement.... pour Firefox

http://www.ouetu.com/newdesign.php

Parcontre, Ie n'en fait qu'à sa tête et se refuse à étirer ma frame vers la droite si son contenu ne le necessite pas. Il refuse également de limiter la hauteur de cette même frame et l'étire vers le bas en fonction du contenu.

Y-a-t-il un hack à utiliser pour dompter ie ?

Bonjour,

Pour réaliser ce que tu veux, le plus simple serait de faire une structure en 4 frames de ta page.

Le 1er frame c'est ton en-tete (header)

Le 2eme c'est ton menu

Le 3eme c'est ton contenu "scrollable"

Le 4eme ton pied de page (footer).

Un premier frameset contiendra à gauche ton menu et à droite ton contenu (positionnement vertical).

Un frameset général contiendra ton en-tete, ton frameset menu+contenu, et ton pied de page. Il te suffira d'indiquer les hauteurs de chacun de ces 3 frames.

Voilà. Pas besoin de CSS, sauf pour la présentation de tes 4 éléments de ta page.

Les CSS ne me genent pas au contraire, le seul problème est que je ne les maitrise pas, surtout pour la page.

Il faut savoir :

1 / Que la propriété "height" des CSS cause davantage de problème qu'elle n'en résoud. Il faut éviter de l'utiliser. 

2 / Une structure en frame n'est pas recommandée pour le référencement d'un site. J'imagine donc que le référencement n'est pas important pour ton site.

<{POST_SNAPBACK}>

Justement, je pense que mon site est relativement bien optimisé pour le référencement, je n'ai pas envie de perdre tout le boulot fait depuis maintenant deux ans.

Le moteurs c'est 73,6% (source Xiti) du trafic de mon site

Merci pour votre contribution, si vous aviez une solution concernant le problème d'ie, ce serait parfait.

Loïc.

[jeanpierre949]

Salut.

J'ai reussi a sortir ca, je ne sais pas si ca te va. Fonctionne sous IE Ff Nscape Opera

demotest

Modifié 2 Février 2006 par jeanpierre949

[Cleden]

Salut.

J'ai reussi a sortir ca,  je ne sais pas si ca te va. Fonctionne sous IE Ff Nscape Opera

demotest

<{POST_SNAPBACK}>

Génial, c'est presque parfait Mais est-t-il possible de faire en sorte que le footer reste "collé" au bas de l'écran car là, c'est le conteneur qui s'agrandit.

J'ai pas peur que si tu ne l'ai pas fait c'est parce que c'est tout bonnement impossible. Je tente le coup on ne sait jamais

[jeanpierre949]

le probleme avec les position:absolute est que suivant les navigateurs tu auras des problemes la ce n'est pas parfait mais ca permet d'afficher dans la pluspart des nav