Newsgroup: it.comp.www.html
Titolo: Dibattito: Ma i CSS possono davvero rimpiazzare le TABELLE?

Salve NG!
E' da sempre che utilizzo le tabelle per il disegno dei miei Layout.
Ultimamente si sente parlare (e si legge) del fatto che, con gli
standard attuali dettati dal W3C, sarebbe più opportuno utilizzare,
per il disegno dei propri layout, i CSS in accoppiata al DIV. Ma
quellò che mi chiedo è: davvero i CSS sono in grado di fare TUTTO CIO'
che le tabelle offrono...senza utilizzare le tabelle?!?
Una prima cosa che ho notato, è che il posizionamento dei DIV avviene
quasi sempre in modo ASSOLUTO. Io ODIO il posizionamento assoluto (mi
sembra di lavorare per la carta stampata e non per il web). Inoltre,
con il posizionamento assoluto non si possono realizzare alcune
interfacce particolari (tipo quelle centrate orizzontalmente e/o
verticalmente). Facciamo un esempio.
Consideriamo il sito 
www.sosplanet.it
 . Supponiamo, per semplicità,
che il layout sia realizzato attraverso una tabella formata da 1 riga
e 3 colonne. La colonna centrale è fissa (ad es: 300px), mentre le due
laterali contengono due sfondi(diversi) che vanno ripetuti fino a
riempire la larghezza della pagina. Più precisamente, lo spazio
rimanente una volta eliminati i 300px, viene suddiviso equamente tra
le due celle laterali. Cioè la tabella, praticamente, è così
strutturata:
CELLA SX (50%)     |     CELLA CENTRALE (300PX)     |     CELLA DX
(50%)
Come si potrebbe realizzare una cosa del genere con i DIV?
L'esempio mette in evidenza uno dei pregi FONDAMENTALI delle tabelle:
la possibilità di fare in modo che una cella "spinga" un'altra cella.
Un'altro modo per evidenziare questa properietà è quest'altro esempio:
Riconsideriamo la tabella vista precedentemente, ma, questa volta,
supponiamo che, contenga 3 righe e 3 colonne.
Le due colonne laterali servono sempre a contenere uno sfondo da
ripetersi (questa volta suddiviso tra tre righe, che per semplicità
possiamo rappresentare con i colori GRIGIO - BIANCO - GRIGIO), mentre
la parte centrale contiene una zona superiore (GRIGIA) una parte
centrale (BIANCA) ed una inferiore (GRIGIA). La parte centrale
contiene del testo.
La tabella sarà, quindi, così strutturata:
CELLA_SX_SUP (GRIGIA)  |   CELLA_CENTRALE_SUP (GRIGIA)  | 
CELLA_DX_SUP (GRIGIA)
CELLA_SX_CEN (BIANCA)  |   CELLA_CENTRALE_CEN (BIANCA)  | 
CELLA_DX_CEN (BIANCA)
CELLA_SX_INF (GRIGIA)  |   CELLA_CENTRALE_INF (GRIGIA)  | 
CELLA_DX_INF (GRIGIA)
Ora, se per qualche motivo (ad es: dimensione caratteri maggiore) la
zona centra dovesse ALLUNGARSI VERTICALMENTE, con el tabelle non ci
sarebbero problemi perchè si allungherebbero verticalmenete anche le
due celle BIANCHE laterali che, quindi spingerebbero quelle inferiori
generando, così, un'interfaccia corretta.
Dove tutta l'interfaccia, come si può mnotare, è sempre centrata sia
Verticalmente che Orizzontalmente.
Come si potrebbe realizzare una cosa del genere con i CSS?
Spero di essermi spiegato correttamente.
Fatemi sapere cosa ne pensate, Bye, Animanera. :)

 che le tabelle offrono...senza utilizzare le tabelle?!?
Si', dai una occhiata alla proprieta' display.

Come si potrebbe realizzare una cosa del genere con i DIV?
Devi studiarti il box-model dall'inizio. In pratica, ti assicuro che
con l'uso combinato delle proprietà float e width si puo` fare di
tutto e di piu` .. il difficile e` fare in modo che funzioni, almeno
con i browser principali :-))
In ogni caso, io sposo la tesi secondo la quale i tempi sono ormai
maturi per abbandonare i layout a colonne e passare ai CSS. Da ora in
avanti, c'e` solo da guadagnarci.
Ah, questa e` una proposta di home-page di Lycos che verra` adottata
prossimamente, interamente basata sul box model e senza l'ombra delle
dannate tabelle:
http://jscript.dk/lycos/2/
Purtroppo il layout non e` fluido, ma non e` comunque una cosa da
poco.
Ciao,
 P.

 pagine e rinunciano a studiare il box-model seriamente.
Inoltre si dice che bisognerebbe abbandonare l'approccio visuale alla
progettazione...ma i CSS non sono strutturati in maniera tale da
richiedere proprio un approccio visuale, ancora di più delle tabelle?
Grazie, bye, Animanera. :)

 Come si potrebbe realizzare una cosa del genere con i CSS?
Be, ti dico che sto lavorando a un sito con un layout non banale
e, dopo un inizio abbastanza faticoso (anch'io ho sempre usato
le tabelle!), sono riuscito a realizzare una discreta interfaccia,
ridimensionabile e fluida, usando solo i CSS, producendo pagine
conformi allo standard.
Il problema di usare solo i CSS può stare nel supporto che i
browser offrono ad alcune features, in particolare sul calcolo
delle percentuali; io sono riuscito a produrre
codice che si vede identicamente in IE e Mozilla, ma non in
Opera (chissene.....!), dove alcune cose svolazzano qua e la.
La speranza è che in un prossimo futuro si abbia un supporto
pieno da parte dei browser.
Fabio

pieno da parte dei browser.
Magari :)

richiedere proprio un approccio visuale, ancora di piů delle tabelle?
Forse intendo (forse) un'altra cosa...il progettare il layout in modo
diverso, non piů mischiando nell'html contenuto e layout ma
separandolo tramite html (contenuti) css (layout).
ciao ciao

 ??
!
Si, in effetti io mi riferivo al posizionamento assoluto in pixel,
e penso, dal tono, che era quello stesso a cui si riferiva Animanera,
parlando di carta stampata.
Usando absolute con dimensioni in px riesci a realizzare quello che
vuoi, ma a dimensione fissa, non adattabile alla risoluzione del
client.
In realtà il problema, è chiedo scusa per la misinterpretazione,
e tra l'utilizzo di unità di misura assolute o relative.
Pardon!
Fabio
Ps: mi viene in mente ora: realizzando un file css parametrico
(in ASP,PHP,etc) e sniffando la risoluzione del client, si
potrebbe creare una pagina precisa al pixel e adatta alle varie
risoluzioni... bo... cosa ne pensate? consentirebbe di superare
il calcolo "arcano" delle percentuali che i browser fanno...

 richiedere proprio un approccio visuale, ancora di piů delle tabelle?
Assolutamente no, devi avere capito male. I CSS sono la parte
"visuale" o meglio "di presentazione" del web, ma prima viene un certo
lavoro per l'organizzazione logica dei contenuti, che si concretizza
nel documento XHTML. Riconosco che si tratti di un bel cambiamento di
paradigma, soprattutto per chi viene dal mondo della grafica ed e`
sempre stato abituato a lavorare "sulla pagina", ma e` da questa base
(la separazione tra contenuti e presentazione) che scaturiscono tutti
i vantaggi.

(in ASP,PHP,etc) e sniffando la risoluzione del client
Dicesi "accrocchio" :-)
Ciao,
 P.

quasi sempre in modo ASSOLUTO. Io ODIO il posizionamento assoluto (mi
Č ampiamente configurabile...
-- 
ciao,
Marco

tabella esterna non sono riuscito a toglierla in nessun modo.
Tsk, tsk.. :-)
Ciao,
 P.

 tabella esterna non sono riuscito a toglierla in nessun modo.
Hai provato a mettere qualcosa del tipo:
#enorme {
	position:	absolute;
	left:		2px;
	right:		2px;
	padding:	4px;
}
e mettere poi un
<div id="enorme">
	resto del codice nestato all'interno
</div>
?
See you,
	Silver Drake
--
Digital Rights: Every bit you compute 
can and will be used against you. [SD 2002]
http://www.iammol.com

 il calcolo "arcano" delle percentuali che i browser fanno...
La risoluzione non è la grandezza della finestra, quindi servirebbe
quest'ultima... e se uno allarga la finestra dovresti ricaricare tutto.
Naaaaa!!
LAMASE

 conformi allo standard.
Non potresti postare l'URL, così "prendiamo spunto" ? :)))
Un'ulteriore domanda tecnica (stavolta più breve di quella del primo
messaggio): se volessi CENTRARE VERTICALMENTE (nella finestra) una
qualche immagine con i CSS, come potrei fare? (da quanto ho visto
tutti gli attributi sono relativi ad allineamenti in orizzontale).
Bye, A presto, Animanera. :)

Hai provato a mettere qualcosa del tipo:
Ho provato ogni cosa possibile. L'ultimo risultato č
http://www.bofh.it/index-piero.html
, che in effetti sostituisce la
tabella come le altre mie prove. Il problema č che le due colonne non
sono fluide: io vorrei che restringendo il browser alla larghezza della
prima colonna la seconda gli scivolasse sotto, rimanendo sempre
attaccata al margine destro. Invece cosě non sta nel 40% di schermo che
gli č stato assegnato e viene creata una scrollbar.
-- 
ciao,
Marco

gli è stato assegnato e viene creata una scrollbar.
Non ho ancora capito se tu vuoi che la seconda colonna vada "a capo"
appena entrambe colonne non entrano nella finestra, oppure solo quando
la finestra e` piu` stretta della prima colonna (in questo caso
dovrebbe esserci la scrollbar per poter visualizzare tutta la seconda
colonna, prima che questa vada a capo).
In ogni caso non saprei dire se esiste un comportamento standard e
cross-browser per le scrollbar, non e` che questo dipende dal tipo di
windows manager?
Nella pagina che hai citato, 
p.es
., IE mi attiva o meno una scrollbar
orizzontale per varie dimensioni della finestra, anche molto prossime
tra loro, senza nessun criterio apparente! :-)
Ciao,
 P.

windows manager?
No.
-- 
ciao,
Marco

 wrote:
Provato a cambiare i valori (es. 800px) con %?