Bonjour,

Je souhaiterais dans un tableau, créer pour chaque case une checkbox (invisible) et lorsque cette dernière est cochée, le pseudo de la personne qui a cochée soit affichée dans un style "tampon".

Voici mes question :

1- Comment faire pour que la checkbox soit centrée par rapport à la cellule?

2- Comment être sur que le pseudo ne soit pas "tronqué" mais qu'il puisse être sur toute la largeur de la cellule?

Pour résumé, j'aimerai que la checkbox soit au maximum de 110% de la largeur de la cellule (qui elle est de largeur automatique) afin de pouvoir inclinée cette checkbox qui contiendrait le nom de la personne qui l'a cochée (image php?) de -30°

Voici mon code HTML :

<table>
<form method="post" action="repas.php">
   <caption>Planning</caption>

      <tr>
         <th></th>
         <th>Mercredi</th>
         <th>Jeudi</th>
         <th>Vendredi</th>
         <th>Samedi</th>
         <th>Dimanche</th>
      </tr>

      <tr>
         <td>Petit-déjeuner</td>
         <td></td>
         <td><img class="repas" src="petit_dej_1.gif" alt="Petit-déjeuner">
         <label class="container">
         <input type="checkbox">
         <span class="checkmark"></span>
         </label></td>
         <td><img class="repas" src="petit_dej_1.gif" alt="Petit-déjeuner">
         <label class="container">
         <input type="checkbox">
         <span class="checkmark"></span>
         </label></td>
         <td><img class="repas" src="petit_dej_1.gif" alt="Petit-déjeuner">
         <label class="container">
         <input type="checkbox">
         <span class="checkmark"></span>
         </label></td>
         <td><img class="repas" src="petit_dej_1.gif" alt="Petit-déjeuner">
         <label class="container">
         <input type="checkbox">
         <span class="checkmark"></span>
         </label></td>
      </tr>
</form>
</table>

Et Voici mon fichier CSS :

/* Tableau */

table {
    text-align: center;
    empty-cells: hide;
    table-layout: auto;
    width: 100%;
}

td, th /* Mettre une bordure sur les td ET les th */ {
    background-color: #515151;
    border-radius: 15px;
    height: 75px;
}

caption{
    padding: 15px;
    color: brown;
}

table img {
    width: 75px;
    border-radius: 20px;
}

/* Checkboxes */
/* Customize the label (the container) */
.container {
  display: block;
  position: absolute;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  bottom: 0;
  left: 5px;
  height: 75px;
  width: 100px;
  background-color: #eee;
      -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background: url('tampon_name.php') 0 no-repeat;
    -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
  
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
}

Je vous remercie pour le temps passé sur mon/mes problème(s).

Cordialement,

Avinetor

Pour la première question, je dirais :

td, th
{
    text-align: center;
}

Bonjour,

Merci pour ta réponse. Malheureusement, le tableau a déjà cette propriété.

Malheureusement, ça ne fonctionne pas sur cette checkbox.

De plus, comment faire pour le centrer verticalement?

Bonjour,

J'ai enfin fait le tableau en div, c'est vrai que c'est mieux.

Par contre les checkbox, ça ne va toujours pas.

Si quelqu'un peu m'aider, s'il vous plait?

Voici mon code HTML :

<div class="table_repas">
                        <div class="cel_repas"></div>
                        <div class="cel_repas">Mercredi</div>
                        <div class="cel_repas">Jeudi</div>
                        <div class="cel_repas">Vendredi</div>
                        <div class="cel_repas">Samedi</div>
                        <div class="cel_repas">Dimanche</div>

                        <div class="cel_repas">Petit-déjeuner</div>
                        <div class="cel_repas"></div>
                        <div class="cel_repas">
                        	<img class="repas" src="graph/repas/petit_dej_1.gif" alt="Petit-déjeuner">
	                        <label class="container">
	                        <input type="checkbox" checked="checked">
	                        <span class="checkmark"></span>
	                        </label>
                        </div>
                        <div class="cel_repas"></div>
                        <div class="cel_repas"></div>
                        <div class="cel_repas"></div>

                    </div>

Et voici le CSS :

.table_repas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.cel_repas {
    background-color: #515151;
    border-radius: 15px;
    width: 15%;
    margin: 2px;
    text-align: center;
    padding: 10px 5px;
}

.table_repas img {
    width: 75px;
    border-radius: 20px;
}

/* Checkboxes */
/* Customize the label (the container) */
.container {
  display: block;
  position: absolute;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  bottom: 0;
  left: 5px;
  height: 75px;
  width: 80px;
  background-color: #eee;
      -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background: url('/graph/sloth/icon_sloth.png') 0 0px no-repeat;
    -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
  
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
}

Merci pour votre aide.

Avinetor

Bonjour,

Est-ce que quelqu'un peut m'aider sur les checkboxes, s'il vous plait?

Je vous remercie.

Avinetor

Bonsoir,

tout cela est bien confus, je vois un input entre deux <label>, des éléments qui sont en absolu dans des elements en absolu, qui ont hauteur et largeur = 0;

dans ton commentaire, tu ne confonds pas checkbox et checkmark ? c'est la checkmark qui doit être centrée, c'est bien cela ? Elle est positionnée en absolu, donc elle n'est pas centrée, logique ?

Bonjour ChrisLebur,

En effet, c'est un peut confus dans mon esprit, j'ai pris un truc tout fait que j'ai essayé d'adapter.

Peux-tu m'aider à repartir de 0, s'il te plait?

En effet, j'ai confondu checkmark et checkbox.

Peux-tu me confirmer que le code HTML est bon pour une "cellule":

<div class="table_repas">
   <div class="cel_repas">
      <img class="repas" src="graph/repas/petit_dej_1.gif" alt="Petit-déjeuner">
      <label class="container">
      <input type="checkbox" checked="checked">
      <span class="checkmark"></span>
      </label>
   </div>
</div>

Et pour le CSS, je supprime toute la partie Checkboxes :

/* Tableau */

.table_repas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.cel_repas_empty {
    border-radius: 15px;
    width: 15%;
    margin: 2px;
    text-align: center;
    padding: 10px 5px;
}

.cel_repas {
    background-color: #515151;
    border-radius: 15px;
    width: 15%;
    margin: 2px;
    text-align: center;
    padding: 10px 5px;
}

.table_repas img {
    width: 75px;
    border-radius: 20px;
}

/* Checkboxes */

De ce fait, j'ai un espace sous l'image dans la "cellule" et lorsque je passe dessus avec ma souris, le pointeur devient une main sur quasiment toute la largeur de la cellule.

Comment se fait-il que je ne vous pas la checkbox classique?

Afin de ne plus voir cette espace, il faut bien que je positionne la checbox (et checkmark en absolu non?

Je te remercie.

Bonjour Chris,

Est-ce que tu sais quand est-ce que tu seras disponible?

Je te remercie.

Cordialement,

Avinetor