Aiuto per grafica segnapunti

**ziz** · 12-12-2018, 19:46

Ciao a tutti,

sto realizzando una semplice interfaccia grafica per un segnapunti. La grafica prevede tre colonne, di cui le due laterali dedicate ai risultati delle due squadre, e la centrale al risultato e timer.

In basso vorrei fissare tre pulsanti, uno per ciascuna colonna, facendo in modo che i div "tabellone_squadra" si espandano il più possibile fino a fine pagina.

E' proprio questo che non riesco a fare, perché con il codice che ho realizzato fino a questo punto, i miei div "tabellone_squadra" non sono dinamici, ma hanno una lunghezza fissa.

Qualcuno mi può aiutare?

Di seguito il frammento di codice e relativo file css:

codice:

<divclass="score-board">            <div class="left_col" style="background-color: green;">
                <div class="logo_squadra">
                    <img src="images/logo_foosball.png"/>
                </div>
                <div class="tabellone_squadra">Tabellone squadra 1</div>
                <div class="pulsante_small">
                    <button type="button">Pulsante B</button>
                </div>
            </div>
            <div class="center_col" style="background-color: yellow;">
                <div class="punteggio">1 - 1</div>
                <div class="timer">00:00</div>
                <div id="pulsanteA">
                    <button type="button">Pulsante A</button>
                </div>
            </div>
            <div class="right_col" style="background-color: red;">
                <div class="logo_squadra">
                    <img src="images/logo_foosball.png"/>
                </div>
                <div class="tabellone_squadra">Tabellone squadra 2</div>
                <div class="pulsante_small">
                        <button type="button">Pulsante C</button>
                </div>
            </div>

</div>

codice:

.score-board {            text-align: center;
            padding: 25px;
        }
        .left_col {
            float: left;
            width: 33%;
        }
        .right_col {
            float: right;
            width: 33%;
        }
        .center_col {
            display: inline-block;
            width: 33%;
        }
        .logo_squadra img {
            width: 30%;
            height: auto;
            padding-top: 5%;
            padding-bottom: 5%;
        }
        .tabellone_squadra {
            display: inline-block;
            width: 90%;
            height: 150px;
            background-color: aquamarine;
            overflow: scroll;
        }
        .pulsante_small {
            padding-top: 5%;
            padding-bottom: 5%;
        }
        .punteggio {
            padding-top: 5%;
            padding-bottom: 5%;
            font-size: 600%;
        }
        .timer {
            font-size: 200%;

        }

Grazie e ciao,
Francesco

**KillerWorm** · 14-12-2018, 01:52

Ciao, definisci: i miei div "tabellone_squadra" non sono dinamici, ma hanno una lunghezza fissa

Nel tuo codice noto che per la classe .tabellone_squadra hai impostato width:90% e height:150px che rispettivamente definiscono "larghezza" e "altezza".

Tu cosa intendi per lunghezza?
Ti riferisci forse ad heigth? In tal caso è ovvio che sia fissa dal momento che hai impostato 150px, ma basterebbe rimuovere quella regola o tuttalpiù applicare height:auto per lasciare che l'elemento si estenda in altezza in base al suo contenuto.

Se non è ciò che stai chiedendo, chiarisci meglio cosa intendi ottenere; magari anche postando una bozza grafica, se riesci.

EDIT:
scusa, l'ora è tarda, ho letto meglio la frase precedente, in effetti il concetto era chiaro. Faccio qualche prova e vedo cosa consigliarti

facendo in modo che i div "tabellone_squadra" si espandano il più possibile fino a fine pagina.

**KillerWorm** · 14-12-2018, 03:09

E' possibile risolvere usando flex-box.

Qui un esempio funzionante, completo e commentato (ho preso come base il tuo codice):

codice:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <style>
      
         * { box-sizing: border-box; } /* Reset del box model */
         html,
         body,
         .score-board,
         .left_col,
         .right_col {
            margin: 0;
            height: 100%               /* Altezza 100% per tutta la gerarchia dei contenitori, dalle colonne a <html> */
         }
         .score-board {
            text-align: center;
            padding: 25px;
         }
         .left_col,
         .right_col,
         .center_col {                 /* A parte le tre classi diverse, qui forse si potrebbe usare anche una classe unica per identificare qualsiasi colonna */
            display: flex;             /* Il magico flex-box, qui impostato per ripartire gli elementi all'interno delle colonne */
            flex-direction: column;
            align-items: center;
            float: left;
            width: calc(100% / 3);     /* Puoi usare questa regola per dividere esattamente gli ingombri dentro la larghezza totale. Ma se preferisci, lascia 33% come era prima */
         }
         .center_col {
            padding: 30px 0;
         }
         .logo_squadra img {
            width: 30%;
            padding: 5% 0;             /* Forma contratta, anziché scrivere: "padding-top: 5%; padding-bottom: 5%;" */

         }
         .tabellone_squadra {
            flex-grow: 1;              /* Questo elemento lo estendiamo per l'intero spazio utile, usando appunto le proprietà di flex-box */
            width: 90%;
            overflow: auto;
         }
         .pulsante_small {
            padding: 5% 0;
         }
         .punteggio {
            padding: 5% 0;
            font-size: 600%;
         }
         .timer {
            font-size: 200%;
         }
         
                                       /* Meglio organizzare tutte le regole nel CSS separato, dove possibile, piuttosto che pasticciare il markup col CSS inline */
                                       /* Non è più comoda una paletta colori organizzata in questo modo? */
         /* --- COLORI --- */
         
         .left_col            { background: green        }
         .center_col          { background: yellow       }
         .right_col           { background: red          }
         .tabellone_squadra   { background: aquamarine   }

         
      </style>
   </head>
   <body>
   
      <div class="score-board">
         <div class="left_col">
            <div class="logo_squadra">
               <img src="images/logo_foosball.png" alt="Logo della squadra">
            </div>
            <div class="tabellone_squadra">Tabellone squadra 1</div>
            <div class="pulsante_small">
               <button type="button">Pulsante B</button>
            </div>
         </div>
         <div class="center_col">
            <div class="punteggio">1 - 1</div>
            <div class="timer">00:00</div>
            <div id="pulsanteA">
               <button type="button">Pulsante A</button>
            </div>
         </div>
         <div class="right_col">
            <div class="logo_squadra">
               <img src="images/logo_foosball.png" alt="Logo della squadra">
            </div>
            <div class="tabellone_squadra">Tabellone squadra 2</div>
            <div class="pulsante_small">
               <button type="button">Pulsante C</button>
            </div>
         </div>
      </div>
      
   </body>
</html>

Vedi se può andare.
Buon proseguimento.

**ziz** · 15-12-2018, 12:25

Esattamente quello che stavo cercando di fare. Grazie mille anche per i suggerimenti e le spiegazioni!!

Discussione: Aiuto per grafica segnapunti

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Aiuto per grafica segnapunti

Permessi di invio