Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2004
    Messaggi
    241

    formattazione giornate di campionato

    Ho un problema che non riesco a risolvere:
    devo visualizzare il calendario di un campionato con una serie di tabelle poste in colonna (utilizzo l'annidamento delle tabelle, quindi non è questo il pronlema) di cui ognuna ha una caption che indica la giornata e cinque colonne che visualizzano:

    - risultato andata
    - squadra che gioca la prima in casa
    - trattino
    - squadra che gioca la prima in trasferta
    - risultato ritorno

    io vorrei avere il trattino sempre al centro perfetto in ognuna delle tabelle, in modo da avere l'effetto di continuità guardando le giornate seguenti; se provo a formattarlo dando percentuali identiche (40% x esempio) a width riferiti alle squadre poi il testo mi va a capo; preferisco non utilizzare lunghezze fisse;
    riepilogando avrei bisogno di:

    - lunghezza fisse per i risultati e il trattino (per il trattino anche la centratura)
    - lunghezza variabile per le squadre

    tutto ciò preferibilmente utilizzando i css

  2. #2
    hai la pagina on-line per poter vedere precisamente la struttura?

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Parli di tabelle annidate (orrore): evidentemente almeno una non serve come tabella (errore di semantica).

    Non dici nulla della struttura che c'e` all'interno della cella, e che e` il tuo problema.
    Per le liste si dovrebbero usare i tag <ul> e[*], e quindi allineare tali strutture (e` una cosa fattibile e semplice).

    Con una ricerca nel forum, o una consultazione dei manuali CSS sulle liste, dovresti risolvere.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  4. #4
    Credo che la prima cosa su cui dobbiamo ragionare sia la struttura semantica da dare a queste informazioni. Chiedo all'autore di postare il codice HTML da lui attualmente utilizzato al fine di prendere spunto o eventualmente ottimizzare l'esistente.


  5. #5
    Rachel Andrew, "Guida ai CSS" (HOEPLI)

    "Mostrare un calendario utilizzando i CSS" (pag. 120)


  6. #6
    Utente di HTML.it
    Registrato dal
    May 2004
    Messaggi
    241
    Codice PHP:
    echo "<table><tr><td id='centro'>";

      echo 
    "<table style='width: 100%;'><caption>IL CAMPIONATO</caption>";
      if (isset(
    $campionato)) {
        
    $andata=0;
        
    $ritorno=1;
        
    ksort($campionato); # necessario, almeno x ins_campionato.php
        # divide il campionato nei due gironi andata e ritorno mantenendo come chiave la giornata
        
    $giorn_gir=array_chunk($campionato,count($campionato)/2,true);
        foreach (
    $giorn_gir[$andata] as $giorn_and_n => $giorn_and) {
          list(,
    $giorn_rit)=each($giorn_gir[$ritorno]);
          echo 
    "<tr><td class='quadro'>";

      echo 
    "<table class='giornata'>";
      foreach (
    $giorn_and as $gara_and_n => $gara_and) {
        list(,
    $gara_rit)=each($giorn_rit);
        if (
    $gara_and_n=='data') {
          echo 
    "<caption>[i](A: ".$gara_and.")[/i] ";
          echo 
    $giorn_and_n."ª Giornata [i](R: ";
          echo 
    $gara_rit.")[/i]</caption>";
        } else {
          
    $i_sqinc=$gara_and['i_sqinc'];
          
    $i_sqint=$gara_and['i_sqint'];
          echo 
    "<tr><td class='ris_and'>".risultato_visualizzabile($gara_and['risultato'],FALSE)."</td>";
          echo 
    "<td class='sq_prima_in_casa'".color_mia_sq($squadre[$i_sqinc],$mia_squadra).">";
          echo 
    squadra_visualizzabile($squadre[$i_sqinc])."</td>";
          echo 
    "<td class='trattino'>-</td>";
          echo 
    "<td class='sq_prima_in_trasf'".color_mia_sq($squadre[$i_sqint],$mia_squadra).">";
          echo 
    squadra_visualizzabile($squadre[$i_sqint])."</td>";
          echo 
    "<td class='ris_rit'>".risultato_visualizzabile($gara_rit['risultato'],TRUE)."</td></tr>";
        }
      }
    echo 
    "</table>";

          echo 
    "</td></tr>";
        }
      } else
        echo 
    "<tr><td>Il calendario del campionato non è ancora disponibile!</td></tr>";
      echo 
    "</table>";

    echo 
    "</td></tr></table>"
    $giorn_and è un array con indici da 1 a 8 per le gare e 'data' che indica la data della giornata (ovviamente $giorn_rit si riferisce alle gare del girone di ritorno);
    la funzione risultato_visualizzabile capovolge il risultato per il ritorno, mentre squadra_visualizzabile sceglie e visualizza le parti dell'array da visualizzare;

    per quanto riguarda invece la formattazione css ho questo file allegato (ho messo solo la parte interessata)

    codice:
    body { font-family: tahoma, verdana, arial; text-align: center; }
    
    caption {
              padding-top: 18px;
              color: #003366;
              font-size: 16px;
              font-weight: bold;
              text-decoration: underline;
            }
    
    td { vertical-align: top; }
    
    i {
        font-style: normal;
        font-size: 11px;
        font-weight: normal;
      }
    
    #centro {
              width: 526px;
              height: 751px;
              background-image: url(index_file/rilievo_serie_a.jpg);
              background-repeat: repeat;
              color: #003366;
              font-size: 11px;
            }
    
    .quadro { border: thin solid #003366; width: 100%; }
    .quadro table caption { padding-top: 0px; text-decoration: none; }
    
    .giornata { width: 100%; }
    
    td.ris_and { width: 16px; text-align: left; color: white; }
    td.sq_prima_in_casa { width: 44%; text-align: right; font-size: 9px; }
    td.trattino { width: 0px; }
    td.sq_prima_in_trasf { width: 44%; text-align: left; font-size: 9px; }
    td.ris_rit { width: 16px; text-align: right; color: white; }
    nel sito che ho costruito ho fatto uso massiccio di table, tr, td;
    pochissimo le liste, e niente <div> e

    ; il fatto è che le tabelle mi danno l'impressione di essere sempre la soluzione più adatta, e non so mai in quali casi invece è più indicata un'altra soluzione!

  7. #7
    Utente di HTML.it
    Registrato dal
    May 2004
    Messaggi
    241
    codice:
    ______________1ª Giornata________________
    3-1______qqqqqqqqqq - www_____________2-1
    0-0___________eeeee - rrrrrr__________1-0
    4-0_________ttttttt - yyyy____________0-0
    
    ______________2ª Giornata________________
    1-1__________uuuuuu - iiiiiiiiiiiiii__1-2
    0-3________oooooooo - ppppppppp_______0-2
    5-1___________aaaaa - ssssssssssssss__0-0
    questo è quello che vorrei ottenere all'incirca, con i trattini di tutte le giornate sulla stessa ipotetica colonna

  8. #8
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Hai postato il CSS, ma non l'HTML.
    Da quel codice PHP non e` facile capire cosa arriva nel browser.

    Posta invece un esempio (basta un riquadro) di cosa arriva al browser (click destro -> mostra sorgente/HTML)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  9. #9
    Utente di HTML.it
    Registrato dal
    May 2004
    Messaggi
    241
    codice:
    <html>
      . . .
      <body>
        <table>
          <tr>
            <td class="cornice">
              . . .
            </td>
            <td class="cornice">
              . . .
            </td>
          </tr>
          <tr>
            <td colspan="2" class="cornice">
              . . .
            </td>
          </tr>
          <tr>
            <td class="cornice">
              . . .
            </td>
            <td id="centro">
              <table style='width: 100%;'>
                <caption>IL CAMPIONATO</caption>
                <tr>
                  <td class='quadro'>
                    <table class='giornata'>
                      <tr>
                        <td class='ris_and'>0-3</td>
                        <td class='sq_prima_in_casa'>Pre Camp Collecchio Pallavolo</td>
                        <td class='trattino'>-</td>
                        <td class='sq_prima_in_trasf'>Marche Metalli New Team Volley Castelfidardo</td>
                        <td class='ris_rit'>&nbsp-&nbsp</td>
                      </tr>
                      <caption>(A: domenica 16 ottobre 2005) 01ª Giornata (R: domenica 29 gennaio 2006)</caption>
                      <tr>
                        <td class='ris_and'>1-3</td>
                        <td class='sq_prima_in_casa'>Fornarina Sacrata Pallavolo Civitanova Marche</td>
                        <td class='trattino'>-</td>
                        <td class='sq_prima_in_trasf'>Riso Scotti Pallavolo Villanterio</td>
                        <td class='ris_rit'>&nbsp-&nbsp</td>
                      </tr>
                      <tr>
                        <td class='ris_and'>3-1</td>
                        <td class='sq_prima_in_casa'>Di Meglio Brums Futura Volley Busto Arsizio</td>
                        <td class='trattino'>-</td>
                        <td class='sq_prima_in_trasf'>Lamaro Appalti Pallavolo Virtus Roma</td>
                        <td class='ris_rit'>&nbsp-&nbsp</td>
                      </tr>
                      <tr>
                        <td class='ris_and'>3-1</td>
                        <td class='sq_prima_in_casa'>Fratelli Rebecchi Valtrebbia River Volley Rivergaro</td>
                        <td class='trattino'>-</td>
                        <td class='sq_prima_in_trasf'>Pema Corplast Pallavolo Corridonia</td>
                        <td class='ris_rit'>&nbsp-&nbsp</td>
                      </tr>
                      <tr>
                        <td class='ris_and'>3-0</td>
                        <td class='sq_prima_in_casa'>Lines Tra.De.Co. Jogging Volley Altamura</td>
                        <td class='trattino'>-</td>
                        <td class='sq_prima_in_trasf'>Europea 92 FVC Effe Sport Isernia</td>
                        <td class='ris_rit'>&nbsp-&nbsp</td>
                      </tr>
                      <tr>
                        <td class='ris_and'>2-3</td>
                        <td class='sq_prima_in_casa'>Linea Medica Siram Roma Pallavolo</td>
                        <td class='trattino'>-</td>
                        <td class='sq_prima_in_trasf'>Unicom Starker Kerakoll Sassuolo Volley</td>
                        <td class='ris_rit'>&nbsp-&nbsp</td>
                      </tr>
                      <tr>
                        <td class='ris_and'>1-3</td>
                        <td class='sq_prima_in_casa'>Sea Ecology N. Gr. Robur Tiboni Volley Urbino</td>
                        <td class='trattino'>-</td>
                        <td class='sq_prima_in_trasf' style='color: rgb(246, 230, 8);'>Zoppas Spes Volley Conegliano</td>
                        <td class='ris_rit'>&nbsp-&nbsp</td>
                      </tr>
                      <tr>
                        <td class='ris_and'>0-3</td>
                        <td class='sq_prima_in_casa'>Gelati Gelma Seap Pallavolo Aragona</td>
                        <td class='trattino'>-</td>
                        <td class='sq_prima_in_trasf'>Magic Pack US Esperia Cremona</td>
                        <td class='ris_rit'>&nbsp-&nbsp</td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td class='quadro'>
                    <table class='giornata'>
                      <tr>
                        <td class='ris_and'>2-3</td>
                        <td class='sq_prima_in_casa'>Lamaro Appalti Pallavolo Virtus Roma</td>
                        <td class='trattino'>-</td>
                        <td class='sq_prima_in_trasf'>Lines Tra.De.Co. Jogging Volley Altamura</td>
                        <td class='ris_rit'>&nbsp-&nbsp</td>
                      </tr>
                      <caption>(A: domenica 23 ottobre 2005) 02ª Giornata (R: domenica 05 febbraio 2006)</caption>
                      <tr>
                        <td class='ris_and'>3-2</td>
                        <td class='sq_prima_in_casa'>Riso Scotti Pallavolo Villanterio</td>
                        <td class='trattino'>-</td>
                        <td class='sq_prima_in_trasf'>Gelati Gelma Seap Pallavolo Aragona</td>
                        <td class='ris_rit'>&nbsp-&nbsp</td>
                      </tr>
                        . . .
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>

  10. #10
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Ok, adesso finalmente ho capito.

    Intanto una nota: la tabella .giornata ha un suo significato, mentre la tabella esterna andrebbe eliminata, sostituita da <div>.

    Prendo in considerazione una singola riga, poi la cosa si ripete per le altre:
    codice:
    <tr>
      <colgroup>
        <col style="width:7%;"></col>
        <col style="width:40%;"></col>
        <col style="width:5%;"></col>
        <col style="width:40%;"></col>
        <col style="width:7%;"></col>
      </colgroup>
    </tr>
    <tr>
      <td class='ris_and'>0-3</td>
      <td class='sq_prima_in_casa'>Pre Camp Collecchio Pallavolo</td>
      <td class='trattino'>-</td>
      <td class='sq_prima_in_trasf'>Marche Metalli New Team Volley Castelfidardo</td>
      <td class='ris_rit'>&nbsp-&nbsp</td>
    </tr>
    Esempio di CSS (ci metto solo il prefisso .giornata, ma non e` detto che nel CSS finale non ci voglia qualcos'altro):
    codice:
    .giornata .ris_and {
      margin: 0 auto 0 0;
      text-align: left;
    }
    .giornata .sq_prima_in_casa{
      margin: 0 auto 0 0;
      text-align: right;
    }
    .giornata .trattino{
      margin: 0;
      text-align: center;
    }
    .giornata .sq_prima_in_trasf{
      margin: 0 auto 0 0;
      text-align: left;
    }
    .giornata .ris_rit {
      margin: 0 0 0 auto;
      text-align: right;
    }
    Questa e` una bozza: credo che dovrai lavorarci un po'.
    Ad esempio dovrai specificare bordi e padding a zero in tutti, oppure definire padding al posto di margin e mettere i margin a zero.

    Nel HTML ho inserito una riga di intestazione per definire le larghezze. E` una riga per ogni tabella.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.