Problème de marge sur un contenu dans un tableau

Ce sujet est résolu
9821
,

Bonjour,

Voilà mon super tableau c'est exactement le résultat que je souhaite obtenir en plus d'être responsive :
https://imgur.com/HJA2Str

maintenat ne manque plus que la touche final une image lien qui remplir les grandes cellules:
https://imgur.com/nbLt9dK

Oh non catastrophe ! malgré tout mes éfforts je ne parvient pas à viré ses vilaine marge :(

le code HTML sans le lien:

<!DOCTYPE html>
<html>
    <head>
        <title>teste</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

        <table width="100%" height="100%" border="1">
            <tbody>
                <tr>
                    <td colspan="5" height="70px"><div class="menu">
            <a href="../zouak/" >La compagnie</a><a href="../nos-spectacles/">Nos spectacles</a><a href="../nous-contacter/">Nous contacter</a>
        </div></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td rowspan="2">2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td rowspan="2">9</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td rowspan="2">15</td>
                    <td>16</td>
                    <td rowspan="2">17</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td rowspan="2">19</td>
                    <td>20</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Avec le lien:

<!DOCTYPE html>
<html>
    <head>
        <title>teste</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

        <table width="100%" height="100%" border="1">
            <tbody>
                <tr>
                    <td colspan="5" height="70px"><div class="menu">
            <a href="../zouak/" >La compagnie</a><a href="../nos-spectacles/">Nos spectacles</a><a href="../nous-contacter/">Nous contacter</a>
        </div></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td rowspan="2"><a href="url" ><img src="https://loremflickr.com/390/290"></a></td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td rowspan="2">9</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td rowspan="2">15</td>
                    <td>16</td>
                    <td rowspan="2">17</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td rowspan="2">19</td>
                    <td>20</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Le CSS

html, body
{
    width: 100%;
    height: 100%;
}

div.menu
{ width: 100%; height: 70px; padding: 0 50px;   background-color: #C43100; }

div.menu a:link, div.menu a:visited
{
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 20px 20px;
    text-decoration: none;
    color: #fff;
}

div.menu a:hover, div.menu a#hover
{ background-color: #d23f0e; }

table
{
    width: 100%;
    height: 100%;
    border: 1;
}

3 Réponse

9821
,

EUREKA !

J'ai réussi, mettre l'image en arrière plan de la cellule puis y mettre un lien avec les proprité CSS ci-dessous

code CSS

a.lien_table:link, a.lien_table:hover, a.lien_table:visited
{
    display: table;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

code HTML

<td rowspan="2" style="background-image: url(https://loremflickr.com/390/290);">
                        <a href="#" class="lien_table">&nbsp;</a></td>
140804
,

Salut,
ce que tu veux faire c'est enlever les marges qui sont en haut/droite/bas de la photo ici :
https://imgur.com/nbLt9dK ?

Cdlt

9821
,

Bonjour,

Oui exactement, de ce que je comprend les marge provienne de la balise < a > mais impossible de les virés margin 0 padding 0 aucun effet à moins de les compensé négativement margin-top -50px

Solution de contournement qui marche bien c'est de place l'image en background en CSS ne manque qu'a transformé la cellule en lien sans utiliser de JS...