Spiegazione allineamento Div

[alemix]

Salve ragazzi, da poco sto cominciando ad usare al posto delle tabelle i Div, per il layout della pagina, ma se da una parte li trovo molto ordinati e più semplici, dal fatto dell'allineamento li trovo tutt'altro che così semplici.

Nelle buone e care vecchie tabelle una volta che capivi i meccanismi era molto semplici, facevi una struttura più o meno rigida, e tutto stava li dovevi mettere una serie di tabelle, una che parte da una parte una dall'altra facevi delle tabelle più grosse che prendevano la forma e c'è le facevi stare, poi una volta fatto il layout, metti degli include e lavori dentro ad altri fogli per non incasinarti la vita ^^

Ora invece non riesco ad entrare in ottica, ho letto un po dei float ma a volte mi capita che usandoli mi sballa completamente il tutto, a volte un div viene messo a metà di un'altro div e sto impazzendo a fare un layout semplicissimo a 2 colonne.

Dove posso trovare una guida pratica che ti spiega la teoria dei div? magari con qualche esempio, ci fosse qualche libro a pagamento va bene uguale l'importante e riuscire a fare quello che devo fare, anche perchè con i div riesco a lavorare benissimo, finalmente fai i fogli di stile da una parte e poi li ti rimane solo da dare dei contenuti e non fare tutto assieme che ti rimane un casino!

Grazie mille in anticipo

[Mich_]

Tutte le tue domande trovano risposte nei "link utili".

Un buon manuale dei CSS c'e` nel sito di HTML.it (anzi mi pare che i manuali siano piu` di uno, adesso).

Per quanto riguarda gli esempi, vai nella sezione "layout" dei "link utili" e trovi vari riferimenti. Inizia dai piu` semplici ed analizzane il codice (HTML e CSS)

Nelle buone e care vecchie tabelle una volta che capivi i meccanismi era molto semplici

Con i <div> ed i CSS e` ancora piu` semplice, perche` la struttura fisica (la suddivisione in blocchi) e` assolutamente uguale alla struttura logica (semantica): si tratta appunto di capire i meccanismi, ma occorre liberara la mente dalle vecchie tabelle, in cui prima pensavi a come posizionare gli elementi e poi scrivevi la struttura logica: coni CSS prima scrivi la struttura logica semantica e poi pensi a come formattarla.

Prima il contenuto, poi la formattazione

[alemix]

Grazie per la risposta, e scusa per l'ignoranza, per struttura fisica intendi il blocco Div, quindi diciamo il quadrato che viene definito il div, però per la semantica cosa si intende, sono un autodidatta, ma io per semantica intendo cioè il contenuto del codice, cioè esempio se metto un div scritto giusto ma senza senso logico, ora non mi vengono esempi.

Poi ho dato un'occhiata, chiedo ancora scusa ma non avevo visto che c'era la discussione, però non ho trovato quello che cerco, o almeno c'erano gli esempi ma in inglese e non ho capito bene! non è che sai già dove posso dare un'occhiata, perchè per ora ho dato una risoluzione non corretta del problema!

[Mich_]

Attenzione che quella che dici tu e` la sintassi. La semantica e` il significato intrinseco degli oggetti.

Ad esempio una tabella porta con se` un significato intrinseco di relazione riga e colonna (cioe` ogni riga e colonna ha un significato, che sia esplicito con un suo titolo o implicito: esempio tabella di nomi, cognomi, indirizzi e n.di telefono - ogni riga e` un utente, la prima colonna sono i cognomi, ecc.)
Quindi quando usi una tabella inserisci una sua semantica, che non riesci a togliere.

In un layout, ci puo` essere un contenitore (<div>) che contiene il menu, uno che contiene il titolo della pagina (header), uno con le note a fondo pagina (footer): ciascuno ha un suo significato semantico (che in HTML5 e` stato anche esplicitato con dei nomi particolari per contenitori usati spesso).

Per quanto riguarda gli esempi in inglese: capisco che possa sembrare complesso per chi non conosce la lingua, ma comunque il codice usa espressioni inglesi, e quelle e` necessario capirle.
Inoltre i manuali in inglese sono molto piu` aggiornati e corretti (e` questione di numeri: se con l'inglese raggiungo 1 miliardo di persone e con l'italiano ne raggiungo 10 milioni, e` molto piu` probabile che quanto di tecnico e` scritto in inglese sia stato letto e rivisto da molte piu` persone, e quindi abbia meno errori).

Comunqeu qualche esempio in italiano lo trovi. E poi puoi sempre usare la ricerca in rete, una volta che hai capito quali sono le parole chiave da cercare.

[alemix]

Ok grazie, non è che l'inglese non lo so, però ho sempre preferito leggere in italiano le cose basilari in modo da poter poi più avanti approfondire con l'inglese. Però guardando gli esempi credo di aver capito all'incirca ^^ anche con le tue spiegazioni .

Ora però ho un dubbio, i Div concatenati si possono fare? cioè io dovrei fare un div con all'interno altri div.

Sto provando ma ho visto che se io faccio un div corpo con un colore di sfondo per esempio, poi al suo interno prendo un'altro div da piazzare a sinistra e ci metto un tot di cose, scritte o immagini che siano e poi a destra faccio un menù magari con 2 div la costruzione mi viene un casino. Cioè questi fuoriescono dal div corpo.

Leggendo su internet avevo letto che mettendo 2 div con la stesso float li allineava uno attaccato al bordo e uno subito dopo, quando poi mettevo il terzo div, questp veniva piazzato in centro. Allora facendo prove sono arrivato a questa struttura ma dove ho 2 div l'ultimo fuori esce da quello centrale.

Ora continuo a provare. ma se riesci a darmi una mano faccio prima ^^

[Mich_]

Classico esempio di mancanza del clear.
Fa' una ricerca nel forum (ci sono migliaia di interventi) o vedi: [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

Gli oggetti float escono dal normale flusso, quindi il loro contenitore si trova vuoto (e diventa piccolo). Con il clear tu obblighi il contenitore a contenere anche i float

[alemix]

OOOHHH Grazie ^^ finalmente sono riuscito a risolvere, anche se sinceramente non ho ben capito a cosa serve questo clear (ho guardato un'esempio così veloce ma ora guardo bene per cosa serve)

Adesso già si comincia già di più a ragionare ^^