posizionamento testo

**sez** · 17-09-2016, 10:36

Ciao,

devo popolare una schermata simile alla seguente usando dei dati presi dal DB.

example4.jpg

Il problema e' nel posizionamento del testo.
Ho scartato l'idea di una tabella unica e mi sono orientato sull'avere ogni riga una tabella con tante celle quanti sono i dati per riga con align-left sulla prima, align-center su quelle intermedie e align-right sull'ultima.
Il risultato pero' non e' un granche'.

Mi piacerebbe posizionare i vari testi con delle <span> float specificando una posizione tipo "vai al quadretto virtuale x, y" calcolato rispetto al contenitore parent (vw, vy ?) e al font size.....
Ma mi pare un po' complesso e mi chiedevo come normalmente si affronta un problema simile..

Grazie!

**KillerWorm** · 17-09-2016, 15:33

Ciao e benvenuto sul forum.
Se si trattasse di una struttura tabellare, dove il numero di celle per ogni riga sia prestabilito e ogni cella rappresentasse un record, allora ti indirizzerei comunque verso l'uso delle tabelle, come tu stesso hai provato. Non hai mostrato però il tuo risultato né il codice della/le soluzione/i che hai provato, quindi è difficile capire perché e cosa non ti soddisfa. Magari è possibile aggiustare opportunamente questa soluzione per ottenere qualcosa che può andare bene secondo le tue esigenze.

Ad ogni modo, dalla tua immagine d'esempio, l'output di quei dati mi pare più una lista di elementi "nome:valore"; non capisco quindi la logica nel rappresentarli in modo tabellare. In particolare non mi è chiaro se ogni dato debba avere una sua posizione precisa all'interno della tabella o se la tua intenzione è semplicemente quella di disporre una lista con un allineamento giustificato, che va ad occupare più righe in base alla quantità di dati.

Ci sarebbero anche altre soluzioni per impaginare i dati in modo ordinato con una disposizione, possiamo dire, pseudo-tabellare. Ad esempio usando flexbox. Per maggiori informazioni a riguardo, ti invito a dare uno sguardo ai link utili CSS; al capitolo 9 trovi diverse guide e materiale interessante.

A questo punto le soluzioni possono essere diverse e di diverso tipo a seconda di come vuoi trattare quei dati:

- tabelle, eventualmente annidate, opportunamente formattate
- testo con allineamento giustificato
- struttura con l'uso di flexbox

Dovresti fornire maggiori dettagli per capire cosa può essere meglio consigliarti. Magari può essere utile chiarire meglio il contesto di utilizzo.

Intanto ti posto un esempio, fatto al volo, in cui ho usato una "pseudo-lista" con l'allineamento giustificato:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      .datasheet{
                width: 600px;
                padding: 5px;
                border: 1px solid #456;
                border-radius: 5px;
                font: normal .8rem/1rem Arial, Helvetica, sans-serif;
                text-align: justify;
                -moz-text-align-last: justify;
                text-align-last: justify;
            }
            .datasheet>span{
                display: inline-block;
                margin: 5px 10px;
            }
            .datasheet b{
                color: #123;
                font: inherit;
            }
            .datasheet b:after{
                content: ":"
            }
            .datasheet i{
                color: #f00;
                font: inherit;
            }
    </style>
  </head>
  <body>
    <div class="datasheet">
            <span><b>Lorem</b> <i>123</i></span>
            <span><b>ipsum</b> <i>45.6</i></span>
            <span><b>dolor sit amet</b> <i>78%</i></span>
            <span><b>consectetur adipisicing</b> <i>9012</i></span>
            <span><b>elit</b> <i>3 (45)</i></span>
            <span><b>sed do eiusmod</b> <i>67890</i></span>
            <span><b>tempor</b> <i>123 456 7890</i></span>
            <span><b>incididunt</b> <i>123 °C</i></span>
            <span><b>ut labore et</b> <i>4 5 6</i></span>
            <span><b>dolore</b> <i>7890123456</i></span>
            <span><b>magna</b> <i>aliqua</i></span>
            <span><b>Ut enim ad minim</b> <i>789</i></span>
            <span><b>veniam</b> <i>0</i></span>
            <span><b>quis nostrud</b> <i>1</i></span>
            <span><b>exercitation</b> <i>2345</i></span>
            <span><b>ullamco</b> <i>6%</i></span>
            <span><b>laboris nisi</b> <i>7</i></span>
            <span><b>ut</b> <i>8</i></span>
        <div>
    </body>
</html>

**sez** · 17-09-2016, 16:12

Ciao,

mi piace molto come in maniera elegante e pulita hai di fatto creato una pseudo-tabella usando div e span !!

La richiesta che mi e' stata fatta e', nonostante le righe abbiano numerosita' differente, e' di allineare alcuni campi tra loro, es: tempor (nella tua 2nda riga) con magna (nella tua 3za riga). Considera che magna magari poteva anche apparire ad una riga differente....

Riflettendo un modo potrebbe essere quello di appoggiarsi ad una quadrettatura virtuale... qualcosa tipo:

codice:

     <div id="ruler" style="height:2vw;">
      <span style="position:fixed; left: 0vw; font-size:2vw;">0</span>
      <span style="position:fixed; left: 10vw; font-size:2vw;">10</span>
      <span style="position:fixed; left: 20vw; font-size:2vw">20</span>
      <span style="position:fixed; left: 30vw; font-size:2vw">30</span>
      <span style="position:fixed; left: 40vw; font-size:2vw;">40</span>
      <span style="position:fixed; left: 50vw; font-size:2vw;">50</span>
      <span style="position:fixed; left: 60vw; font-size:2vw;">60</span>
      <span style="position:fixed; left: 70vw; font-size:2vw;">70</span>
      <span style="position:fixed; left: 80vw; font-size:2vw;">80</span>
      <span style="position:fixed; left: 90vw; font-size:2vw;">90</span>
     </div>

     <div id="row1" style="height:2vw; border: solid 1px black;">
      <span style="background-color:gold; position:fixed; left: 10vw; font-size:2vw;">row1-item1</span>
      <span style="background-color:orange; position:fixed; left: 25vw; font-size:2vw">row1-item2</span>
      <span style="background-color:lime; position:fixed; left: 60vw; font-size:2vw">row1-item3</span>
      <span style="background-color:lightblue; position:fixed; left: 75vw; font-size:2vw;">row1-item4</span>
     </div>

     <div id="row2" style="height:2vw; border: solid 1px black;">
      <span style="background-color:gold; position:fixed; left: 10vw; font-size:2vw;">row2-item1</span>
      <span style="background-color:orange; position:fixed; left: 75vw; font-size:2vw;">row2-item2</span>
      <span style="background-color:lime; position:fixed; left: 20vw; font-size:2vw;">row2-item3</span>
     </div>

cosi' al campo x della riga y potrei comunque specificare da dove deve partire...

puo' avere senso ?

**KillerWorm** · 17-09-2016, 20:07

puo' avere senso ?

Potrebbe averlo. Questa tecnica è generalmente usata per creare layout a griglia... vedi qui o comunque qui.
Chiaramente il tuo esempio può essere ottimizzato impostando a dovere il css.
Ad ogni modo non mi sono chiare le specifiche a cui devi attenerti.
Da quanto hai indicato, se si tratta comunque di dati tabellari, potrebbe forse tornare più semplice e adeguato usare una tabella e unire opportunamente le celle attraverso l'uso degli attributi colspan e rowspan.

Non mi è chiaro questo:

La richiesta che mi e' stata fatta e', nonostante le righe abbiano numerosita' differente, e' di allineare alcuni campi tra loro, es: tempor (nella tua 2nda riga) con magna (nella tua 3za riga). Considera che magna magari poteva anche apparire ad una riga differente....

Perché questi "alcuni campi" devono essere allineati tra loro?
Puoi fare un esempio concreto?

**sez** · 18-09-2016, 16:45

Originariamente inviata da KillerWorm

Non mi è chiaro questo:
Perché questi "alcuni campi" devono essere allineati tra loro?

Tali schede vengono visualizzate da operatori/operatrici che da "consuetudine" si aspettano di vedere i vari dati in posizioni specifiche.
Immagino in passato tali output venissero visualizzati su display vga 80x25 e fixed font size...

Cmq ti ringrazio della discussione, faro' una pagina di prova con il layout a griglia per vedere se semplifica ed avvicina alle richieste, altrimenti come roll back la classica tabella con rowspan/colspan laddove servono.

Grazie ancora!

**KillerWorm** · 18-09-2016, 17:05

Tali schede vengono visualizzate da operatori/operatrici che da "consuetudine" si aspettano di vedere i vari dati in posizioni specifiche.
Immagino in passato tali output venissero visualizzati su display vga 80x25 e fixed font size...

Capito. In teoria potresti utilizzare anche in questo caso un font monospace... certo è comunque meglio avere una struttura per poter organizzare più facilmente i dati.

Cmq ti ringrazio della discussione, faro' una pagina di prova con il layout a griglia per vedere se semplifica ed avvicina alle richieste, altrimenti come roll back la classica tabella con rowspan/colspan laddove servono.

Grazie ancora!

Figurati. Buone prove. Se serve aiuto per ottimizzare la struttura, chiedi pure.

Discussione: posizionamento testo

Strumenti discussione

Ricerca discussione

Visualizza

posizionamento testo

Permessi di invio