Intégrer des indentations dans la page

Version imprimable

20/11/2013, 13h38
romegonic

Intégrer des indentations dans la page
J'aimerais aligner verticalement plusieurs informations de plusieurs lignes, quelque soit le texte avant, exemple :
```
première ligne            voici l'endroit où je veux passer
2ème ligne                j'y suis mais j'ai du créé plus d'espaces pour aligner
suite                     encore un nombre d'espaces différent
baloubaloubaloubalou      alignement manuel
```
Bref vous comprenez, j'ai besoin d'une class .marge à qui je pourrais dire : quelque soit l'endroit ou tu te trouves tu passes à X emplacements de caractères à partir du début de la ligne.

Le css permet de faire cela ?

Merci par avance pour vos réponses.

edit : le forum n'accepte pas mes   pour bien aligner mes 2èmes parties de phrases ... :( j'espère que vous comprendrez mon post néanmoins ...
20/11/2013, 13h58
rodolphebrd

Bonjour,

avec un peu de code on pourrait y voir plus clair.

Pour l'instant je verrais un tableau avant de penser à une solution en CSS.
20/11/2013, 14h18
Torgar

Essaye un <span>première ligne</span> avec display: inline-block et une largeur fixe. Idem pour toutes les lignes.

Si j'ai bien compris le problème...
20/11/2013, 14h47
Bovino

Au pire, il existe l'entité &emsp;, mais ça ne correspond pas à une véritable indentation...
21/11/2013, 15h25
romegonic

Citation:

Envoyé par rodolphebrd

Bonjour,

avec un peu de code on pourrait y voir plus clair.

Pour l'instant je verrais un tableau avant de penser à une solution en CSS.

Oui le tableau à border=0 peut être une solution de contournement avec des magouilles à base de <td>, néanmoins on doit dès lors faire face aux problèmes liés aux tableaux (width, etc ...) et plus aux problèmes liés à un texte.

Je sais bien que html est ultra basique mais bon je pensais que d'autres personnes avaient déjà rencontré ce genre de besoin et strouvé une solution pereine :-(

Car créer une fonction qui détermine le format de l'écran et donc la taille d'une ligne, pour ensuite bidouiller sur des tab manuelles, c'est un peu navrant non ? ^^

@romegonic: quelles magouilles ou bidouilles?
Exemple avec les deux solutions proposées plus haut :

Code:

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
<!doctype html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Texte à marge fixe</title>
  <style type="text/css">
.marge {
  min-width: 20em;
}
td {
  border: collapse;
}
span {
  float: left;
}
  </style>
</head>
<body>
  <!-- Avec TABLE -->
  <table>
    <tr>
      <td class="marge">du texte</td>
      <td>foo</td>
    </tr>
    <tr>
      <td class="marge">encore du texte</td>
      <td>bar</td>
    </tr>
  </table>
  <!-- Avec SPAN -->
  <p>
    <span class="marge">du texte</span>
    foo
  </p>
  <p>
    <span class="marge">encore du texte</span>
    bar
  </p>
</body>
</html>