Layout con i css, proprio non mi viene!

[uMoR]

Ho usato per troppi anni le tabelle, adesso per passare ai css mi incasino di brutto!

Ho letto guide tutorial esempi pratici eppure mi incasino, per esempio mi incasino quando devo posizionare delle immagini, uno sfondo, un box e così via.

Qualcuno può consigliarmi come passare meglio da tabelle a css perfavore ?

grazie

[seed_squall_it]

Chi proviene dalla vecchia "scuola" che insegnava a usare le tabelle per i layout (io stesso le ho usate per anni) trova sempre problemi con i CSS all'inizio...è normale.
La cosa importante è capire che gli elementi del codice XHTML sono box, non celle di tabella. Se con le tabelle si era abituati a una "griglia" in cui si posizionavano gli elementi dentro le celle, con i CSS si deve dimenticare questo assunto. Le celle sono per forza di cose dipendenti le une dalle altre, dal momento che se si aumenta l'altezza di una cella, si aumenta anche l'altezza di tutte le celle della stessa riga. Questo può sembrare logico e funzionale (e con le tabelle lo è), ma con i CSS diventa totalmente privo di significato. In pratica, il passo più "difficile" da compiere è considerare i box generati dagli elementi XHTML indipendenti. Anche se hanno una funzione simile alle celle (sono rettangoli che contengono qualcosa), non sono "legati" gli uni agli altri, perché del tutto indipendenti. E' questo che rende spesso difficile la comprensione di concetti un po' particolari come il float o i margini negativi, specie se aggiunto ai troppi bug di IE. In particolare, IE sembra molto più coerente per chi è alle prime armi con i CSS dei browser aderenti agli standard come Firefox, perché visualizza la pagina "come ci si aspetta che sia". In realtà, se ci sono differenze tra IE e Firefox, al 99% è IE che sbaglia. Quando si riesce a pensare alla pagina come a un'insieme di box indipendenti anziché come a una griglia rigida, si è già fatto il primo importante passo. Per il resto penso che i tutorial siano più che sufficienti per imparare, con un po' di applicazione e...tanta pazienza (specie con IE!). L'approccio classico che si ha è di considerare il <div> come una cella in cui inserire poi altri elementi (titoli, paragrafi, immagini, ecc.). Invece bisogna sforzarsi di usare i <div> (che non hanno nessun significato semantico) solo quando strettamente necessario, ad es. per creare dei contenitori che limitino la larghezza dei box al loro interno. Tutti gli elementi XHTML sono infatti dei box. Poi bisogna conoscere molto bene la natura di ciascun elemento (block-level, inline, replaced, table, list) e di conseguenza sapere con si comporterà quell'elemento di default, in modo da poter agire su di esso con le regole CSS appropriate.

[uMoR]

Io faccio un macello enorme a posizionare le cose.

Tipo se faccio un menu come quello dei siti di html.it impazzisco e dopo 2 ore butto via tutto
E' un pò come imparare a programmare in c Dopo 50 Segmentatio fault butti via tutto...

Proverò concependo il layout come "slegato" e vediamo.. grazie della dritta

[seed_squall_it]

Infatti i posizionamenti portano spesso a diversi errori...bisogna prima studiare bene il markup XHTML (soprattutto per evitare di incappare in qualche bug dei browser) e quindi agire sugli elementi con i CSS. Se mi fai un esempio di "macello" che fai con i posizionamenti, vedo di darti delle linee guida...

[uMoR]

Guarda il sito in questione è: http://www.hostingpratico.com/

Ti dico dove mi incasino:
- mettere lo sfondo così com'è
- posizionare i bordi dei box

[thomas_anderson]

innanzitutto, complimenti per il sito: semplice, gradevole, professionale. due cose:

1. il posizionamento ha dei problemi nei browser standard, come FF e Opera. chi viene dalla old school è abituato più a IE. in questo caso devi tenere presente le dimensioni del box. prima di iniziare, ti consiglio di leggere CSS guida completa:

http://www.constile.org/css_guida_completa/

poi aggiusti per IE. ci sono anche gli hack:

http://gabrieleromanato.altervista.o...s-hack-ed-ie7/

con i commenti condizionali.

2. devi conoscere le proprietà CSS. studiati prima bene le varie guide. poi inizia. comunque sei già ad un ottimo punto.