[résolu] Bordures de site fluide.

Bonjour à tous,
Je viens quasiment de finir la maquette de mon site, mais reste un dernier point important à régler et qui me pose bien des soucis.
voici l'url du dit site :ici

Comme vous pouvez le remarquer, les bordures droite et gauche entourant la partie centre du site sont manquantes.
Cette partie centrale est faite de manière relativement "fluide" pour s'adapter au contenu.

Les bordures du sites sont donc scindées en 3 parties :
- tête
- centre
- pied

et pour chacune de ces 3 parties, il y a une bordure droite et une gauche.

Pour l'entête et le pied de page, pas de problème la hauteur est fixe.
Par contre, pour la partie centre, étant variable, j'ai pensé en toute logique à mettre les hauteurs de ces bordures à 100% (s'adaptant sur la div centrale), et bien que neni ! J'ai 2 résultats différents sous ie et Firefix mais aucun n'est satisfaisant.
Je pense que celà provient d'une mauvaise hiérarchisation de mes différents éléments.
Si certains d'entre vous on le courage et l'envie d'y jeté un oeil je vous serais très reconnaissant.

Et si vous avez des suggestions graphiques ou pratique au passage, ne vous gênez pas

Je vous remerci.

P.S : si vous avez des questions concernant certaines parties du code, ou si vous voulez des précisions etc, je suis là.
Modifié par RaGe (06 Jul 2006 - 23:29)

Deux petits exemples de design fluides avec des bordures en images de fond :
Page fluide avec bordures (par ma pomme)
Design fluide avec quatre bordures (version de clb56, avec dès le départ un double conteneur).

La version de clb56 utilise moins d'image (quatre au lieu de six), mais du coup n'est pas extensible en hauteur au delà de la hauteur des images qui dessinent les bords latéraux (ici, 8000px). Avec du PNG, ça ne coûterait pas grand chose (en poids) de pousser jusqu'à 20000px, mais je ne sais pas si les performances pourraient s'en ressentir avec certains navigateurs.

Merci beaucoup mpop ! Je test la tienne de soluce et je le tag en [résolu] dès que je m'en suis sorti.

Bon, bon, bon ... ça veut pas !
Pourtant ça à l'air simple.
Pourrais-tu m'expliquer le rôle du

repeat-y right

s'il te plaît, je n'en saisi pas le fonctionnement ... repeat ça ok , mais le -y, je ne connais pas.
J'ai viré les 2 div de bordure qui ont l'air obselètes et appliqué ta technique sur la div conteneur (id centre chez ouam) mais ça a pas changé grand chose.
Bon, je vais bidouiller ça !

RaGe a écrit :
Pourrais-tu m'expliquer le rôle du

repeat-y right

s'il te plaît, je n'en saisi pas le fonctionnement ... repeat ça ok , mais le -y, je ne connais pas.

C'est donc une bonne occasion de l'apprendre.
La propriété background-repeat accepte les valeurs :
– no-repeat (l'image n'est pas répétée) ;
– repeat (l'image est répétée horizontalement et verticalement) ;
– repeat-x (l'image est répétée horizontalement) ;
– repeat-y (l'image est répétée verticalement).

Les repeat-x et repeat-y sont très pratiques, en particulier pour dessiner des bordures ou des frises.

RaGe a écrit :
J'ai viré les 2 div de bordure qui ont l'air obselètes et appliqué ta technique sur la div conteneur (id centre chez ouam) mais ça a pas changé grand chose.
Bon, je vais bidouiller ça !

Heu… comme je ne connais pas tes acquis, je ne sais pas exactement quoi te dire pour t'aider à appliquer ces modèles. Si tu es un peu perdu, ça peut être utile de commencer par ce petit tutoriel. Ça concerne un bloc en largeur fixe, avec deux images seulement, mais le principe est globalement le même, en plus simple.

youpla c'est bon, une amie m'a aidé pour bidouiller, et le pourquoi ça marchait pas c'est que ... je m'étais planté dans le path des images
L'erreur bien bête qui fait cogiter pour rien quoi !
En tout cas merci mpop c'est très clair et ça marche ... l'aventure continue !