Visualizzazione risultati 1 fino 22 di 22

Discussione: Layout tabellare con i div

  1. #1
    L'avatar di coreyx
    coreyx non è connesso Utente
    Data registrazione
    21-07-2012
    Messaggi
    141

    Predefinito Layout tabellare con i div

    Abbasso Table, evviva i div!

    Ma immaginiamo di avere uno screenshot che il committente del sito mi manda. Vuole avere dei bordi sulla pagina che ha disegnato lui stesso. Mi accorgo che per farlo contento mi basta tagliare "a fettine" l'immagine e poi metterci i miei contenuti. Mi basta tagliarla in modo da avere una griglia 3*3 celle (anche meno, posso usare anche un paio di colspan). Insomma, la situazione è troppo invitante per non usare per il layout una bella tabella del tipo

    Codice HTML:
    <table align="center" cellspacing="0" cellpadding="0" border="0">
    	<tr>
    		<td colspan="3" width="400" height="150" class="prima_riga"> </td>
    	</tr>
    	<tr>
    		<td width="50" class="cella_laterale_sinistra"> </td>
    		<td width="300" class="corpo_pagina"> </td>
    		<td width="50" class="cella_laterale_destra"> </td>
    	</tr>
    	<tr>
    		<td width="50" height="60" class="cella_laterale_fondo_sinistra"> </td>
    		<td colspan="2" class="blocco_fondo_pagina_destra"> </td>
    	</tr>	
    </table>
    con i background (che si ripeteranno in verticale nella riga centrale) scritti nel CSS delle varie classi.

    Bene. La domanda è la seguente: c'è una qualche buonanima che si mette lì 5 minuti e mi traduce parola per parola la situazione scritta nell'HTML di sopra SENZA usare le tabelle ma solo dei div? Ovviamente la traduzione mi serve più nel CSS (per le varie posizioni delle "celle") che nell'HTML...

    Credo che una risposta a questa domanda possa servire a più di qualcuno un po' "old style"... Ho cercato risposte in giro per il forum, ma penso che un esempio vero possa essere più istruttivo.

    Chiedo anche gentilmente di evitare risposte del tipo "ti invito a leggerti una guida sul CSS" o "guarda qui che bell'articolo sui vantaggi rispetto ad un layout tabellare".

    Grazie a chi risponderà.

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    18,249

    Predefinito

    Non sono un gran ché con il css:

    Codice HTML:
    <!doctype html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>prova tabelle coreyx</title>
    
    		<style type="text/css">
    		#tabella
    		{
    			text-align: center;
    			width: 400px;
    			height: 150px;
    			margin: 0;
    		}
    		#alto
    		{
    			width:400px;
    			clear:both;
    		}
    		#centrale, #sx, #dx, #fondo_sx, #fondo_dx
    		{
    			float: left;
    		}
    		#sx,#dx,#fondo_sx
    		{
    			width: 50px;
    		}
    		#centrale
    		{
    			width: 300px;
    		}
    		
    		/*inutile: */
    		#alto{background-color: yellow;}#sx{background-color: green;} #centrale { background-color: orange; }#dx{background-color: purple;}#fondo_sx{background-color: blue;}#fondo_dx{background-color: pink;}
    		/**/
    		
    		</style>
    
    	</head>
    	<body>
    		<div id="tabella">
    			<div id="alto">alto</div>
    			<div id="sx">sx</div><div id="centrale">centrale</div><div id="dx">dx</div>
    			<div id="fondo_sx">fondo_sx</div><div id="fondo_dx">fondo_dx</div>
    		</div>
    	</body>
    </html>
    Sarebbe istruttivo anche per me vedere un'altra soluzione.

    Ciao!
    Ultima modifica di alemoppo : 12-08-2013 alle ore 14.09.04

  3. #3
    L'avatar di helpcode
    helpcode non è connesso Utente
    Data registrazione
    20-07-2013
    Messaggi
    139

    Predefinito

    Usa questo codice quì:

    Codice HTML:
    <div class="wrapper">
        <div class="one">.....</div>
    </div>
    <div class="wrapper">
        <div class="one">.....</div>
        <div class="two">.....</div>
        <div class="three">.....</div>
    </div>
    <div class="wrapper">
        <div class="one">.....</div>
        <div class="two">.....</div>
    </div>
    Con questo codice css:
    Codice:
    .wrapper {
        display: table;
        table-layout: fixed;
        
        width:90%;
        height:100px;
        background-color:Gray;
    }
    .wrapper div {
        display: table-cell;
        height:100px;
    }
    
    .one {
        background-color:green
    }
    .two {
        background-color:blue
    }
    .three {
        background-color:red
    }
    Ovviamente personalizza le proprietà che vuoi :)

    Guarda come viene quì: http://jsfiddle.net/efyYz/
    Ultima modifica di helpcode : 12-08-2013 alle ore 16.28.48
    PROBLEMI CON IL TUO SITO? TI OFFRIAMO ASSISTENZA GRATIS!

    Siamo un team di web developers & designers nato per dare un aiuto concreto a tutti i giovani sviluppatori ancora inesperti. Abbiamo creato HelpCode per decidarci a te, per rispondere ogni giorno alle tue domande. Gratis!

    HTML, CSS, JS, JQuery, PHP, Wordpress. Inviaci la tua richiesta a http://helpcode.altervista.org

  4. #4
    L'avatar di coreyx
    coreyx non è connesso Utente
    Data registrazione
    21-07-2012
    Messaggi
    141

    Predefinito

    Intanto grazie dei suggerimenti, però siamo ancora un po' lontani dal risultato che vorrei ottenere.
    Ho provato a usare il sito segnalato da helpcode e a giocarci un po' su.
    Su http://jsfiddle.net/ ho inserito:

    HTML:
    Codice:
    <table align="center" cellspacing="0" cellpadding="0" border="0">
    	<tr>
    		<td colspan="3" width="400" height="150" class="prima_riga"> SOPRA </td>
    	</tr>
    	<tr>
    		<td width="50" class="cella_laterale_sinistra">S</td>
            <td width="300" class="corpo_pagina"><p>Corpo</p><p>Corpo</p><p>Corpo</p><p>Corpo</p><p>Corpo</p><p>Corpo che continua a scendere</p><p>Corpo</p><p>Corpo</p></td>
    		<td width="50" class="cella_laterale_destra">D</td>
    	</tr>
    	<tr>
    		<td width="50" height="60" class="cella_laterale_fondo_sinistra">F</td>
    		<td colspan="2" class="blocco_fondo_pagina_destra">Blocco footer</td>
    	</tr>	
    </table>
    CSS:
    Codice:
    .prima_riga {
        width:400px;
        height:150px;
        background-color:yellow;
    }
    .cella_laterale_sinistra {
        width:50px;
        background-color:green;
    }
    .corpo_pagina {
        width:300px;
    }
    .cella_laterale_destra {
        width:50px;
        background-color:green;
    }
    .cella_laterale_fondo_sinistra {
        width:50px;
        height:60px;
        background-color:red;
    }
    .blocco_fondo_pagina_destra {
        background-color:grey;
    }
    Il risultato è http://jsfiddle.net/CBvrc/

    Io vorrei che il risultato fosse ESATTAMENTE quello, non un pressapoco... Se dovessi ritagliare un'immagine con ciò che mi chiede un committente non posso proporgli un qualcosa che ci assomigli... Le dimensioni e gli incolonnamenti devono essere precisi al pixel.
    Grazie e scusate l'insistenza...

  5. #5
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    18,249

    Predefinito

    Citazione Originalmente inviato da coreyx Visualizza messaggio
    Le dimensioni e gli incolonnamenti devono essere precisi al pixel.
    È sufficiente aggiungere qualche "height" o "width", o modificare i valori che ci sono.

    Ma non ho capito: si deve adattare al contenuto? Mi spiego meglio: è un layout? In tal caso, devi leggerti una guida, oppure usare cose tipo questo (anche se è molto più divertente farlo da una guida).

    Ciao!
    Ultima modifica di alemoppo : 12-08-2013 alle ore 23.16.19

  6. #6
    L'avatar di coreyx
    coreyx non è connesso Utente
    Data registrazione
    21-07-2012
    Messaggi
    141

    Predefinito

    Da titolo: Layout tabellare con i div
    Il senso è: sappiamo che il CSS ti permette di gestire il layout come meglio si crede. A volte però capita che si vogliano inserire elementi grafici molto personalizzati (bordi, cornici con effetto rilievo o che so io) che con una stupidissima tabella con una riga che si adatta al contenuto (vedi codice, dove c'è il 'corpo pagina'), giocando un po' col colore di background principale, vengono fuori esattamente come li si vuole.
    Per cui: possiamo resistere alla tentazione di realizzare il layout con una tabella? Se sì, si riesce a tradurre FACILMENTE il "codice tabellare" di cui sopra usando dei div al posto delle celle? Ti dico, a me a volte è scappata la pazienza... elementi che non si "attaccano" in orizzontale, che devi aggiustare la situazione con valori negativi etc. etc. ... e ho mandato a quel paese la "regola" di costruire senza il tag table risparmiandomi qualche mezzora...
    Ti chiedo davvero il favore di provare a tradurre la tabella, meglio se commentando il CSS... A mio parere può essere utile non solo a me...
    P.S.1: il layout vero e proprio, nel senso dove inserire i contenuti, menu, immagini etc. l'ho pensato all'interno della cella centrale (corpo_pagina).
    P.S.2: ho visto il CSS layout generator... è esattamente ciò che NON mi serve... perché questa cosa la andrei a gestire appunto nella cella centrale.
    P.S.3: effettivamente forse non sono sufficientemente chiaro nel porre le questioni, sigh...
    Ultima modifica di coreyx : 13-08-2013 alle ore 10.02.43

  7. #7
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,647

    Predefinito

    Il problema è che cerchi di ragionare solo con le tabelle in mente. Per esempio, se vuoi aggiungere dei bordi particolari perché non usi semplicemente la proprietà border-image?

  8. #8
    L'avatar di coreyx
    coreyx non è connesso Utente
    Data registrazione
    21-07-2012
    Messaggi
    141

    Predefinito

    Probabilmente hai ragione, e una buona dose di pigrizia mi impedisce di andare un po' a fondo per riprodurre via CSS ciò che riproduco facilmente con immagini (o 'pezzi' di immagine). E' anche vero che con una sana jpg come background image sono sicuro che il layout mi viene riprodotto come voglio su tutti i dispositivi e praticamente con ogni browser... non so se si possa dire altrettanto usando un CSS3 diciamo "avanzato"... O mi sbaglio?

  9. #9
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,647

    Predefinito

    Probabilmente sì, ma io sono convinto che non sia necessario creare layout perfetti al pixel, identici su qualsiasi dispositivo (o browser).
    Io cerco sempre di tenere presente che un sito (così come qualsiasi altra risorsa) debba essere fruibile dal maggior numero di persone, per questo servono ad esempio layout capaci di adattarsi a varie risoluzioni.
    Ad ogni modo bisogna distinguere tra superfluo e necessario. Ciò che è necessario per il navigatore è la navigazione (appunto) del sito e la fruizione dei contenuti. Se poi il suo browser non supporta i bordi personalizzati (proprietà CSS border-image) o i bordi arrotondati, poco male: il contenuto sarà comunque visibile.
    Tornando al tuo problema: di che layout avresti bisogno? Cerca di spiegarlo senza fare riferimento alle tabelle o termini associati, l'unico termine permesso è colonna.

  10. #10
    L'avatar di coreyx
    coreyx non è connesso Utente
    Data registrazione
    21-07-2012
    Messaggi
    141

    Predefinito

    Citazione Originalmente inviato da karl94 Visualizza messaggio
    Tornando al tuo problema: di che layout avresti bisogno? Cerca di spiegarlo senza fare riferimento alle tabelle o termini associati, l'unico termine permesso è colonna.
    Mi spiace, non ci riesco, in quanto quello che a me manca, in linea del tutto generale, è uno "spazio di contorno" dei contenuti: una "tavola", con dei precisi bordi delimitanti, dentro i quali piazzare div, immagini e quant'altro. Nell'esempio fatto in http://jsfiddle.net/CBvrc/ gli elementi che ho indicato con "sopra, blocco footer, D, S, F" sono celle squisitamente grafiche... il layout diciamo "dei contenuti" è nella cella centrale... E lì sono assolutamente d'accordo con te che chi se ne frega dei margini arrotondati o non ombreggiati...

  11. #11
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,647

    Predefinito

    Quindi ti serve un semplice layout a tre colonne con testata e piè di pagina? Quali sono esattamente i problemi che incontri nel realizzarlo senza tabelle?

  12. #12
    L'avatar di acsocmel
    acsocmel non è connesso Utente attivo
    Data registrazione
    03-07-2007
    Messaggi
    462

    Predefinito

    bisognerebbe soprattutto vedere questo fantomatico "screenshot che il committente del sito ti manda"

  13. #13
    L'avatar di coreyx
    coreyx non è connesso Utente
    Data registrazione
    21-07-2012
    Messaggi
    141

    Predefinito

    Citazione Originalmente inviato da acsocmel Visualizza messaggio
    bisognerebbe soprattutto vedere questo fantomatico "screenshot che il committente del sito ti manda"
    Quella dello screenshot è solamente un'esemplificazione, un'ipotesi di lavoro.

    Possono bastarmi tre colonne o più, ma ragionare "per colonne" a volte mi impedisce di "incollare" al giusto pixel ad esempio un blocco "sopra" le colonne...
    In ogni caso, capisco la volontà di capire meglio il problema e di aiutarmi a "cambiare mentalità", e di questo vi ringrazio... ma in soldoni una struttura come quella descritta è facilmente riproducibile con dei div sì o no? E se sì, mi si può fare un esempio? Ringrazio anticipatamente.

  14. #14
    Guest

    Predefinito

    Devo essere sincero, non ho capito dopo tutti questi post che tipo di struttura devi creare, perdonami; però se quello che vuoi creare è come quella linkata nel sito sopra non mi sembra una cosa così difficile da riprodurre. Riguardo ai bordi invece non ho capito dove devi metterli.
    Se vuoi ti aiuto io, molto volentieri.

  15. #15
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,647

    Predefinito

    Un esempio semplice lo ha già fornito Alemoppo, possiamo partire da quello. Cosa ha che va o non va?

  16. #16
    L'avatar di coreyx
    coreyx non è connesso Utente
    Data registrazione
    21-07-2012
    Messaggi
    141

    Predefinito

    Citazione Originalmente inviato da karl94 Visualizza messaggio
    Un esempio semplice lo ha già fornito Alemoppo, possiamo partire da quello. Cosa ha che va o non va?
    Innanzitutto mannaggia a me che ho aperto questo topic che credevo di soluzione immediata...
    Allora: sono partito essenzialmente dall'esempio semplice di Alemoppo con qualche modifica sulle misure. Il problema è che i div, da buoni float, si posizionano dove trovano spazio... L'esempio lampante è su http://jsfiddle.net/VcqgW/
    A me servirebbe che i tre div "sx", "centrale" e "dx" fossero costretti ad avere la stessa altezza, dettata dai contenuti in "centrale" (che per me è il corpo vero e proprio della pagina).
    Prometto che se ricevo risposta, me la strafaccio bastare, poi chiudo e non rompo più.

  17. #17
    L'avatar di helpcode
    helpcode non è connesso Utente
    Data registrazione
    20-07-2013
    Messaggi
    139

    Predefinito

    coreyx il tuo problema si risolve molto velicemente usando la risorsa che ti ho linkato precedentemente. Ti basta poi modificare la larghezza di one, two o quel che vuoi con width:xxx px

    Vedi quì: http://jsfiddle.net/efyYz/1/ (larghezza di one compressa a 10px).
    Inserisci le misure che vuoi tu, e il layout è come lo chiedi tu, che riempe tutto lo spazio.
    PROBLEMI CON IL TUO SITO? TI OFFRIAMO ASSISTENZA GRATIS!

    Siamo un team di web developers & designers nato per dare un aiuto concreto a tutti i giovani sviluppatori ancora inesperti. Abbiamo creato HelpCode per decidarci a te, per rispondere ogni giorno alle tue domande. Gratis!

    HTML, CSS, JS, JQuery, PHP, Wordpress. Inviaci la tua richiesta a http://helpcode.altervista.org

  18. #18
    L'avatar di coreyx
    coreyx non è connesso Utente
    Data registrazione
    21-07-2012
    Messaggi
    141

    Predefinito

    Citazione Originalmente inviato da helpcode Visualizza messaggio
    coreyx il tuo problema si risolve molto velicemente usando la risorsa che ti ho linkato precedentemente
    Avevo visto, grazie... è che il display:table non viene digerito da parecchi dispositivi e anche i browser più vecchi non lo vedono... Siccome questa sottospecie di layout riguarda la grafica, non mi posso permettere che sbagli a impaginare...

  19. #19
    L'avatar di acsocmel
    acsocmel non è connesso Utente attivo
    Data registrazione
    03-07-2007
    Messaggi
    462

    Predefinito

    Citazione Originalmente inviato da australiafever Visualizza messaggio
    Devo essere sincero, non ho capito dopo tutti questi post che tipo di struttura devi creare
    cosa ci devi mettere di fianco alla colonna centrale?
    fai un disegnino come se tu fossi il commttente

  20. #20
    L'avatar di coreyx
    coreyx non è connesso Utente
    Data registrazione
    21-07-2012
    Messaggi
    141

    Predefinito

    Citazione Originalmente inviato da acsocmel Visualizza messaggio
    cosa ci devi mettere di fianco alla colonna centrale?
    Un'immagine ripetuta in verticale, o un colore di background, fai tu. L'unica domanda è: riesci ad adattare in altezza (height) le due colonne verdi alla colonna bianca che non ha una lunghezza fissa? Tutto qui. In questa maniera tutto si sistema.
    fai un disegnino come se tu fossi il commttente
    Non ne ho proprio il tempo, e sinceramente lo trovo inutile. Già sono mille volte pentito di aver aperto questo topic diventato inutilmente lungo...

  21. #21
    L'avatar di acsocmel
    acsocmel non è connesso Utente attivo
    Data registrazione
    03-07-2007
    Messaggi
    462

  22. #22
    L'avatar di coreyx
    coreyx non è connesso Utente
    Data registrazione
    21-07-2012
    Messaggi
    141

    Predefinito

    Eh eh! Hai ragione. Cospargo il capo di cenere: poche spiegazioni portano a risposte corrette ma che non fanno al tuo caso. Comunque usando un bordo colorato hai barato di brutto, però... ;-)
    Ok. Appena ho un po' di tempo preparo un'idea che possa simulare quello che ho in mente...

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •