Come centro di testo in TD con ancoraggio/link che riempie al 100%

Hanno fatto un pò di prove per creare un TD con un collegamento integrato che riempiono il TD 100% in modo che quando mi passa il mouse sopra l’intero TD riesco a vedere un cambiamento del cursore e quando è selezionato da tabulazione per l’elemento di tutto il TD viene selezionato etc. Il problema è che ho un comportamento diverso nei diversi browser e non riesco a trovare una soluzione che funziona su diversi browser. Un problema soprattutto per centrare il testo.

Se ho solo il TD e fare un evento onclick Javascript per gestire il click etc. il testo è centrato bene in tutti i browser, ma mi piace di includere un link/di ancoraggio in modo che l’utente può scheda per l’elemento per attivare il comportamento (bello anche per persone disabili).

È anche facile fare un ancoraggio nel TD che non riempire l’altezza e ottenere normale centratura, ma poi ho il problema che l’intera TD non cambia il cursore quando si passa il mouse e proprio il centro del TD può essere selezionato.

È possibile vedere alcuni dei miei studi qui (sarà cancellato in seguito): http://pcrypt.dk/dev/contact.php – test in per esempio FF e Chrome.

Ecco il codice HTML:

<table width=150 border=0>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='height:100%; width:100%'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='display: table-cell; height:100%; width:100%'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='height:100%; width:100% display: table; overflow: hidden;'><div style='display: table-cell; text-align: center; vertical-align: middle;'><div style='text-align: center; vertical-align: middle;'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></div></div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='height:100%; width:100% overflow: hidden;'><div style='text-align: center; vertical-align: middle;'><div>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></div></div></a></td></tr>
<tr><td class=loginbutton id='sendtext'><a href=#><div style='width:100% overflow: hidden;'><div style='text-align: center; vertical-align: middle;'>".$lang['contact']['PCCONTACTSENDBUTTON']."</div></div></a></td></tr>
</table>

E il relativo codice CSS:

.loginbutton { font-weight: normal; text-align: center; vertical-align: middle; height: 26px; width: 150px; cursor: pointer; background-color: #d26628; color: #ffffff; font-size: 13px; }
.loginbutton a:link, a:visited, a:active { font-weight: normal; color: #ffffff; font-size: 13px; }
.loginbutton a:hover { font-weight: bold;}
.loginbutton:hover{ font-weight: bold; }

NB: io non sono affatto un esperto di CSS 😉

PS: Il menu elementi li su Stack Overflow (parte superiore dello schermo) non si comportano come questo btw e si può accedere solo con un mouse pensare è sbagliato.

InformationsquelleAutor Beast | 2014-01-26

 

4 Replies
  1. 8

    Soluzione migliore

    html

    <table border="1" width="100%">
        <tr>
            <td>Stuff<br><br></td>
            <td>
                <a href="page.htm"><span> a Link </span></a>
            </td>
            <td>Stuff</td>
        </tr>
    </table>

    CSS

    td {
        height: 100%;
    }
    a {
        display: table;
        position: relative;
        height: 100%;
        width: 100%;
        background-color: yellow;
    }
    span {
        display: table-cell;
        text-align:center;
        vertical-align: middle;
        background-color: red;
    }

    http://jsfiddle.net/74Wxn/

    Nota:

    height="100%" è richiesto td, si può aggiungere al css, inoltre,

    • Grazie per questa soluzione! Tutti mi mancava nella mia realizzazione è stata interiore tag span all’interno del tag di ancoraggio; sicuramente bisogno.
  2. 2

    Ci sono diversi modi per fare questo. Eccone uno:

    Se si vuole fare un <a> elemento di riempire tutto lo spazio disponibile, è possibile farlo impostando la sua display attributo inline-block e impostare la larghezza e l’altezza al 100%.

    Così, per esempio:

    HTML

    <table>
        <tr>
            <td>Stuff</td>
            <td><a href="http://www.example.com">A Link!</a></td>
            <td>More Stuff</td>
        </tr>
    </table>

    CSS

    table td
    {
        text-align: center; /*Aligns all content of td elements to center*/
    }
    
    table td a
    {
        display: inline-block; /*Behaves like a div, but can be placed inline*/
        width: 100%; /*Full width of parent*/
        height: 100%; /*Full height of parent*/
        text-align: center; /*Centers content*/
    }

    Il Violino

  3. 1
    <style>
    a {
        display: block;
        position: relative;
        height: 100%;
        background-color: yellow;
    }
    span {
        display: block;
        height: 50%;
        position: absolute;
        overflow: auto;
        margin: auto;
        top: 0; left: 0; bottom: 0; right: 0;
        text-align:center;
        background-color: red;
    }
    </style>
    
    <table border="1" width="100%">
        <tr>
            <td>Stuff<br><br></td>
            <td height="100%" width="30%">
                <a href="http://www.google.com" target="_blank">
                    <span>A Link to Google!</span>
                </a>
            </td>
            <td>Stuff</td>
        </tr>
    </table>
  4. 0

    Penso che avete bisogno di questo

    <td align="center"><a href=""></a></td>
    • Sfogliando il td e a ordine è solo andando a fare il link e non vedi tabella). Il browser sta andando ad analizzare come separata dal tavolo e lo posto prima o dopo la prima riga, a seconda di dove è collocato nel codice.

Lascia un commento