Discussion :

[Grom61736]

Bonjour à tous,

ma compagne étant enseignante, elle dispose d'une page perso pour mettre à disposition de ses étudiants les anciens examens et contrôle.
J'ai réussi à me débrouiller jusqu'à présent mais là, je cale

La demande est d'afficher par années (une ligne par année) 3 tests : interro A, interro B et interro C.
Et le list-style-type:disc des ul étant "bien", on aimerait l'avoir devant chaque année.

Un exemple :
disc 2012 : Interro A Interro B Interro C
disc 2011 : Interro A Interro B Interro C
disc 2010 : Interro A Interro B Interro C
etc.

La distance entre interro A et interro B devrait pour bien faire être la même pour chaque ligne et être facile à changer

C'est pour réaliser ceci que je suis bloqué.
- Soit je fais une list <ul> A B C</ul> mais si je veux changer les distances, je dois tout harcoder
- Soit je fais un tableau mais je n'arrive pas à dire "pour chaque tr du table, commence par un "disc" stp merci".


Quelqu'un aurait-il une jolie solution pour mon problème ?

Merci d'avance.

[rodolphebrd]

Bonjour,

Pourrait-on s'il, vous plait, avoir une ligne de code ?

[Grom61736]

Bien sur, voici donc sous forme de liste.
Vu que je ne connais pas de moyen d'isoler au sein d'un "li" différents éléments, les espaces devrait être hardcodé dans chaque ligne.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<h3>Exams</h3>
    <hr />
    <ul>
	  <li>1999 - 2000 <a href="A.pdf">Interro</a> &nbsp; <a href="B.pdf">Exam June</a> &nbsp; <a href="C.pdf">Exam September</a></li>
	  <li>2000 - 2001 <a href="A.pdf">Interro</a> &nbsp; <a href="B.pdf">Exam June</a> &nbsp; <a href="C.pdf">Exam September</a></li>
	  <li>2001 - 2002 <a href="A.pdf">Interro</a> &nbsp; <a href="B.pdf">Exam June</a> &nbsp; <a href="C.pdf">Exam September</a></li>
    </ul>

Et voici par table, là où il est plus facile d'avoir les espacements désirés mais où je n'arrive pas à mettre un petit disc devant chaque row.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<table style = "border-spacing: 25px 5px;">
   <tr>
      <td>1996 - 1997</td> 
      <td><a href="A.pdf">Interro</a></td> 
      <td><a href="B.pdf">Exam June</a></td>
      <td><a href="C.pdf">Exam September</a></td>
   </tr>
and so on
</table>

Pour le CSS, je me suis rendu compte que la property "list-style-type:disc" est réservée aux listes et je pense que vu que tr est inline, je ne pourrais pas mettre une image de disque en "background" (d'ailleurs cette solution me semblait déjà assez rock&roll avant même de la tester )

[rodolphebrd]

Peut-être en essayant avec le pseudo-élément :before.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
td:first-child:before{
  content:"•";
  color:red;
}

[Grom61736]

C'est tout pile ce qu'il me fallait !
Juste une classe CSS et un seul ajout dans le HTML.
Merci, c'est parfait.

J'ai aussi vu que

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.classDeMaTable tr:before{
mettre point ou image
}

marche bien dans mon cas.