[HTML] Peut-on faire des tabulations comme sous Word?

Peut-on faire des tabulations comme sous Word? [HTML] - HTML/CSS - Programmation

Marsh Posté le 18-06-2003 à 15:05:47    

Je m'explique, je récupère 2 chaines de caractères Title et Content, et j'aimerais obtenir une mise en page comme cela:
 
Title1.................................Content1
Title2.................................Content2
...
TitleN.................................ContentN
 
En sachant que la longueur de chaque chaine peut etre variable.
Sous word, il fallait définir la tabulation, mais je ne vois vraiment pas comment le faire en html... ou si vous avez une autre astuce (css, php, etc.), je suis tout ouïe  :)  
 
Merci d'avance  :jap:

Reply

Marsh Posté le 18-06-2003 à 15:05:47   

Reply

Marsh Posté le 18-06-2003 à 15:10:15    

à partir du moment où tu récupères des chaines de caractère, c'est que tu fais un traitement sur le serveur, non?
 
Dans ce cas, qu'est-ce qui t'empèches de compler le vide avec un pattern de ton choix (les points)?

Reply

Marsh Posté le 18-06-2003 à 15:10:37    

avec des css :D
 
les titres ayant ces parametres de style la
 
float: left;
width: XXpx;


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 18-06-2003 à 15:17:54    

burgergold a écrit :

avec des css :D
 
les titres ayant ces parametres de style la
 
float: left;
width: XXpx;


Heu non, rien à voir... Et comment tu ajustes les points avec ça ?
 
gizmo> ce que tu proposes ne marche plus avec une police proportionnelle... Le texte à droite ne sera jamais parfaitement aligné.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 18-06-2003 à 15:21:14    

ah je croyais pas qu'il voulais conserver les "."
 
jcroyais que c'était simplement pour faire l'espacement dans le forum puisque les multiples espaces sont enlevé en mode non "code"


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 18-06-2003 à 15:44:14    

Héhé, non faut prendre en compte les points bien entendu  :)  
 
Et en effet, je voudrais que ce soit aligné à gauche (facile  :D), mais aussi à droite, en comblant le vide entre les deux chaines par des pointillés.
 

Reply

Marsh Posté le 18-06-2003 à 15:52:20    

vachement pas évident selon moi..., à la limite par des "_" ca risquerait d'etre plus facile, mais encore la_ _ _ :D


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 18-06-2003 à 15:57:07    

NeoKill@h a écrit :

Héhé, non faut prendre en compte les points bien entendu  :)  
 
Et en effet, je voudrais que ce soit aligné à gauche (facile  :D), mais aussi à droite, en comblant le vide entre les deux chaines par des pointillés.


Oui ben c'est bien les pointillés qui posent problème. On peut aligner à gauche et à droite, ça c'est facile. Le plus dur sera "d'émuler" les pointillés car ça n'est automatique en HTML.
 
Tu peux essayer toujours un truc de ce style :
 

<div class="item">
  <div class="titre">Titre 1</div><div class="contenu">Contenu 1</div>
</div>
<div class="item">
  <div class="titre">Titre 2</div><div class="contenu">Contenu 2</div>
</div>
<div class="item">
  <div class="titre">Titre 3</div><div class="contenu">Contenu 3</div>
</div>


 
Et avec les CSS correspondant :
 

div.item {
  border-bottom: 2px dotted black;
  margin-bottom: 0.25em;
  height: 1.2em;
}
 
div.titre, div.contenu {
  background-color: white;
  height: 1.4em;
}
 
div.titre {
  float: left;
}
 
div.contenu {
  float: right;
}


 
A toi d'ajuster ensuite les couleurs de fonds et les hauteur/marges de chaque éléments.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 18-06-2003 à 16:04:06    

Bon évidemment ça marche pas avec cette m**de d'IE :pfff:  
 
Avec cette CSS ça devrait aller mieux :
 

div.item {
  position: relative;
  border-bottom: 2px dotted black;
  margin-bottom: 0.25em;
  height: 1.2em;
}
 
div.titre, div.contenu {
  position: absolute;
  background-color: white;
  height: 1.4em;
}
 
div.titre {
  left: 0;
}
 
div.contenu {
  right: 0;
}


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 18-06-2003 à 16:14:50    

Merci bcp gm_superstar  :jap:  
 
Ca marche nickel, il me suffit juste de retravailler sur les hauteurs des marges.
 
Par contre, est ce qu'il serait possible de réduire la taille des points?

Reply

Marsh Posté le 18-06-2003 à 16:14:50   

Reply

Marsh Posté le 18-06-2003 à 16:15:54    

Oui c'est la dimension donnée dans border-bottom.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 18-06-2003 à 16:18:16    

Lorsque je modifie cette valeur, il me retourne non pas des pointillés mais des petits traits  :??:

Reply

Marsh Posté le 18-06-2003 à 16:37:59    

bug d'IE il me semble, il dotted = dashed pour lui
j'ai cru lire ça quelque part récemment


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 18-06-2003 à 16:51:01    

Oui, j'ai fait le test, et apparemment dotted=dashed lorsque la taille est égale à 1px (sous IE), mais je vais pas faire le difficile.
 
En tout cas, c'était bien pensé le coup des feuilles de style.
 
Merci encore  :jap:  :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed