Table des matières à réaliser

Bonjour,

J'ai une table des matières à réaliser à l'identique de celui édité dans un livre :

a écrit :

Table des matières

Avant-Propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

I. Les pionniers

Botanistes et pépiniéristes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

'Gloire des rosomanes' . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Les Hybrides remontants de Lacharme . . . . . . . . . . . . . . . . . . . . . . 15

Deux immenses succès :
+ 'Souvenir de la Malmaison' et 'Géant des batailles' . . . . . . . . 19
+ 'Les débuts d'une vieille Maison : Guillot père . . . . . . . .. . . . . . . . . . 23


II. Les rosiéristes lyonnais du Second Empire

Un grand nom : Guillot fils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
etc.

Que me conseillez-vous d'utiliser comme balises, pour le respect des règles W3C et de l'accessibilité ?

Merci pour votre aide
Modifié par MacBee (27 Jun 2008 - 13:41)

Bonjour ,

Pour ma part, j'analyserais la chose de la manière suivante : une liste de titres et de sous-titres.
En conséquence, je partirais sur un élément <ul> contenant des éléments <hn> pour les chapitres et <hn+1> pour les rubriques.

Mais bon...
A voir !

Bonjour,

Tu devrais commencer par proposer ce que tu avais en tête.

(Et pour ma part je ne procèderais pas comme Cygnus. Même si j'utiliserais assurément quelques titres, et peut-être quelques listes.)
Modifié par Florent V. (13 Jun 2008 - 11:33)

Au départ, je pensais partir sur la création d'une table avec les balises <table>, <tr> et <td>.
Mais c'est pas top.

En postant ce billet, je n'avais pas d'autres idées.

Avec une première recherche, j'ai pensé aux liste <ul>, <li>, <ul>, <li>, etc.
Je vois que Cygnus propose cette voie également.
C'est un peu mieux...

Mais avec une recherche plus approfondie, je me demande si l'utilisation des balises <dl>, <dt> et <dd> ne serait pas mieux. Mais je ne connais pas leur utilisation.

Ce qui m'ennuie c'est comment affiché les petits points avec le numéro de pages sur des pages dont la largeur peut varié ?
Le tout avec un beau rendu

Il me semble de mémoire qu'on a déjà eu cette question il y a assez longtemps... faire peut-être une petite recherche ? (de mémoire toujours il avait été question de pointillés en background de balise contenante (li ou autre) et d'un span de texte en fond blanc pour masquer le pointillé sous les mots et numéros.... à retrouver)

Côté sémantique, je ferais ça simplement avec des listes ordonnées imbriquées, sans titres. Les titres dans une tables des matières est amha une très mauvaise idée (à part le titre « Table des matières » lui-même bien sûr)

Côté design, laissons trancher les experts.

MacBee a écrit :
Mais avec une recherche plus approfondie, je me demande si l'utilisation des balises <dl>, <dt> et <dd> ne serait pas mieux.

Non, ça ne serait pas mieux.

Il faut utiliser des titres (hN) pour ce qui correspond à des titres introduisant un contenu présent dans la page. Par exemple les noms des parties. Pour le reste (noms des chapitres), on s'en fiche un peu: série de paragraphes, liste non ordonnée, etc. Les listes non ordonnées (UL) me semblent pas mal.
Par contre j'éviterais de tout inclure dans une liste globale. Ça n'apporte pas grand chose et ça complexifie la structure.

MacBee a écrit :
Ce qui m'ennuie c'est comment affiché les petits points avec le numéro de pages sur des pages dont la largeur peut varié ?

Arsène évoque un sujet récent du forum... le voici donc.

Maintenant juste une question : à quoi servent les numéros en bout de ligne (à part ressembler à un livre ?) : seraient-ce les noms de pages à ouvrir, genre www.monlivre.com/3.html ????

@QuentinC : Qu'est-ce que tu entends par amha ?
J'ai fait une recherche sr ce mot et je n'ai rien trouvé

@Arsenne : Il s'agit bien de numéro de pages d'un livre.
La table de matière que je veux afficher est celle d'une revue spécialisée dans la culture de rose ancienne. Par contre, aucun lien vers une autre page du site.

@Florent : Merci pour cette piste. Je vais tester et vous donnerez un retour
Modifié par MacBee (13 Jun 2008 - 16:43)

MacBee a écrit :
@QuentinC : Qu'est-ce que tu entends par amha ?
J'ai fait une recherche sr ce mot et je n'ai rien trouvé

Vraiment rien trouvé ?

Salut,

<acronym title="A mon humble avis">AMHA</acronym>


Modifié par Mikachu (13 Jun 2008 - 17:17)

Igor a écrit :

Vraiment rien trouvé ?

Je n'ai pas cherché sur google mais parmi les balises HTML

A pripori, l'idée d'utiliser plusieurs balises span dans une liste UL peut donner satisfaction.
Seulement sur le site que je suis en train de faire, cela ne fonctionne pas comme il le faudrait et là je fais appel aux experts :

L'instruction clear:both; vient perturber la présentation. J'explique :
Le template est constitué de quatre bloc : 1 header (id="pageHeader"), 2 colonnes (id= #container #content pour une colonne et id=#container #sidebar pour l'autre) et 1 footer (id=#footer). Simple pour le moment.

Voici la feuille de style associée (du moins un extrait):

#pageHeader {
	background: url(../img/header_bg.gif) #649b5f repeat-y;
	height: 200px;
	margin-right: 230px;
	color: #d4d4d4;
}
#pageHeader ../img {
	float: right;
	margin-left: 10px;
}
#container #content {
	background: #ffffff;
	margin-right: 230px;
	padding: 10px;
	color: #555555;
}

#container #sidebar {
	float: right;
	width: 230px;
	background: transparent;
	font-size: 
}
#footer {
	margin-right: 230px;
	padding: 5px;
	text-align: center;
	font-size: 13px;
}

L'utilisation de l'instruction float: right; dans #container #sidebar permet d'avoir la colonne de menu toujours placé à droite quelques soit la largeur de la fenêtre.
La colonne #container #content a donc une largeur dynamique en fonction de la largeur de la fenêtre.
C'est dans cette colonne que vient s'insérer le contenu du site et notamment la Table des matières (sujet du post).
Or l'instruction clear:both; contenu dans la feuille de style pour la balise span et permettre la mise à la ligne vient perturber la présentation générale de la page.

Voir le résultat sur le site en cours de réalisation

Quel est votre avis ?
Comment revoir ma présentation de ma page et permettre l'affichage de la Table des matières correctement ?

Actuellement : La table des matières s'affiche dans le footer ce qui n'est pas normal.
Modifié par MacBee (14 Jun 2008 - 15:39)

Bonjour à tous,

J'espère que la semaine sera florissante d'idée dans le domaine.
Je relance mon problème de Table des matières qui s'insère dans un template qui utilise les instructions float et clear.
L'emploi de ces instructions dans la présentation de la Table des matières vient perturber celui de la page complète.
Avis aux expert : Avez-vous des idées que palier ce défaut ?

Je bloque toujours sur mon problème d'interférence entre l'affichage de ma Table des matières et le Template.

Quelqu'un a une idée à me soumettre ?
Merci d'avance

Bonjour Macbee,

Quelques réponses t'ont été fournies me semble-t-il ?
Le lien fourni par Florent concernant les pointillés (en lieu et place de ton span vide avec bordure par exemple) notamment...
Ensuite, il faudra (re)jeter un oeil (voire les deux ) sur les propriétés float et clear et sur la notion de contexte de formatge (bonne nouvelle, Laurent Denis l'a fait pour vous )

"Eventuellement" utiliser quelques outils très utiles pour valider/corriger ton code:

html : http://validator.w3.org/
css: http://jigsaw.w3.org/css-validator/
(petit soucis avec les propriétés ciblants les images par exemple)

Les plugins pour Firefox; Firebug et la Web Developer Toolbar, sont également des alliés précieux (je te laisse faire une recherche

En espérant que cela t'aidera à avancer et que tu nous reviendras avec le résultat attendu, bon courage et à bientôt

Cdt,
Sylvain

Je te remercie Sylvain pour ta réponse.

En effet, j'avais obtenu toutes les réponses concernant la présentation de la table de matières. Mon problème ne se situait pas à ce niveau mais bien sur l'interférence de la propriété clear sur la présentation de ma page en général (template).

L'article que tu me conseilles répond à cette préoccupation.

Pour ce qui est de la validation et la correction de mon code, je connaissais ces liens et les utilise

Pour les plugins : avec la dernière version FireFox 3.0 (et oui elle est sortie officiellement) malheureusement, certains plugins ne sont plus opérationnels : Firebug, JavaScript Debugger, View Source Chart... dommage.

Cdt
Marc

Hello,

MacBee a écrit :
Pour les plugins : avec la dernière version FireFox 3.0 (et oui elle est sortie officiellement) malheureusement, certains plugins ne sont plus opérationnels : Firebug, JavaScript Debugger, View Source Chart... dommage.

Je n'utilise pas les autres extensions mais la version 1.2 de Firebug est compatible FF3.
Modifié par Heyoan (18 Jun 2008 - 15:21)

Re,

Tu n'as donc pas mis en place la solution proposée ?
Concernant Firefox, nous tentons également de nous tenir informé, néanmoins, merci pour l'info
Concernant Firebug, tu peux sans doute installer cette béta très fonctionnelle
Tu t'es servi du validateur pour cette production ?
Ravi que le lien solutionne ton problème, le sujet est-il résolu ?

Cdt,
Sylvain
*Il est rapide cet Heyoan
Modifié par 6l20 (18 Jun 2008 - 19:52)

Heyoan a écrit :
Hello,
Je n'utilise pas les autres extensions mais la version 1.2 de Firebug est compatible FF3.

Autant pour moi. Et merci pour le lien.
Pour info JavaScript Debugger est remplacer par Console²

6l20 a écrit :
Tu n'as donc pas mis en place la solution proposée ?

Si, mais sur un serveur de test.

6l20 a écrit :
Concernant Firebug, tu peux sans doute installer cette béta très fonctionnelle

C'est fait et encore merci pour le lien

6l20 a écrit :
Tu t'es servi du validateur pour cette production ?

Pas encore mais cela sera fait le moment venu

6l20 a écrit :
Ravi que le lien solutionne ton problème, le sujet est-il résolu ?

Je pense
Modifié par 6l20 (18 Jun 2008 - 19:53)