28173 sujets

CSS et mise en forme, CSS3

[Résolu] Faire une table des matières avec les css

Bonjour


je voudrais réaliser une table des matières paginées en css et j'ai besoin d'un coup de main.

Je ne sais pas comment relier le titre des paragraphes au numéro de la page correspondant (genre table des matières quoi).

voici mon code :
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title>Table des matières paginées</title>
  <style type="text/css">
  #table_matiere
  {
    float:left;
    border:1px solid black;
  }
  div.ligne
  {
    clear:left;
    float:left;
    padding : 5px;
  }
  .titre_paragraphe
  {
    float:left;
  }
  .index_page
  {
    float:right;
  }
  </style>
  </head>
  <body>
  <div id="table_matiere">
    <div class="ligne">
      <div class="titre_paragraphe">paragraphe 1</div>
      <div class="index_page">p1</div>
    </div>
    <div class="ligne">
      <div class="titre_paragraphe">ceci est mon deuxième paragraphe</div>
      <div class="index_page">p5</div>
    </div>
    <div class="ligne">
      <div class="titre_paragraphe">et voilà le 3ème</div>
      <div class="index_page">p7</div>
    </div>
  </div>
  </body>
</html>


et question subsidiaire quelqu'un sait pourquoi ça ne marche pas sous IE ?

merci beaucoup

PoichOU

PS : pour beaucoup de monde y surement pas beaucoup d'intérêt à faire une table de matière paginée pour du web mais pour moi oui Smiley biggrin
Modifié par PoichOU (28 Jan 2008 - 16:08)
Salut,

Dans un premier temps je t'aurais conseillé d'aller voir du coté du PHP, mais je ne suis pas sûr d'avoir compris exactement ce que tu désire.
Tu veux une table des matières dynamique? Alors PHP...
As-tu un dessin ou copie écran de ta mise en page ?
Que veux-tu dire par relier le titres et le paragraphe ?

Pour du texte je te conseille plutôt que les balise <div>, les balise <p> ou <span>...

Par exemple pour avoir ceci:

upload/10277-tabmatiere.jpg

avec ce code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Table des matières paginées</title>
<style type="text/css">
body  {
	margin: 0; 
	padding: 0; 
	color: #FFFFFF;
	background-color: #666666;
	font-family: Arial, Helvetica, Geneva, sans-serif;
	font-size: 100%;
    }
#table_matiere{
	border:1px solid black;
	background-color: #999999;
	float: left;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}
.ligne{
	margin: 0px;
}
.titre_paragraphe{
	width: 80%;
	background-color: #999933;
}
.index_page
{
	width: 20%;
	background-color: #FF9933;
}
</style>
</head>

<body>
<div id="table_matiere">
    <div class="ligne">
      <span class="titre_paragraphe">paragraphe&nbsp;1</span>
      <span class="index_page">p1</span>
    </div>
    <div class="ligne">
      <span class="titre_paragraphe">ceci&nbsp;est&nbsp;mon&nbsp;deuxième&nbsp;paragraphe</span>
      <span class="index_page">p5</span>
    </div>
    <div class="ligne">
      <span class="titre_paragraphe">et&nbsp;voilà&nbsp;le&nbsp;3ème</span>
      <span class="index_page">p7</span>
    </div>
</div><!--fin div #table des matières-->
</body>
</html>


J'ai mis un peu de couleur pour visualiser les balises...
Modifié par zest (26 Jan 2008 - 13:54)
Merci de ta réponse zest.

Pour ce qui est du dynamisme c'est fait un php no prob.

Ma question concerne plutot le code css. Mon but faire comme sur l'image :

upload/4233-Sanstitre.JPG

la dernière colonne doit faire 50px et il doit y avoir un trait entre la fin du texte paragraphe et le début de la pagination.

As tu une idée de comment faire ça ?

merkii

PoichOU
Je rejoins Laurent sur le tableau.
Ton modèle s'adaptera très bien à une mise en forme simple d'une table, dans l'idée de la piste qui suit:

[#black][b]HTML[/b][/#]

<table summary="">
	<tr>
		<td><span>Hello world!</span></td>
		<td>p1</td>
	</tr>
	<tr>
		<td><span>Hello world!</span></td>
		<td>p2</td>
	</tr>
	<tr>
		<td><span>Hello world!</span></td>
		<td>p3</td>
	</tr>
</table>


[#black][b]CSS[/b][/#]

table {width:100%;}
tr {background:url('fond.png') repeat-x 0 50%;} [#olive]/* Image d'un pixel de haut formant la ligne par répétition horizontale */[/#]
td span {background:red;}
td+td {background:teal; width:50px;}

Modifié par Benjamin D.C. (26 Jan 2008 - 18:59)
Sujet clos
Aller à