[W3C] Points de suites variables pour une tabulation

Version imprimable

09/06/2005, 11h07
jacma

[W3C] Points de suites variables pour une tabulation

Bonjour
Je cherche à réaliser un sommaire, tel qu'il apparaîtrait sous word, soit:

Citation:

LIBELLE CHAPITRE 1 ...................... page x
LIBELLE CHAPITRE 256 .................. page xx

Libellé doit être aligné à gauche et page x à droite. Là, pas vraiment de problème, il y a plusieurs fàaçon d'y parvenir. Par contre, je n'arrive pas à faire les points de suite pour la "tabulation" entre libellé et la page. La difficulté provient de ce qu'l y a une distance variable entre les deux, et donc un nombre de points variables. Avez vous une idée?
Merci de votre concours.
09/06/2005, 11h52
El Riiico
J'ai pas encore testé, mais je me disait que ça devait être possible de jouer avec les CSS.

Ton sommaire, c'est une liste avec pour chaque ligne le libelle dans un span et le n° de page dans un autre ? Avec des float ?

Essais de jouer avec border-bottom:1px dotted #000; en te débrouilant pour la cacher dans tes spans.

Par exemple, en appliquant sur les span :
Code:

1 2 3 /* Pour recouvrir la bordure en dotted */ margin-bottom:-1px; border-bottom:1px solid #fff;
Bon, j'ai pas testé, ça reste un peu théorique. Si le type dotted ne donne pas un bon effet, ou est mal supporté par IE, tu peux essayer avec dashed. Ou alors faire la même chose avec une petite image en background à la place : background:url('liens_vers_image.png') x-repeat bottom left;

Tiens nous a courant, je vais avoir besoin de faire exactement la même chose dans pas longtemps.
09/06/2005, 14h39
jacma
Citation:

Envoyé par El Riiico

J'ai pas encore testé, mais je me disait que ça devait être possible de jouer avec les CSS.

J'ai essayé beaucoup de choses, dans tous les sens, mais sans résultat.

Citation:

Ton sommaire, c'est une liste avec pour chaque ligne le libelle dans un span et le n° de page dans un autre ? Avec des float ?

Oui. L'indication de la page est calée à droite.
Citation:
Essais de jouer avec border-bottom:1px dotted #000; en te débrouilant pour la cacher dans tes spans.
Par exemple, en appliquant sur les span :

Code:

1 2 3 /* Pour recouvrir la bordure en dotted */ margin-bottom:-1px; border-bottom:1px solid #fff;
Cela insère les points sous les span, mais pas entre. Ou je n'ai pas trouvé le moyen.

Citation:

Tiens nous a courant, je vais avoir besoin de faire exactement la même chose dans pas longtemps.

Je continue de chercher. Si tu trouve quelquechose de ton côté...
Merci

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Test Sommaire</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<style type="text/css">
                #sommaire{
                        float:left;
                        margin:1em 0;
                        padding:0;
                        list-style-type:none;
                }
                #sommaire li{
                        position:relative;
                        float:left;
                        clear:left;
                        margin:.2em 0;
                        padding:0;
                        width:100%;
                        border-bottom:1px dashed #000;
                        z-index:1;
                }
                #sommaire li span{
                        position:relative;
                        margin-bottom:-.25em;
                        background-color:#fff;
                        z-index:2;
                }
                #sommaire li span.libelle{
                        float:left;
                        padding-right:.2em;
                }
                #sommaire li span.num_page{
                        float:right;
                        padding-left:.2em;
                }
                hr{
                        clear:both;
                        visibility:hidden;
                }
                </style>
	</head>
	<body>
		<ul id="sommaire">
			<li>
				<span class="libelle">Chapitre 1</span> <span class="num_page">page 1</span>
			</li>
			<li>
				<span class="libelle">Chapitre 2</span> <span class="num_page">page 6</span>
			</li>
			<li>
				<span class="libelle">Chapitre 3</span> <span class="num_page">page 8</span>
			</li>
			<li>
				<span class="libelle">Chapitre 4</span> <span class="num_page">page 11</span>
			</li>
		</ul>
		<hr />
	</body>
</html>

09/06/2005, 20h09
jacma

Merci. Impec!
10/06/2005, 17h26
jacma

Bonjour
Si tu veux voir le résultat, tu peux aller http://gestinfo.fr/static.php?op=ecr..._p0.htm&npds=1.
Par la même occasion, celà fait connaître ce site que j'ai mis en ligne il y a quelques jours :wink: .
Et je suis demandeur de vos avis et suggestions.
Merci.
11/06/2005, 00h33
El Riiico

J'en pense que pour tout développeur web un peu intéressé par les standards, ça donne envie de fuir en courant. Techniquement, il y aurait beaucoup de choses à améliorer ; sans même parler de mise en page full CSS ou de code W3C valide. Genre l'effet de roll hover sur les boutons qui se fait avec une latence parce que les images ne sont pas préchargées, les labels autourd des options de formulaires, etc... j'ai juste regardé rapidement.

Sinon pour le design, c'est... moche. Pas assez de contrastes, le bleu est trop uniforme. Je te conseille de faire quelques tests avec cet outil, il permet d'éviter sans trop d'efforts les erreurs de base en design web.

Pour le contenu, je peux pas juger, la gestion-compta j'y connais rien.

Bon, je me doute bien que pour le moment, t'as surtout dû te concentrer sur la configuration de ton CMS (NPDS ? Je connais pas). Je sais que pour nous autres codeurs, le design c'est la couche de peinture qu'on met à juste à la fin. Mais le produit a beau être bon, si c'est trop moche, les visiteurs s'enfuient sans chercher plus loin (il suffit de voir le nombre de visiteurs qui ne dépassent jamais la page d'accueil d'un site, c'ets effarant). Et pour le moment, ton site il fait vieillot.