Discussion :

[Artemus24]

Salut à tous.

Je désire afficher une liste de couple, disons pour simplifier une clef et une valeur issue de php, dans une balise div.
Pour ce faire, je teste avec isset() l'existence de la clef et j'affiche la clef ainsi que la valeur.

Le problème est que la valeur risque parfois d'être très longue et de déborder sur la ligne suivante.
Pour une question de présentation, je désire afficher la clef à gauche et la valeur à droite.
Sur deux colonnes, c'est possible, sauf que en cas de débordement de la valeur, ma présentation est complètement décalée.

Le mieux est de donner l'exemple de présentation que je désire obtenir :

Code :

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

1
2
3
4
5
6
7
8
 
aaaaaaaaa : bla bla bla
      bbb : bla bla bla bla bla bla bla
            bla bla bla bla bla bla bla
            bla bla 
    ccccc : bla bla bla
 dddddddd : bla bla bla bla bla bla bla
            bla bla bla bla bla bla

Pour la valeur "bbb", (ainsi que dddddddd) il y un débordement de la valeur sur les deux lignes suivantes.
De ce fait, je désire obtenir un alignement sur les deux points comme le montre mon exemple.

Si j'utilise word-break avec break-word, le découpage se fait bien sur le mot et il y a bien le passage à la ligne suivante.
Sauf que le texte s'aligne complètement à gauche, c'est-à-dire en dessous de la valeur, ce que je ne veux pas car c'est illisible.

La première colonne est justifié à droite (clef et et la seconde colonne est justifié à gauche (valeur).
Si je gère séparément, la clef (par un isset("clef")) coté gauche et coté droite, en cas de débordement, j'aurai un décalage entre l'alignement de la clef sur la valeur, qui elle sera sur plusieurs lignes.

Comment en css obtenir cette gestion du débordement ainsi que cette présentation ?

Merci.
@+

[Cigis]

Bonjour,
pourquoi ne pas utiliser une grille à deux colonnes, display:grid; ?

[Artemus24]

Salut Cigis.

Je ne sais pas si vous avez bien compris mon problème.
Dans la codification html, chaque couple (clef ; valeur) est positionné sur la même ligne.
Or il se trouve que parfois, la valeur est bien plus grande que la taille maximale de la seconde colonne.
Il y a donc débordement sur les lignes suivantes, comme dans mon exemple.

Je risque d'avoir un décalage à l'affichage de la clef (bbb) dans la première colonne, qui est sur 1 ligne, avec celle de la valeur dans la seconde colonne, qui est sur 3 lignes.

@+

[Cigis]

Et bien la solution est une grille "grid" , avec une cellule pour la clef, et une cellule pour la valeur, les deux seront bien sur une même ligne, la hauteur de la ligne s'adaptera, et autant de lignes que nécessaire s'ajouteront
Qu'est ce qui ne convient pas ?
Cellule et Valeur seront dans la même row de la grid, mais dans deux div différentes

[Artemus24]

Salut Cigis.

Cela revient à faire un tableau, ce que je voulais éviter.

@+

[Artemus24]

Salut Cigis.

J'ai trouvé ma solution.

En premier lieu, il me faut un conteneur général, par exemple la balise "<main>".
Dans ce conteneur, je déclare les lignes comme ci-après :

Code html :

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
<main>
<?php
if (isset($_SERVER['REMOTE_ADDR']))                     echo "REMOTE_ADDR............:<div>".$_SERVER['REMOTE_ADDR'].          "</div><br />";
if (isset($_SERVER['SERVER_ADDR']))                     echo "SERVER ADDR............:<div>".$_SERVER['SERVER_ADDR'].          "</div><br />";
if (isset($_SERVER['LOCAL_ADDR']))                      echo "LOCAL  ADDR............:<div>".$_SERVER['LOCAL_ADDR'].           "</div><br />";
if (isset($_SERVER['HTTP_CLIENT_IP']))                  echo "HTTP CLIENT IP.........:<div>".$_SERVER['HTTP_CLIENT_IP'].       "</div><br />";
if (isset($_SERVER['HTTP_X_FORWARDED_FOR']))            echo "HTTP X FORWARDED FOR...:<div>".$_SERVER['HTTP_X_FORWARDED_FOR']. "</div><br />";
echo "</div><br />";
if (isset($_SERVER['HTTP_ACCEPT']))                     echo "HTTP_ACCEPT............:<div>".$_SERVER['HTTP_ACCEPT'].          "</div><br />";
if (isset($_SERVER['HTTP_COOKIE']))                     echo "HTTP_COOKIE............:<div>".$_SERVER['HTTP_COOKIE'].          "</div><br />";
if (isset($_SERVER['HTTP_FORWARDED']))                  echo "HTTP_FORWARDED.........:<div>".$_SERVER['HTTP_FORWARDED'].       "</div><br />";
if (isset($_SERVER['HTTP_HOST']))                       echo "HTTP_HOST..............:<div>".$_SERVER['HTTP_HOST'].            "</div><br />";
if (isset($_SERVER['HTTP_PROXY_CONNECTION']))           echo "HTTP_PROXY_CONNECTION..:<div>".$_SERVER['HTTP_PROXY_CONNECTION']."</div><br />";
if (isset($_SERVER['HTTP_REFERER']))                    echo "HTTP_REFERER...........:<div>".$_SERVER['HTTP_REFERER'].         "</div><br />";
if (isset($_SERVER['HTTP_USER_AGENT']))                 echo "HTTP_USER_AGENT........:<div>".$_SERVER['HTTP_USER_AGENT'].      "</div><br />";
echo "</div><br />";
?>
</main>

Pour effectuer l'alignment sur les deux-points, dont j'ai besoin, je me sers de la balise "<div>". J'aurai pu mettre aussi la balise "<span>".

Voici ce que j'ai mis dans ma feuille de styles :

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
main {
		display				: block;
		margin				: 0 auto 25px auto;
		width				: 600px;
		font-family			: "courier new";
		background-color		: lightpink;
		word-break			: break-all;
}
 
div {
		display				: inline-block;
		vertical-align			: top;
		margin-left			: 5px;
		width				: 360px;
}

Le "word-wrap" permet de faire le découpage de la ligne trop longue et d'effectuer un passage à la ligne suivante.
La ligne impacté se trouve dans la balise "<div>".
Je suis obligé de la transformer en "inline-block".
Le "inline" sert à ce que la valeur reste sur la même ligne que la clef, sinon elle passe à la ligne suivante, ce que je ne veux pas.

Le margin-left n'est pas nécessaire.
J'ai fait le choix de coller la balise "<div>" juste après les deux-points. J'aurai pu insérer un espace entre.
Par contre, je suis obligé de mettre une largeur à ma balise "<div>", sinon, la valeur se retrouve en dessous de la clef, ce que je ne veux pas.

Il n'est pas nécessaire d'utiliser "grid", qui est trop lourd pour ce que je désirai faire.
Il est pourtant recommander de ne pas utiliser les tableaux, cela ne veux pas dire qu'il faut le substituer par le grid.

@+