Calendrier en CSS

Bonjour,

J'essaie d'afficher un calendrier HTML/CSS en me basant sur ce tutorial.

J'ai un problème avec les margin-left sensés permettre d'afficher la case correspondant à un jour dans la bonne colonne. Le margin-left me crée une marge avec la case précédente.

Feuille de style associée :

#calendar li {
    list-style-position: inside;
    font-weight: bold;
    width: 88px;
    height: 88px;
    border: 1px solid #999;
    float: left;
    background-color: #fff;
    padding: 5px;
    overflow: hidden; }

#calendar li ul {
    margin: 0;
    padding: 0;
    clear: both; }
#calendar li ul li {
    list-style: none;
    font-weight: normal;
    float: none;
    border: none;
    padding: 5px 0;
    margin: 0; }
    
#calendar li:hover ul li, #calendar li.hover ul li {
    position: absolute;
    width: 150px;
    margin-left: -38px;
    height: auto;
    background-color: #8cf;
    border: 1px solid #069;
    padding: 10px;
    z-index: 10; }

Le résultat est le suivant :


Ensuite j'ajoute le code CSS permettant le décalage des cases suivant le jour de la semaine :

#calendar li.sunday {
    margin-left: 0; }
#calendar li.monday {
    margin-left: 100px; }
#calendar li.tuesday {
    margin-left: 200px; }
#calendar li.wednesday {
    margin-left: 300px; }
#calendar li.thursday {
    margin-left: 400px; }
#calendar li.friday {
    margin-left: 500px; }
#calendar li.saturday {
    margin-left: 600px; }

Le margin-left doit permettre d'afficher la case sur la bonne colonne, en fonction du jour de la semaine (colonne 1 pour le dimanche, colonne 2 poour le lundi, etc.).

Le résultat est le suivant :


Il va sans dire que cet affichage ne me convient pas. J'attend un rendu qui ressemble à un calendrier, comme ici.
Modifié par Felipe (03 Mar 2009 - 10:46)

Bonjour,

note à propos du Forum: il ne faut pas d'accolade autour de l'URL avec la balise BBCode [ url=http] ... [ /url] (le BBCode n'a pas le comportement des attributs HTML)

Bonjour,
Pourquoi se compliquer la vie avec des listes?
La représentation d'un calendrier est l'exemple parfait de ce qui peut (pour ne pas dire doit) se mettre en page via une structure en tableau...
C'est pas parce qu'on a décider de faire des mises en pages sans tableaux qu'ils faut les bannir à jamais!

Donc pas de solution en vue...

Si : comme on t'a dit, faire un tableau, exemple sur ce site.

<table summary="Calendrier">
<caption><a href="/index.php?2008/11" title="novembre 2008">«</a> janvier 2009</caption><thead><tr><th scope="col"><abbr title="lundi">lun</abbr></th><th scope="col"><abbr title="mardi">mar</abbr></th><th scope="col"><abbr title="mercredi">mer</abbr></th><th scope="col"><abbr title="jeudi">jeu</abbr></th><th scope="col"><abbr title="vendredi">ven</abbr></th><th scope="col"><abbr title="samedi">sam</abbr></th><th scope="col"><abbr title="dimanche">dim</abbr></th></tr></thead>
<tbody><tr><td> </td><td> </td><td> </td><td>1</td><td>2</td><td>3</td><td>4</td></tr>

<tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
<tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td><a href="/index.php?2009/01/18">18</a></td></tr>
<tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>

<tr><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td> </td></tr>
</tbody>
</table>