Discussion :

[gssoul]

Bonjour,

Je poste ce message pour avoir confirmation (ou infirmation :/) à savoir s'il est bien possible de faire avec du CSS une page internet qui aurait un bloc central fixe avec ses deux côtés qui s'adapte à la largeur du navigateur. Sur ce bloc central, une entête de hauteur fixe, un corps à hauteur variable, et un pied de page à hauteur fixe qui reste toujours en bas de page (et qui s'adapte aussi au navigateur).

Dans un deuxième temps, serait-il possible de faire une mise en forme (image avec des lignes de plusieurs couleurs) qui passerait par l'entête du bloc central, puis par tout le côté gauche (de haut en bas de la page, et qui s'adapterait donc à la hauteur que prend le corps du bloc central) et enfin par le bas de page du bloc central ?

Désolé si je n'ai pas été clair, n'hésitez pas à me demander des précisions.
Merci d'avance pour m'avoir lu et pour vos réponses.

[lautrejojo]

Yo!

À première vue, j'ai envie de te répondre oui. Par contre, si tu pouvais nous faire ne serait-ce qu'un petit schéma, çà nous permettrai d'être bien sûr d'imaginer la même chose que toi ;-).

Le seul bémol : l'image qui traverse plusieurs div, c'est possible de plusieurs manières, mais çà peut vite devenir très difficile. Tu peux avoir quelque chose de très statique en collant une énorme image en fond (mais c'est rarement très jolie / efficace). Tu peux aussi faire de "savant calculs" en fractionnant l'image dans tes différentes div (ici par exemple , la bannière est une grande image qui a été fractionnée entre 3 éléments au moins).
Par contre, dès lors que tu utilises une structure qui n'est pas "répétable", il devient compliqué d'avoir un fond adaptable.

Dans ton cas, il me semble qu'il faudrait avoir un bout d'image en entête (facile), un bout d'image en pied de page (facile). Par contre, c'est toute la zone verticale de gauche qui va poser problème, puisque çà hauteur n'est pas fixée. Il te faut donc une image qui soit décomposable en un seul motif se répétant sur y. L'idéal serait que tes "lignes" soient alors complètement verticales.


Promis, si tu peux nous faire un dessin, on pourra te donner une affirmation (/infirmation) plus franche ;-)

Tiens nous au courant.

[ledisciple]

es ce que ceci peut-aider pour la première demande ?

http://www.developpez.net/forums/d73...cs-meme-ligne/

http://j-willette.developpez.com/tut...osition-fixed/

Pour le deuxième temps, je verrais un div en background ( genre z-index ) que tu pourrais positionner à volonté par dessous tes autres blocs .

C'est une vrai qu'un schéma serai le bienvenue

[gssoul]

Merci tout d'abord pour vos réponses, vous avez bien compris ce que je voulais dire
J'ai fait deux schémas pour une meilleure compréhension encore :



Donc, les colonnes jaunes des extrémités devraient être de même taille et s'adapter à la largeur du navigateur avec en plus une largeur minimum pour ne pas faire disparaitre les deux lignes (et là je coince dans le code :/, dès que je mets une largeur minimum la colonne ne s'adapte plus en largeur au navigateur...) , la colonne du milieu à une largeur fixe, une entête et pied de page fixe en hauteur, mais un corps qui s'adapte au contenu avec une hauteur minimum.

Pour vous montrer comment j'ai commencé à coder, j'ai rajouté les blocs sur le même schéma (3 blocs par colonne) :



Arrivé ici, j'ai deux problèmes :
- Quand mon bloc 2 de la 2ème colonne (donc du corps central) s'adapte au contenu et prend une certaine hauteur, les hauteurs des blocs 2 des colonnes 1 et 3 (colonnes jaunes) ne prennent pas la même hauteur, normal me direz vous car il n'y a pas de contenu mais très embêtant pour moi
Les lignes traversant les différents blocs ne sont pas vraiment un problème du moment que les blocs sont de même niveau, de plus il n'y a que le bloc 2 de la première colonne qui grandit verticalement, et un repeat-y fera bien l'affaire sur le background, d'où l'importance de ce point
- Mon deuxième problème est que je n'arrive pas à faire en sorte que les colonnes jaunes (1 et 3) s'adaptent à la largeur du navigateur, en ayant une largeur minimum pour ne pas effacer les lignes. J'ai bien vu des exemples avec du code "... : table" (je n'arrive plus à mettre la main dessus), mais est-ce qu'il permet de faire tout cela ?

Edit : Il s'agit d'un "display:table" en fait ^^