[CSS][HTML] Nombre d'onglets variable
Bonjour,
Je vous explique mon souhait :
Dans le cadre d'un projet de développement d'un site pour un club de foot, je dois présenter différents éléments spécifiques à chaque équipe du club, notamment les calendriers.
Une seule page PHP est nécessaire, puisque la différenciation entre les équipes se fait par le biais d'ID.
Enfin bref, cela n'est pas le problème...
Je voudrais donc pour présenter les calendriers, mettre cela sous la forme d'un menu à onglets, ou chaque onglet représente une journée. Lorsque l'on clique sur l'onglet 5, cela présente les matchs de la 5e journée.
J'ai donc essayé avec CSS Tabs et avec un système d'onglets basé sur un tableau.
Voilà enfin mon problème :
Il faudrait que les dimensions des onglets du menu soit en rapport avec le nombre de journées présentées.
Par exemple, les onglets pour une présentation de 6 journées seront plus grands qu'un présentation de 22 journées.
Et tout cela doit se faire dynamiquement, puisqu'il ne s'agit que d'une seule et même page, personnalisée selon l'ID soumis.
De même, il faudrait que la taille utilisée par tous les onglets soit la même, quelque soit le nombre d'onglets.
En essayant de passer par un tableau+CSS, cela convenait pas mal, car je m'était dit que la taille de chaque td correpondrait à (100/nb de journées), mais ils ne veulent pas se redimensionner, ils restent de largeur fixe, quelque soit la valeur mise.
Je vous met le CSS et le code appliqué :
CSS :
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
61
| .menu a {
width: 100px;
height: 20px;
display: block;
text-align: center;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
text-decoration: none;
color: #000;
background: #FFFFFF;
}
.menu a:hover {
background: #D00C0C;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
}
.menu a:active {
background: #D00C0C;
color: #FFFFFF;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
}
.fondonglet {
font-family: verdana, arial, sans-serif;
font-size:12px;
text-align: right;
padding-right: 5px;
color: #FFFFFF;
background-color: #D00C0C;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
.fondonglet_blanc {
font-family: verdana, arial, sans-serif;
font-size:12px;
text-align: right;
padding-right: 5px;
color: #000000;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
a.onglet {
font-family: verdana, arial, sans-serif;
font-size:10px;
font-weight: bold;
text-decoration: none;
color: #222;
}
a.onglet:hover{
text-decoration: underline;
color: #FFFFFF;
} |
HTML + PHP :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <table width="95%" border="0" align="center" class="menu">
<?php
$recup_calendrier = mysql_query("select * from calendrier where idchampionnat='$idchampionnat' GROUP BY journee ORDER BY journee ASC",$connectjv) or die(mysql_error());
$nb_onglets = mysql_num_rows($recup_calendrier);
$taille_onglet = floor(100 / $nb_onglets);
echo "<tr>";
$i=0;
while($affiche_calendrier = mysql_fetch_array($recup_calendrier)) {
$i++;
?>
<td width="<?php echo $taille_onglet; ?>%"><a href="equipes.php?equipe=<?php echo $idequipe; ?>&journee=<?php echo $affiche_calendrier['journee']; ?>#calendrier" class="onglet"><?php echo $affiche_calendrier['journee']; ?>e</a></td>
<?php } ?>
</tr>
<-- Reste du code, qui fonctionne -->
</table> |
Est-ce que vous voyez quelque chose qui pourrait bloquer ?
Merci de votre aide :D
