Come fate a impaginare?

[E|ena]

voi come fate? dopo 3/4 siti che faccio ho sempre lo stesso dubbio.. se sbaglio o cmq faccio bene

io per impaginare le pagine web uso un insieme ti tabelle/celle/sotto tabelle
il grosso problema è che giocando con i padding e i margin è difficilissimo calcolare tutto bene
se ad esempio faccio una colonna larga 100 e poi devo mettere padding-left 10 mi devo sempre ricordare che la colonna non sarà più 100 ma 110 e adattare tutto quindi... e così via per tutto il sito..
a meno che io non lo so ed esiste un elemento che non "soffre" di questi disturbi :\

mi aiutate a capire ?

[pierofix]

Innanzitutto, a parer mio, l'errore principale consiste nell'utilizzo di tabelle per il layout:

- www.re1.it/pierofix/articoli/tabelle-layout.htm
- http://www.webaccessibile.org/argome....asp?DocID=336

In secondo luogo sei intrappolata nella sbagliata interpretazione che Internet Explorer dà al box model; il seguente è quello corretto e standard:

- www.w3.org/TR/CSS21/box.html

Il suggerimento, quindi, è quello di passare ad una progettazione intelligente che separi l'informazione dalla sua presentazione, ovviamente usando il binomio XHTML/CSS.

Se hai domande specifiche falle pure. Ti ricordo che ci sono anche i link utili sul forum di CSS&XHTML.

[E|ena]

questo discorso mi interessa davvero molto e mi piacerebbe stra-approfondirlo.. vorrei arrivare una volta per tutte ad una soluzione definitiva e facile da gestire

in questo esatto momento non posso porpio leggermi gli articoli sopra linkati (meno il primo gia letto da tempo) quindi ti chiedo gentilmente: in merito al secondo link, cosa significa giusto per capire di cosa parli "sbagliata interpretazione che Internet Explorer dà al box model"?

[pierofix]

Originariamente inviato da E|ena
cosa significa giusto per capire di cosa parli "sbagliata interpretazione che Internet Explorer dà al box model"?

Come saprai, ogni elemento in una pagina web occupa uno spazio "rettangolare". Le proprietè principali sono la larghezza, l'altezza, i margini, i padding e i bordi.

Il corretto box model, quello ufficiale del W3C, prevede uno schema come il seguente:



Specificando la larghezza ad un elemento ed inserendo allo stesso anche dei margini e dei padding, la larghezza complessiva risultante rimane quella specificata con 'height' e le altre dimensioni vengono calcolate verso l'interno.

IE, erroneamente, calcola la larghezza complessiva come somma di tutte le dimensioni in gioco. Usando i CSS occorre infatti spesso ricorrere ad un piccolo hack per ovviare il problema.

Appena hai tempo leggi con attenzione gli utili due link che ti avevo postato: sono molto chiarificatori.

[E|ena]

[B]
IE, erroneamente, calcola la larghezza complessiva come somma di tutte le dimensioni in gioco. Usando i CSS occorre infatti spesso ricorrere ad un piccolo hack per ovviare il problema.

Appena hai tempo leggi con attenzione gli utili due link che ti avevo postato: sono molto chiarificatori.

si si domani o quanto prima me li stampo e li leggo

allora è IE il bimbo cattivo
ma sbaglio o anche mozilla interpreta male però questa cosa? perchè se non erro anche li vengono aggiunti pixel modificando poi le reali misure..

quando dici "ricorrere ad un piccolo hack per ovviare il problema" cosa intendi? mi interessa molto

[pierofix]

Originariamente inviato da E|ena
allora è IE il bimbo cattivo

Già, proprio così.

ma sbaglio o anche mozilla interpreta male però questa cosa? perchè se non erro anche li vengono aggiunti pixel modificando poi le reali misure..

Difficile che Firefox, in queste cose, sbagli: è molto aggiornato rispetto alle ultime specifiche W3C. Forse hai fatto un po' di confusione con i fogli di stile e hai ottenuto problemi anche con lui.

quando dici "ricorrere ad un piccolo hack per ovviare il problema" cosa intendi? mi interessa molto

Esiste la famosa regola di Tantek per ovviare al problema:

- http://tantek.com/CSS/Examples/boxmodelhack.html

Sai che cos'è un hack CSS?

[E|ena]

Originariamente inviato da pierofix
Sai che cos'è un hack CSS?

emm. no
spiegami plz

[pierofix]

Originariamente inviato da E|ena
spiegami plz

Prima di approfondire, conosci la sintassi CSS di base?

[E|ena]

Originariamente inviato da pierofix
Prima di farlo, conosci la sintassi CSS di base?

si si i css li conosco benone

[pierofix]

Originariamente inviato da E|ena
si si i css li conosco benone

Sicura? Allora, usare un hack è, in parole povere, prendersi gioco di un determinato browser: basta trovare un suo punto debole ed il gioco è fatto. Ti faccio un esempio.

Si sa che IE non supporta (tra gli altri :rollo: ) il child selector, quindi si può sfruttare questa carenza per fregarlo. Una tecnica che uso di solito per aggiustare il box model anche per IE prevede un algoritmo del genere:

/*
   Dì a tutti i browser che quel div ha larghezza
   pari alla somma delle dimensioni concorrenti,
   usando quindi il concetto sbagliato di IE
*/

/*
   Adesso dì a tutti i browser che capiscono il
   child selector che stavi scherzando: il div
   deve avere larghezza corretta, come dice il W3C
*/

Cosa succede a questo punto? Semplicemente che IE rimane nel suo fango mentre i browser seri applicheranno la seconda istruzione, ignorando la prima (appunto sovrascritta dalla seconda).

Traducendo in codice l'algoritmo di cui sopra avremo:

div {
   width:60px;
   margin:0 20px;
}
body > div { width:100px }

Chiaro?