barre vertical pour séparer contenu gauche de celui du droit [Résolu]

[beta1204]

Bonjour à tous,

voila j'ai un petit problème en CSS/HTML, j'aimerais comme dans la pièce jointe créer une séparation avec une barre verticale (encadré en rouge) entre ma partie de gauche et ma partie de droite de mon site.

Le problème est que j'y arrive si je fixe moi même une hauteur à la barre mais je souhaiterais qu'elle change de taille en fonction du contenu de ma partie gauche.

Auriez-vous des idées de comment faire pour réaliser ça ??

Merci à vous.

[ornitho13]

Salut,

tu peux mettre un border-right sur ta partie de gauche, comme ça la barre fera la même hauteur que ton contenu de gauche

[beta1204]

Merci ornitho13, j'y avais pensé mais le problème est que je ne pourrais pas mettre la barre que je souhaiterais (créé sous photoshop avec un léger effet d'ombre). Cette commande permet de mettre juste une barre qui sera créé automatiquement non ?

Merci

[Patrice.H]

Tu peux tout simplement utiliser height:100% sur ton image avec une position relative. Cela devrait l'agrandir a 100% de la hauteur de son conteneur, puis la placer à droite.

Le défaut dans cette affaire c'est qu'étirer une image risque de te faire un rendu pas très propre. Je te conseille plutôt la solution d'ornito13 avec un box-shadow pour l'ombre.

[silverockets]

Sinon, tu peux créer ton image à la largeur de ta barre et coller un petit :
background : url('le/chemin/de/ton/image') repeat-y;
Ca devrait faire l'affaire logiquement
Redis nous si ca colle !

[Patrice.H]

silverrockets > J'ai pensé au repeat-y également, mais la forme même de sa barre (voir capture) ne le permet pas: arrondie sur les extrémités ect...

[silverockets]

Pardon, j'avais pas regardé la barre...
Il faut faire trois images
La première qui contient le dégradé du haut et mettre ca comme background sur le titre (dans l'exemple : "quelques offres").
La deuxième qui contient le dégradé du milieu, celui que ne bouge pas et sur lequel tu peux mettre un repeat-y.
Enfin, le troisième qui contient le dégradé du bas et comme pour celui du haut, il faut le mettre comme background pour le contenu du bas (s'il y a un contenu fixe, c'est plus pratique).
Du coup il faut adapter l'image à la largeur du contenu si celui-ci est fixe, sinon, il faut l'adapter à la largeur de la barre de droite et faire la meme chose que décrit au dessus).
C'est pas ce qu'on fait de plus propre puisqu'il faut travailler avec des contenus à taille fixe mais c'est efficace. Peut-etre y a t il une solution moins "degueu" que ca.
J'espere avoir été clair. Mais je sais pas comment expliquer ca différemment.
Si quelqu'un a compris, peut-etre aura-t-il une explication plus claire que la mienne... Avis aux amateurs.

[beta1204]

Envoyé par silverockets

Pardon, j'avais pas regardé la barre...
Il faut faire trois images
La première qui contient le dégradé du haut et mettre ca comme background sur le titre (dans l'exemple : "quelques offres").
La deuxième qui contient le dégradé du milieu, celui que ne bouge pas et sur lequel tu peux mettre un repeat-y.
Enfin, le troisième qui contient le dégradé du bas et comme pour celui du haut, il faut le mettre comme background pour le contenu du bas (s'il y a un contenu fixe, c'est plus pratique).
Du coup il faut adapter l'image à la largeur du contenu si celui-ci est fixe, sinon, il faut l'adapter à la largeur de la barre de droite et faire la meme chose que décrit au dessus).
C'est pas ce qu'on fait de plus propre puisqu'il faut travailler avec des contenus à taille fixe mais c'est efficace. Peut-etre y a t il une solution moins "degueu" que ca.
J'espere avoir été clair. Mais je sais pas comment expliquer ca différemment.
Si quelqu'un a compris, peut-etre aura-t-il une explication plus claire que la mienne... Avis aux amateurs.

Ok impeccable j'ai compris ton explication ça fonctionne.
Merci à vous