[Résolu] Séparation verticale CSS

Bonjour,

j'ai actuellement un petit problème dont je ne trouve pas la réponse sur l'internet.

Je souhaiterais séparer ma navigation de gauche avec le contenu de droite par une ligne qui descend du debut de ma liste jusqu'en bas de la page.

Pour faire simple je vais vous montrer des images : http://i42.tinypic.com/juzju0.jpg

Actuellement, j'applique un contour sur la list ul (qui fait 184px et 202px quand c'est ouvert).

(si je modifie la height de la list UL je me retrouve avec une bordure qui grandit, mais je n'arrive pas a lui mettre comme valeur {taille de la page})

Le problème est que j'aimerais appliquer une barre qui descend jusqu'en bas de page et qui colle ces blocs (le contour qui continue jusqu'en bas de page quoi).

Vu que j'ai une animation au clic, la taille de ma div qui entoure cette liste est plus grande que la position des bords sur lesquels je souhaiterais appliquer cette barre verticale.

Avez-vous une idée?

Merci d'avance.

Bonne journée,
David.
Modifié par lutall (29 Mar 2012 - 09:53)

Bonjour et bienvenue,

1ère solution : la technique appelée faux-columns (résumé : la bordure est portée par le parent qui fait forcément la taille du plus grand des 2. Il y a des contraintes comme devoir connaître la largeur des enfants ... edit: enfin quand je dis bordure, je veux dire liseré positionné à NNNpx du bord gauche

2e solution : display: table; pour le parent, display: table-cell; vertical-align: top; pour les 2 colonnes (IE8+)

D'autres solutions en CSS3 mais elles ne font ici pas mieux que display: table; avec un support moindre.

edit2: y a à faire avec :after et :before (2 liserés associés à .col1:after à droite et .col2:before à gauche, superposés et le plus grand des 2 continuera jusqu'en bas), mais comme le support est également IE8+ ça ne t'avancera à rien en pratique.
Modifié par Felipe (29 Mar 2012 - 10:27)

Le problème est que je ne connais pas forcément la taille (hauteur px) du parent ou de l'enfant, car tout cela a pour but de développer un portail dynamique et administrable, donc l'utilisateur pourrait soit mettre beaucoup de catégories et peu de contenu ou inversement..

J'ai aussi une contrainte de validité IE.6.

La 2eme solution permet d'avoir une séparation entre les 2tables-cell uniquement ? et pas ailleurs ?

Merci beaucoup de votre aide.
Modifié par lutall (29 Mar 2012 - 10:31)

Mince, j'avais mal compris la technique faux-columns, effectivement je connais le plus large des deux. Je vais essayer ça, merci beaucoup, ça à l'air très simple et valide pour IE6

Question peut-être bête :

a écrit :
edit: enfin quand je dis bordure, je veux dire liseré positionné à NNNpx du bord gauche

Comment déplacer la bordure ?

Ou peut-être faut-il mettre une image de 1px qui se repete en y ?
Modifié par lutall (29 Mar 2012 - 11:06)

Salut,

Felipe a écrit :
2e solution : display: table; pour le parent, display: table-cell; vertical-align: top; pour les 2 colonnes (IE8+)

Il n'est pas nécessaire d'appliquer la déclaration display: table au parent, puisque les navigateurs, lorsqu'ils ont affaire à une propriété display dont la valeur a un rapport avec l'affichage à la manière d'un tableau, créent automatiquement, si besoin, des conteneurs virtuels permettant de compléter l'affichage des éléments sous forme de tableau.

Il existe également une troisième solution : mettre les deux colonnes en positionnement flottant, leur donner un padding-bottom considérable (2000 pixels, par exemple) doublé d'un margin-bottom négatif de même valeur (-2000 pixels si padding-bottom est fixée à 2000px) et doter le parent d'un contexte de formatage (overflow: hidden, doublé d'un height: 1% pour IE 6).

lutall a écrit :
Comment déplacer la bordure ?

La propriété background-position est ton amie.

lutall a écrit :
Ou peut-être faut-il mettre une image de 1px qui se repete en y ?

Effectivement, une image de 1 pixel de haut, qui se répète verticalement.

Merci pour cette 3ème technique, je vais les essayer pour voir lesquelles marchent le mieux sur internet explorer 6... (Super les entreprises en retard )
Modifié par lutall (29 Mar 2012 - 12:00)

a écrit :
Il existe également une troisième solution : mettre les deux colonnes en positionnement flottant, leur donner un padding-bottom considérable (2000 pixels, par exemple) doublé d'un margin-bottom négatif de même valeur (-2000 pixels si padding-bottom est fixée à 2000px)

De manière générale il est mieux d'éviter ce genre de techniques, celles qu'un être humain normalement constitué ne sera pas en mesure de comprendre… si tu peux éviter, évite.

J'ai utiliser la premiere technique du coup en créant un background-image sur ma div parent aux deux contenus comme ça la longueur est calculé automatiquement.

Puis je met un background-position a ma ligne en %.

Et voila. Enfin bref, un gros merci et un petit résolu sur le topic !