Discussion :

[6nawak]

Bonjour,

Connaitriez vous une manière optimisée de créer une ligne verticale avec du texte à sa gauche et à sa droite comme sur l'image suivante ?



Pour l'instant j'ai eu l'idée suivante : http://jsfiddle.net/ckyod5xs/ en utilisant un tableau à deux colonnes. Mais il manque toujours les petites lignes horizontales.

Auriez-vous une idée pour créer les lignes horizontales entre les textes et la grande ligne verticale ?

Y-a-t'il des manières d'optimiser ce code ?


Je vous remercie pour votre aide.

[6nawak]

Après quelques essais j'obtiens le résultat suivant :

https://jsfiddle.net/ckyod5xs/32/

Vous pouvez voir que lorsque je rajoute un peu plus de texte dans l'une des cases de ce tableau alors les autres textes se décollent loin des petits traits horizontaux.

Y'a-t-il un moyen de remédier à cela, afin que tous les textes touchent les petits traits horizontaux, comme sur l'image de mon premier poste ?

Je vous remercie pour votre aide.

[Invité]

Bonjour,

Voici une autre solution (sans <table> !) :

• http://codepen.io/jreaux62/pen/yNNKRa
• http://codepen.io/jreaux62/pen/YXXLqM (variante)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul id="arbre">
  <li>Text 1</li>
  <li>Text 2</li>
  <li>Text 3</li>
  <li>Text 4</li>
  <li>Text 5</li>
  <li>Text 6</li>
</ul>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#arbre {
  width:500px;
  margin:0 auto;
  padding:0;
  overflow:hidden;
  border:1px dotted #999; /*pour test*/
}
#arbre li {
  list-style-type:none; 
  position:relative;
  clear:both;
  width:50%;
  padding:5px 5px;
  box-sizing: border-box;/*important*/
}
#arbre li:nth-child(odd) {
  float:right;
  padding-left:25px;
  text-align:left;
  border-left:2px solid red;
  margin-right:1px;/*important : aligne les barres verticales*/
}
#arbre li:nth-child(even) {
  float:left;
  padding-right:25px;
  text-align:right;
  border-right:2px solid red;
  margin-left:1px;/*important : aligne les barres verticales*/
}
 
#arbre li:after
{
  position:absolute;
  width:20px;
  height:0px;
  content:'';
  top:50%;
  border-top:2px solid red;
}
#arbre li:nth-child(odd):after
{
    left:0;
}
#arbre li:nth-child(even):after
{
    right:0;
}
/* decoration */
#arbre li:first-letter {
  color:red;
  font-size:200%;
}