creazione tabella con immagini sovrapposte

**corti** · 01-07-2014, 21:53

Ciao
sono nuovo del forum e avrei una domanda su come create una tabella con un'oggetto grafico sovrapposto

Per spiegarmi meglio vi allego l'immagine con quanto desiderato.
E' possibile in html?

Grazie
Immagine.png

**KillerWorm** · 02-07-2014, 00:15

Ciao e benvenuto.
Sostanzialmente puoi impostare un elemento dentro il td e assegnargli position:absolute, mentre al td assegni position:relative.

Un esempio da cui puoi prendere spunto:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      table{
        border-collapse: collapse;
        border-spacing: 0;
        text-align: center;
        height: 200px;
      }
      td{
        padding: 0;
        border: 1px solid Black;
        width: 200px;
      }
      td.immagine{
        width: 400px;
      }
      td.immagine>img{
        width: 100%;
        max-height: 198px;
      }
      .etichetta{
        position: relative;
        height: 40px;
      }
      .etichetta>div{
        position: absolute;
        right: 0;
        top: 0;
        padding: 10px;
        background: FireBrick;
        border: 3px solid Cornsilk;
        width: 220px;
        box-shadow: 0 4px 5px rgba(0,0,0,.6);
        color: White;
      }
    </style>
  </head>
  <body>
    <table>
      <tr><td class="immagine" rowspan=4><img src="image.jpg" alt="IMMAGINE"></td><td class="etichetta"><div>TESTO</div></td></tr>
      <tr><td>TESTO</td></tr>
      <tr><td>TESTO</td></tr>
      <tr><td>TESTO</td></tr>
    </table>
  </body>
</html>

**corti** · 02-07-2014, 08:47

Ok Grazie
e per fare un modo che l'oggetto soprapposto non sia una quadrato ma una freccia come nel mio esempio è possibile?

Grazie

**tampertools** · 02-07-2014, 11:09

Usi un immagine a forma di freccia

**corti** · 02-07-2014, 18:31

Originariamente inviata da tampertools

Usi un immagine a forma di freccia

Ok ma se nella cella devo scrivere un testo dimanico?

**tampertools** · 02-07-2014, 18:41

imposti l'immagine come sfondo

codice HTML:

<td class="freccia">Freccia</td>

codice:

.freccia {
    background-image: url("/img/freccia.jpg");
}

Discussione: creazione tabella con immagini sovrapposte

Strumenti discussione

Ricerca discussione

Visualizza

creazione tabella con immagini sovrapposte

Permessi di invio