Filosofia progettazione layout

[fontlover]

Vado a sintetizzare anche se l'argomento per me e' molto ampio.
Abbiamo tutti capito che le tabelle vanno buttate via a livello di impaginazione, e cosi
sto passando anche io dalla flessibilita' delle stesse ai css.

E allora studio le table-row table-cell e anche se nn mi si comportano proprio come tr e td
capiro' cmq come usarle.

Poi vedo le position absolute e quant'altro.

Ma il punto e' questo .. usare table-row o posizionamenti assoluti in fondo nn e' un po come
usare sempre le tabelle solo che in un altro linguaggio?

E' diciamo "professionale" o cmq valido realizzare layout in questo modo?
Oppure dobbiamo limitarci agli standard di due colonne +contenuto , 3 colonne ecc.,
insomma i layout che vanno ora piu di moda.

E se volessi fare una pagina tipo alveare.. immaginate una griglia di 4 righe x 4 colonne
con 16 celle piu o meno da 150x150 esempio x mettere 16 foto di immobili, ma come 16
banner e cosi via... come dovrei fare?

NN so se e' chiara la domanda, ma in pratica vorrei delle indicazioni se realizzare uno stile
ex<table> anche se con css (table-row) e' una cosa elegante e poi funziona per tutti a
livello di viibilita' browser o come dovrebbe essere fatta una pagina tipo quella descritta
sopra un po distante dalle classiche 2 o 3 colonne +header/footer

Grazie mille a tutti coloro vogliano illuminarmi

[ricman]

Originariamente inviato da fontlover
Poi vedo le position absolute e quant'altro.

Meglio e meno incasinato se lasci i div come sono... quindi relative.

Originariamente inviato da fontlover
E' diciamo "professionale" o cmq valido realizzare layout in questo modo?
Oppure dobbiamo limitarci agli standard di due colonne +contenuto , 3 colonne ecc.,

Qui trovi molti esempi di come si lavora coi css...

Originariamente inviato da fontlover
E se volessi fare una pagina tipo alveare.. immaginate una griglia di 4 righe x 4 colonne
con 16 celle piu o meno da 150x150 esempio x mettere 16 foto di immobili, ma come 16
banner e cosi via... come dovrei fare?

Ogni cosa dipende dal risultato che si vuol ottenere. Per assurdo (fino ad un certo punto, dipende da cosa vuoi...) potresti fare una foto unica mappata nelle sue varie sessioni...
Ricordati solo che le tabelle servono per tenerci dentro i dati "tabellari" mentre i Div si usano per i layout...

[fontlover]

innanzitutto grazie mille ricman per la risposta..

certo ovvio tecnicamente si potrebbe fare anche una unica img mappata.
ora vedro gli esempi che mi hai postato.

ma la domanda era del tipo se invece del classico layout header/h1/contenuti/navigazione/footer insomma qualcosa del tipo a colonne, avessi
necessita' specifica di una pagina stile volantino,

e abbandonando il tag <table>

che faccio 16 box ? posiziono in modo assoluto? sfrutto (e mi impazzisco) combinando con l ' inline ? uso table-row di css ? se devo suddividere ulteriormente una immagine faccio
un box interno ad un altro?

ecco era un po questo il senso .. di layout css stupendi in giro ce ne sono tanti

http://www.freecsstemplates.org/ affascinanti !!!

ma se volessi un po esulare da questi che poi sono quasi tutti a colonne e fare qualcosa
tipo l'esempio che ho descritto, con che tecnica lo fareste?

grazie ancora a chi vorra' .. ciao

__________________________________________________ ___________________
esta noche se baila

[seed_squall_it]

Se devi posizionare dei box nella forma di una griglia, la semantica corretta prevede l'uso di una lista non ordinata (<ul>) dove ogni elementi[*] rappresenta un box facente parte della griglia. E' il tipico uso anche per gallerie di miniature di immagini. A questo punto devi flottare gli elementi[*] usando una regola di stile con float: left.

Tieni presente che l'uso del float è comodissimo per queste cose, ma è anche ostico da comprendere per chi si avvicina ai CSS. Ci vuole molta pratica per usarlo con disinvoltura in barba alle "trovate" che si inventa Internet Explorer.

Posso sintetizzarti qualcosa sui float che ti dovrebbe tornare utile.

1. Quando dichiari un elemento flottante (a destra o a sinitra con float: right o float: left) rendi tale elemento implicitamente un elemento a livello di blocco (block-level). Inoltre questo elemento viene ESTRATTO dal flusso del documento, pertanto tutti i box ad esso adiacenti (e i suoi contenitori) si dispongono come se il box flottato non esistesse (a meno che non siano anch'essi flottati). Un box flottante a sinistra (destra) si dispone contro il lato sinistro (destro) del box che lo contiene.

2. Dichiarando flottanti nella stessa direzione due o più elementi consecutivi nel flusso del documento, ottieni che essi si dispongono affiancati (se li flotti a destra, il primo elemento presente nel codice sarà quello più a destra e così via) finché hanno spazio orizzontale. Quando non c'è più spazio, i box flottati rimanenti si dispongono allo stesso modo su una nuova "riga".

3. Come detto al punto 1, i box flottanti sono estratti dal flusso del documento. Quindi, per fare in modo che la loro presenza influenzi il layout degli altri box adiacenti, devi ripulire il float tramite un elemento vuoto (
, <div>, ecc.) posto subito dopo l'ultimo box flottato e a cui assegnerai una regola CSS che effettua il clear (clear: left per pulire i soli float a sinistra, clear: right per ripulire solo i float a destra e clear: both per ripulire box flottati in entrambe le direzioni). La proprietà clear serve appunto a ripulire il float e ripristina, nel punto in cui copare l'elemento a cui la associ, il flusso normale del documento. Da quanto appena detto, appare evidente che se hai un box a cui non hai impostato un'altezza e che contiene solo box flottanti, tale box avrà sempre e comunque altezza pari 0, a meno che tu non ripulisci il float appena prima di chiuderlo (l'alternativa è rendere flottante anche il box che contiene i box flottanti, ma questo causa problemi in Netscape 6).

4. E' sempre buona norma usare un box ad hoc per contenere i box flottanti, e dimensionare tale box almeno in larghezza. Questo per evitare parecchi problemi dati da IE 6 in fase di interpretazione.

5. Alcuni noti bug di IE 5/6 con i box flottanti sono:
- 3px text jog, che lascia 3px tra il lato di un box flottante e il testo (non flottante) che segue tale box.
- doubled margin float: se flotti un elemento e specifichi per esso un margine sullo stesso lato del float (es.: margin-right con float: right), IE 5/6 raddoppia tale margine. Per evitare il problema basta aggiungere alla dichiarazione display: inline (che non ha giustamente effetto per nessun browser aderente agli standard, visto che i box flottanti sono sempre block-level), ma su IE risolve il problema dei margini raddoppiati.
- peek-a-boo bug: uno dei peggiori bug di quello schifo di browser. Avviene quando sono presenti molte cause (box non dimensionato con sfondo assegnato che contiene un box flottante, un testo non flottante che segue il box flottante senza superarlo in altezza e la mancanza di un box che effettua il clear). Questo bug fa scomparire il testo non flottante. Il testo riappare "a pezzi" selezionandolo col mouse oppure aggiornando la pagina.

Per una lista completa dei bug di IE (sono fin troppi!), ti consiglio: www.positioniseverything.com. Per la teoria del float model puoi consultare le guide di HTML.it oppure il sito www.constile.org.

[phplv]

Se ho compreso quello che vuoi fare, ovvero creare una pagina accattivante senza "fare a pezzi" la grafica per "rimontarla" su una struttura di codice convenzionale, l'unico modo è utilizzare il posizionamento assoluto dei blocchi: in firma trovi il mio sito che ne è una applicazione, insieme ad un po' di dhtml.

Io però non rifiuterei a priori di utilizzare le tabelle, non trovo molta differenza tra utilizzarle in modo improprio e annidare 3/4 blocchi uno dentro l'altro per ottenere una disposizione accettabile su ogni browser.
Se è vero che le tabelle nascono per contenere dati, è anche vero che i blocchi non sono stati pensati per ospitare altri blocchi vuoti, magari utili solo per specificare una proprietà di stile... zuppa e pan bagnato, insomma.

Forse è solo una questione di equilibrio: l'importante e non strutturare tutto il sito in modo tabellare, con tabelle annidate l'una dentro l'altra, perchè questo rende problematica l'accessibilità per determinate periferiche/browser... tolto questo, se ogni tanto ci scappa una tabella per ottenere un buon layout, pazienza, non succede nulla...

[fontlover]

GRAZIE DAVVERO DI CUORE RAGAZZI.

si ho letto e sto apprendendo box model , float, ho letto dei bug di IE ecc, e quindi teoricamente ci starei..

e' solo che soffro in questo momento di crisi mistica da layout

eheheh cmq grazie mille .. in realta' era proprio questo cioe' quando nnvoler fare una pagina
standard a colonne ma riportare in html quella che potrebbe essere una pagina da desktop
publishing come per esempio riportavo una griglia 4x4 da 16 miniature.

cmq siete stati molto d'aiuto e chi volesse puo' replicare...

dice bene l'amico forse in fondo inserire qualche tabella nn e' un peccato molto grave..

"""""in realta' volevo capire se fare una pagina di quel tipo a tabelle o a posizioni assolute
poteva essere sinonimo di noobagine o cmq poteva dare problemi di visualizzazione e
interpretazione nella combinazione di "vari browser"/"varie dimensioni video" e quindi realizzare una certa fluidicita' di layout anche in un qualcosa che per scelta grafica ha posizioni obbligate.... questo e' o sarebbe """""""

kissa forse abbiamo lanciato una bella discussione !!!

stupendo il sito micronsite wowow!!!!! bravo complimenti.. ora me loguardo bene

ciao a tutti