Bandiera nera ai CSS-layout

Per l'ennesima volta, all'ennesimo nuovo progetto web ho dedicato tempo invano nel tentativo di impostare un layout tableless "non elementare".

Per "non elementare" intendo che era fluido (come, IMHO, dovrebbero essere tutti i siti web al giorno d'oggi), con le classiche 3 colonne + header e footer ed un po' più complesso dei vari esempi che si trovano sul web, ma niente che non si possa fare in meno di 10 minuti con un layout tabellare (annidato).

Ho letto in più articoli che sarebbe una questione di approccio: io sarei stato traviato dalle tabelle  e per tanto farei più fatica a capire come impostare il layout tramite div.
Beh... non credo sia il mio caso: io le idee su quale debba essere la suddivisione del mio layout ce l'ho ben chiara, le idee su come dovrebbero essere impostabili quei div ce le ho ben chiare, ciò che non ho ben chiaro è cosa ci sia di tanto "pulito" nell'utilizzare una serie di workaround, spesso ingrocchiati mica poco, per ottenere un risultato che nella migliore delle ipotesi è analogo a quello tabellare, considerando anche che, se non erro, i div sono indicati per l'impaginazione dei contenuti (es. un articolo che deve contenere riquadri ed immagini) e non per la definizione del layout grafico della superficie di visualizzazione.

Si perchè, tanto per dirne una al volo, float: right non dovrebbe servire a specificare "posiziona questo div sulla destra in un layout fluido", ma piuttosto "consenti all'eventuale testo di posizionarsi sullo spazio libero a sinistra" (tipico dell'impaginazione)!

Non si possono accostare due div senza utilizzare un posizionamento non statico: ma perchè??? Chi l'ha detto che due div non possono stare sulla stessa linea in modo naturale (come le img per esempio)???

Se si pensa al web "originale", quello di 30-40 lustri informatici fa, questa cosa ha un senso, mentre stride clamorosamente con l'idea di utilizzare i div per impostare un layout.
La butto lì: forse manca un tag che faccia il suo sporco lavoro di container e sia specializzato per questa attività.
Le tabelle tornerebbero a fare le tabelle di dati e i div tornerebbero a fare... i riquadri.

Io sono tutt'altro che un esperto di CSS e quanto scrivo può dare l'impressione di una persona che critica ciò che non riesce a fare, ma non è così, perchè ho dedicato tempo a leggere tutorial, a fare prove (vere, mica i due quadratoni colorati!), a cercare di capire ed in tutto questo tempo non ho MAI trovato risultati un minimo soddisfacenti, per non parlare del fatto che poi ti trovi nella piattaforma del futuro per applicazioni desktop dei nuovi controlli che ti permettono di impostare proprio un layout tabellare! Sarà per agevolare gli "pseudo-traviati" dalle tabelle o perchè un layout tabellare è realmente valido?

L'argomento secondo me scotta sicuramente e sono sicuro (conoscendomi) che bandiera nera o no, continuerà a pascolare nella mia mente.

Magari potrebbe essere un argomento per una sessione ad uno dei prossimi workshop, vedere che anche layout realmente complessi sono ottenibili con div+CSS senza effetti collaterali e con un codice CSS pulito.

Nel frattempo (purtroppo) ho dovuto recuperare i quasi 3 giorni di maldi...test CSS con 10 minuti e tre tabelle.

Print | posted @ mercoledì 18 luglio 2007 12:31

Comments on this entry:

Gravatar # re: Bandiera nera ai CSS-layout
by Luca at 18/07/2007 13:00

Ciao Mario, devo dire che non concordo con quello che dici in quanto i div oltre ad aiutarti nel realizzare un layout tableless ti permettono sopratutto di scrivere codice semantico con tutti i vantaggi che questo porta.
Ti lascio un link dove puoi vedere in azione layout realizzati con css
http://standardsreboot.com/

ciao ciao
Gravatar # re: Bandiera nera ai CSS-layout
by Mario Duzioni at 18/07/2007 15:39

Ciao, grazie anche a voi due per i links!

Matteo, concordo in pieno sulla tua visione (anche se forse ad oggi seguirei più l'esempio XAML + CodeBehind rispetto a XML + XSLT) ma ciò che mi blocca è sempre l'assenza di uno straccio di risultati (che comunque magari non riesco a raggiungere per mie carenze, come già detto).

L'esempio Gala2 di html.it è proprio quello che citavo prima (se non mi confondo): evviva, felicissimo, provo, inserisco un asp:Repeater piuttosto lunghino nel div del contenuto e... mi ritrovo la parte bassa del Repeater sotto il div degli extra!!! :-(
Gravatar # re: Bandiera nera ai CSS-layout
by Marco De Sanctis at 18/07/2007 17:20

Mi par strano, visto che proprio nell'esempio Gala2 puoi aumentare a piacimento la lunghezza del testo e tutto sembra funzionare senza problemi.
Gravatar # re: Bandiera nera ai CSS-layout
by Luca at 18/07/2007 17:53

Vedo che molti la pensano come me in fatto di XHTML semantico :-)
Cmq Mario l'esempio che hai su Layout Gala, funziona bene, tra l' altro il javascript che utilizza l'esempio non fa altro che creare lato client contenuto all' interno della sezione principale cosa che te invece fai sul server usando il repeater...
Saluti Luca
Gravatar # re: Bandiera nera ai CSS-layout
by Mario Duzioni at 19/07/2007 12:45

Infatti, Marco, non capisco... :-(
Riproverò...

Matteo, concordo con quello che dici e con la differenza che hai evidenziato (non avevo capito bene leggendo il primo commento, sorry!).

Luca, non avevo dubbi sul fatto che molti la pensano come te. Anzi, come ho scritto mi aggregherei più che volentieri... :-)
Che dire, con tanti feedback a favore, mi toccherà riprovarci alla prossima occasione...

Ale, claro che uso IE 7 inizialmente. :-) Poi testo sugli altri browser.
Io ho iniziato più tardi: 94-95

Grazie ancora a tutti per l'attenzione!!
Gravatar # re: Bandiera nera ai CSS-layout
by Mario Duzioni at 19/07/2007 12:49

"Io ho iniziato più tardi: 94-95"
Con le prime paginette web, intendo... Prima la connessione ad internet costava veramente troppo!!!
Comments have been closed on this topic.