28106 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

en fait, j'ai un tableau avec des colonnes dans lesquelles j'ai des icônes.

L'utilisateur peut cliquer sur ces icônes pour effectuer différentes actions.

Le problème, c'est que ces icônes sont difficilement accessibles notamment sur la version smartphone de la page.

Vous pouvez avoir un aperçu de la page avec le lien suivant :

https://codepen.io/joseph5/pen/jOqRpNm

Comment puis-je faire pour que la zone cliquable soit extensible sans augmenter de trop la hauteur des lignes ?

Merci d'avance.

Bonne soirée,
Thierry
Modérateur
Et l'eau Thierry,

1. valide ton code html (il n'est pas valide)
2. une piste :

#table_items a, #table_items a img{display:block}
Bonjour Niuxe,

tout d'abord, je tenais encore une fois à vous remercier pour votre aide.

Suivant vos conseils, j'ai donc corrigé le code HTML.

J'ai également utilisé le display: block; sur les images du tableau pour les liens et j'ai voulu faire la même chose pour les images du tableau pour les span mais ça ne donne pas le même résultat.

Vous trouverez l'adaptation dans le codepen suivant :

https://codepen.io/joseph5/pen/jOqRpNm

Que faut-il faire sur les span pour quand puisse également augmenter la surface cliquable ? Faut-il transformer le span en un lien ?

Est-il possible de dire qu'on ne veut pas pouvoir cliquer sur toute la largeur du lien mais uniquement sur l'icône plus un petit espace de chaque côté du l'icône ?

Merci d'avance pour votre aide.

Bonne journée,
Thierry
Modérateur
En fait, j'avais pas fait attention. Ton code ne va pas du tout. Je t'ai corrigé ton code. À toi de faire le reste (css). Ton :before ==> oublie à tout jamais.


<table id="table_items">
        <?php for($i = 1; $i <= 4; $i++): ?>
        <tr>
            <th scope="row"><label for="label_<?= $i ?>">Libellé</label></th>
            <td><input type="text" class="input-text" placeholder="Libellé" name="label_<?= $i ?>" id="label_<?= $i ?>" value="" required /></td>
        </tr>
        <tr>
            <th scope="row"><label for="description_<?= $i ?>">Description</label></th>
            <td><input type="text" class="input-text" placeholder="Description" id="description_<?= $i ?>" name="description_<?= $i ?>" value="" required /></td>
        </tr>
        <tr>
            <th scope="row">Modifier</th>
            <td><span class='update_item'><img src="http://lorempixel.com/16/16" alt="modifier" class="img-update" /></span></td>
        </tr>
        <tr>
            <th scope="row">Supprimer</th>
            <td><span class='delete_item'><img src="http://lorempixel.com/16/16" alt="supprimer" class="img-delete" /></span></td>
        </tr>
        <tr>
            <th scope="row">Visualiser</th>
            <td><a href="view_item.php" target="_blank"><img src="http://lorempixel.com/16/16" alt="visualiser" class="img-view" /></a></td>
        </tr>
        <tr>
            <th scope="row">Configurer</th>
            <td><a href="custom_item.php" target="_blank"><img src="http://lorempixel.com/16/16" alt="configurer" class="img-setup" /></a></td>
        </tr>
        <?php endfor; ?>
    </table>


css

table {
          width: 100%;
          padding: 0 5px;
          margin: 0 auto;
          border-collapse: collapse;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px;
        }

        /* Zebra striping */
        tr:nth-of-type(odd) {
        	background: #eee;
        }

        tr { border: 1px solid #ccc; }

        td {
          /* Behave like a "row" */
          border: none;
          border-bottom: 1px solid #eee;
          position: relative;
          padding-left: 35%;
        }
       /*beurk ! */
        /* td:before {
          position: absolute;
          top: 6px;
          left: 6px;
          width: 45%;
          padding-right: 10px;
          white-space: nowrap;
          content: attr(data-column);
          color: #000;
          font-weight: bold;
        } */

        td, th {
          font-size: 12px;
          padding-bottom: 2px;
          padding-top: 2px;
          border: 1px solid #ccc;
        	text-align: left;
        }

        th {
        	background: #3498db;
        	color: white;
        	font-weight: bold;
        }

        #item_rows .input-text
        {
          height: 1rem;
          font-size: 12px;
        }

        a {
          text-decoration: none;
          cursor: pointer;
          color: #fff;
        }

        #table_items a, #table_items a img{display:block}


        a:hover {
          opacity: 0.8;
        }

        .img-view, .img-update, .img-delete, .img-setup {
          width: 16px;
          height: 16px;
          margin-left: 16px;
        }

        .img-view:hover, .img-update:hover, .img-delete:hover, .img-setup:hover {
          cursor:	pointer;
        }

        #table_items a, #table_items a img, #table_items span, #table_items span img {
          display: block;
        }

Modifié par niuxe (29 Sep 2020 - 23:33)
Bonjour Niuxe,

encore merci pour vos explications et votre aide.

En fait, je m'excuse mais je n'avais mis que le code en rapport avec la version smartphone.

En fait, sur la version smartphone, j'ai fait en sorte de mettre sur une seule ligne toutes les icônes qui correspondent à différentes actions.

Seulement, je ne sais pas si je m'y suis bien pris à ce niveau-là en utilisant un display: table-cell. Apparemment, j'essaie de centrer toutes ces icônes mais je n'y arrive pas.

Si vous le souhaitez, voici le code de la page en codepen :

https://codepen.io/joseph5/pen/GRZaGea

Encore merci pour votre aide et vos explications.

Bonne journée,
Thierry