Layout tabellare con i div

12-08-2013, 09.31.26

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à.

**alemoppo** · 12-08-2013, 13.07.11

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!

12-08-2013, 15.27.34

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/

12-08-2013, 21.13.37

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...

**alemoppo** · 12-08-2013, 22.14.51

Originalmente inviato da coreyx

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!

13-08-2013, 08.56.32

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...

**karl94** · 13-08-2013, 20.26.15

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?

13-08-2013, 20.37.25

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?

**karl94** · 13-08-2013, 20.45.09

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.

13-08-2013, 20.59.43

Originalmente inviato da karl94

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...

**karl94** · 13-08-2013, 21.32.05

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?

**acsocmel** · 13-08-2013, 21.42.13

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

13-08-2013, 22.02.40

Originalmente inviato da acsocmel

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.

13-08-2013, 22.11.21

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.

**karl94** · 13-08-2013, 22.15.40

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

14-08-2013, 10.06.50

Originalmente inviato da karl94

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ù.

14-08-2013, 12.39.37

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.

14-08-2013, 13.22.29

Originalmente inviato da helpcode

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...

**acsocmel** · 14-08-2013, 13.42.16

Originalmente inviato da australiafever

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

14-08-2013, 14.22.25

Originalmente inviato da acsocmel

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...

**acsocmel** · 14-08-2013, 14.47.22

http://jsfiddle.net/acsocmel/S65Yn/2/

14-08-2013, 16.03.50

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...

Discussione: Layout tabellare con i div

LinkBack

Strumenti discussione

Display

Layout tabellare con i div

Tags for this Thread

Regole di scrittura