Newsgroup: it.lavoro.professioni.webmaster
Titolo: CSS: le misure corrette dei DIV. In breve il boxmodel di IE

 
http://nuke.daguanno.it/Portals/0/003.gif
ed infatti, considerando che la somma delle larghezze dei due DIV
interni al DIV "middle" dà proprio la sua larghezza (senza considerare
i bordi), il DIV "right" va a capo.
Di sicuro ci sono 1000 modi per risolvere questa situazione: vorrei
sapere quelle che secondo voi è più giusta (secondo le regole del
w3c?).
Sul sito ConStile.org (
http://www.constile.org/tutorial/IE5_box_model/
)
se ne parlava già diversi anni fa, il 03/09/2002, ma cercando nella
rete non ho avuto l'impressione che il problema sia risolto...
Chi mi sa aiutare (eventualmente con link e riferimenti ad altra
documentazione)?
Grazie a tutti.

Per poter posizionare due elementi sullo stesso rigo devi anche
indicare le due posizioni Float. Nel CSS del Div "Right" oltre a non
aver calcolato il Bordo, hai indicato "Float:left", cioe' mantieniti a
sinistra del rigo, e a sinistra del rigo sappiamo che ci sta gia' Div
Left, e per quello scende di un gradino.
Per tutti e due i browser lasciando tutto come sta nell'Html, devi
modificare nel CSS i seguenti parametri:
 div#right {
 background-color: #ffffcc;
 border: 1px #000000 solid;
 float: right; /* Deve essere right  (destra) e non Left, altrimenti
non puo' spostarsi sullo stesso rigo! */
 padding:0px;
 text-align: left;
 width: 546px;   /*  4 Centimetri per il bordo sono il minimo per
potersi inserire sullo stesso rigo. */
} 
Spero d'esserti stato d'aiuto.
Angelo Palma 
www.webxall.net

 Angelo Palma 
www.webxall.net
Cmq grazie per la risposta.

 errata interpretazione del box-model da parte di IE.
-----------------------------------------------------------------------------------------------------------------------
Rispondo al punto 1.
Guarda che forse non e' ben chiaro cio' che stai facendo. Dalle foto
che hai mandato il div sinistro ha a fianco il div destro sullo stesso
rigo. Per inserire sullo stesso rigo con quei parametri che hai
indicato, si deve fare necessariamente e solamente come ti ho indicato!
Un buco in mezzo alla pagina non potra' mai esserci se hai indicato le
dimensioni del contenitore padre, inserendo i due figlioletti uno a
fianco all'altro all'interno. Il browser non se li inventa i parametri!
Se tu dici largo 500px e all'interno calcolando il bordo inserisci due
contenitori sullo steso rigo di 250px di larghezza, un buco non potra'
mai esserci.
Qui al punto 2
Il Div middle il bordo lo perde eccome, guarda bene a destra e sinistra
dell'intero rigo, dopo aver inserito le modifiche che ti ho consigliato
e vedrai che manca il bordo. I bordi superiore e inferiore che vedi
sono quelli dei contenitori figli!
E in ogni caso ti consiglio di inserire l'elemento style="border:none"
!
Spero d'esserti stato d'aiuto!
Angelo Palma 
w.ww.webxall.net

 documentazione)?
Devi considerare che Firefox aggiunge (correttamente) i 2px del bordo alla 
width del div, quindi in totale arrivi - non a 700px ma - a 704px. Puoi 
usare questa soluzione che funziona correttamente anche su IE7:
div#left {
 background-color: #ffccff;
 border: 1px #000000 solid;
 float: left;
 padding:0px;
 text-align: left;
 width: 148px !important;
 width/**/: 150px;
 }
 div#right {
 background-color: #ffffcc;
 border: 1px #000000 solid;
 float: left;
 padding:0px;
 text-align: left;
 width: 548px !important;
 width/**/: 550px;
  }
In alternativa elimina i bordi.
Non l'ho provato, ma dovrebbe funzionare. Comunque alcune spiegazioni le 
trovi qui [-mio sito]:
http://www.minidesign.it/apri/Webdesign/Xhtml-e-Css/Box-model-un-workaround-per-IE/
Ciao,
Mario. 

 
http://www.constile.org/images/tutorial/IE5_box_model/standard.gif
box model Internet Explorer
http://www.constile.org/images/tutorial/IE5_box_model/ie5.gif
Ciao.

 
http://www.minidesign.it/apri/Webdesign/Xhtml-e-Css/Box-model-un-workaround-per-IE/
Interessante.
Ciao e grazie.

Rispondo un po' controvoglia, ma devo farlo per mettere in chiaro una
cosa.
Tu chiedevi quale tecnica sarebbe stata in linea con la W3.org. La
tecnica e' esattamente quella che ti ho descritto nel CSS, e in
aggiunta devi usare Style border:none.
Lo dico di nuovo perche' sembra che non ti e' chiaro. Tu stai inserendo
in un contenitore padre du piccoli contrenitori la cui somma in
larghezza da il totale della larghezza del contenitore padre meno il
bordo. I due contenitori figli li hai posti sullo stesso rigo, e qui te
lo ripeto un altra volta, SULLO STESSO RIGO 2 contenitori di larghezza
totale simile al contenitore padre. Se i contenitori o altri elementi
devono stare sullo stesso rigo e occupare insieme il totale del
contenitore padre, devono essere posizionati uno a destra e uno a
sinistra, perche' i loro bordi diano la somma esatta di cio' che dovrai
estrarre per inserirli insieme sullo stesso rigo e cosi' rispettare
tutti i browser. Se inserisci tutti e due i contenitori facendoli
fluttuare a sinistra vai incontro ai problemi che tu stesso hai potuto
rilevare, e cioe' lo scendere di rigo da parte del contenitore che si
appoggia a destra dell'altro. Ti consiglio di fare le tue prove con il
Dreamweaver 8 o superiore e non magari con un Front page.
NON ci sono altri metodi o tecniche se si parla di 2 contenitori in un
contenitore grande piazzati uno a fianco all'altro!
Il seguire la tecnica che ti ho consigliato fa si che in tutti i
browser di tutti i tipi e versioni il tuo contenitore appaia identico
rispettando anche la W3.org.
Se poi ipoteticamente tu vuoi aggiungere un terzo contenitore, questo
per prima cosa non era in discussione, e per seconda cosa cambierebbe
di poco il discorso, perche' il contenitore centrale si posizionerebbe
automaticamente al centro indicando nel CSS "margin:auto".  Bada bene,
non margin 0 auto 0 auto; ma solo margin:auto.
Saluti....
Angelo Palma   
w.ww.ebxall.net

 che si appoggia a destra dell'altro.
Dovrebbe essere proprio questo il risultato del float:left sul secondo div, 
il che significa che i due div risulteranno essere allineati 
orizzontalmente.
Mario. 

 Front page.
Ok, ora si spiegano molte cose...
Non offenderti, ma se usi DW (o peggio FP) per fare pagine XHTML,
significa che io e te viaggiamo su due treni in direzioni opposte: ora
capisco il perché di tutte queste incomprensioni.
Ciao.
PS: Comunque nel post precedente ho dimostrato come utilizzando un
contenitore unico per tutto il sito, non avevo problemi. Ma ormai devo
riuscire a capire come annullare il bordo del contenitore...
Ancora ciao e grazie per il confronto che stai sostenendo (riuscendo a
mantenere la calma, generalmente si parte con insulti e quant'altro)...

 orizzontalmente.
Ok! La pensiamo (forse perché non è un'opinione ma un dato di fatto)
allo stesso modo. Ma che mi dici a riguardo del pixel di cui sopra? Fai
anche tu la prova che ho conisgliato a Angelo e fammi sapere: due
riscontri sono meglio di uno.
Ciao e grazie.

 iscontri sono meglio di uno.
Una volta applicate correttamente le tecniche di box model non ci sono 
problemi.
http://www.minidesign.it/lab/esempi/ng-dag/
Testato su win Xp con IE 6 e 7, Opera e FF (border sui div interni, i quali 
hanno float:left)

 hanno float:left)
Hai barato. Forse è giusto cosi, bosogna barare! Però hai barato. Non
ho misurato con un programma di grafica i pixel della tua pagina, ma
dimmi lo spazio relativo al contenuto (in questo caso 700px, visto che
gli standard indicano il width come lo spazio adibito al conenuto e non
alla larghezza generale del box) è identico su tutti i browser
testati? (Se non erro, a occhio e croce nel tuo esempio hai utilizzato
698px anziché 700px, ma fa lo stesso! L'importante è che sia uguale
per tutti i browser)
Bravo m4r10, anzi bravissimo. Finalmente una persona tecnica! Hai
barato, ma ti meriti lo stesso un 10 (senza lode) ;)
Alla prossima (a meno che qualcuno non abbia altre idee)

 barato, ma ti meriti lo stesso un 10 (senza lode) ;)
ROTFL 

Visto che si chiede se qualcuno ha altre idee, mi sento di nuovo in
dovere di rispondere ;)
Dopo che vi siete scervellati a capire cosa dicono la W3.org e gli
altri siti trattanti il tema CSS, vi invoglio ad essere professori voi
stessi delle vostre pagine. E cioe' non fate cio' che dicono loro con i
ragionamenti loro, ma ragionateci da soli per arrivare alle verita'
piu' logiche.
L'esempio che ho portato consigliandolo a Dag, e' frutto di un
esperienza diretta e non di parole scritte al vento. La pagina che
conterra' il Box che ho consigliato sara' visibile identicamente su
tutti i browser, anche su quelli a voi sconosciuti.
Tornando al Box di Dag, se aveste fatto una prova con un software che
mostra la grafica del Box sottolineando i bordi, e i parametri indicati
nel CSS,  sareste stati subito daccordo con il mio consiglio. Inserire
due contenitori fluttuanti a sinistra lascia uno spazio
"ipoteticamente" vuoto a destra, perche' il browser calcola il bordo
destro e sinistro della coppia dei DIV, e lo fa in maniera errata
perche' non calcola il bordo centrale cioe' dove i due DIV si
appoggiano a vicenda. Da qui la possibilita' al contenitore che sta
piu' a destra di scivolare di uno scalino. Per il semplice motivo
logico che non tocca il muro del contenitore padre, che non ha
all'esterno un bordo, ma lo presenta all'interno invisibile al
webmaster. Starete dicendo naturalmente che questo qui sta delirando,
visto che si e' tolto il bordo indicando Border "0" al contenitore
padre! E invece si tratta di nuovo del vostro leggere centinaia di
informazioni, dimenticandovi di usare da soli la logica. Che vuol dire?
Vuol dire che se si indica border 0, ma poi si indica anche una
larghezza predefinita, sia questa 100px che 1 miliardo di px, il
contenitore presentera' in fondo al miliardo di px un bordo interno
invisibile che dice che qui terminano i tuoi giorni caro mio!
Su quel bordo invisibile ma presente si appoggia il Float right, che
appunto spinto da sinistra verso destra dal suo bordo che si appoggia
al bordo destro del div float left, tocca o per meglio dire bacia il
bordo invisibile del contenitore padre rimandeno appoggiato ad esso
senza nessunissima possibilita' di caduta.
Se ancora non vi e' chiara la storia provate a immaginare di voler
inserire in un armadio un ripiano che e' 4 cemtimetri piu' corto della
larghezza interna dell'armadio. Poggiando a sinistra il ripiano che
raffigura i due DIV Float Left e tentando di farlo incastrare a destra,
questi non trovando l'appoggio del bordo interno dell'armadio, scivola
e si rompe le corna!
Se anche questo esempio non fa apparire un bagliore nei vostri
ragionamenti logici, vi consiglio di usare la tecnica da me
consigliata, guardando il BOX con un Borwser tipo il Lynx, e provando
poi a inserire il CSS che vi consigliano da qualche altra parte,
notando cosi' la differenza.
E una volta per tutte smettiamola di fare gli italiani anche con il
CSS!
Gli italiani si sa, amano modificare e interpretare le leggi a proprio
tornaconto, anche quando queste sono eccezzionalmente chiare e logiche!
Angelo Palma  
w.ww.webxall.net

 tornaconto, anche quando queste sono eccezzionalmente chiare e logiche!
Ma quali leggi, quelle dei singoli browser? Che tornaconto?!?
LOL!

 invisibile che dice che qui terminano i tuoi giorni caro mio!
Con l'ultimo post, ti dimostravo che il pixel di scarto indicato
nell'immagine ingrandita (la terza del primo post) era presente
indipendentemente dal float. Purtroppo (o per fortuna) ormai stai
postando solo per difendere la tua tesi, senza accorgerti che
dall'inizio non hai messo a fuoco il problema. Continui a parlare di
pixel a destra, mentre l'immagine mostra che il pixel di scarto è a
sinistra. E torno a ripeterti che è presente con layout ad una
colonna, con layout a due colonne, con layout a tre colonne etc. Sono
arrivato alla conclusione che è presente perchè nonostante il
contenitore abbia border:none, lo spazio relativo al bordo continua ad
essere impegnato.
Il buon vecchio m4r10 ha risolto il problema, ma lo ha fatto barando e
ti spiego il motivo:
ha reso il box contenitore più grande (esattamente di 2px) della somma
delle colonne contenute. Ma io qualche post più dietro avevo detto che
cercavo la soluzione senza ricorrere a tale stratagemma. Rendere il box
più grande, corrisponde ad ammettere che i bordi del box occupano
spazio nonostante ci sia border:none.
Comunque m4r10 ha accettato la sfida e ne è uscito vincitore: ha
dimostrato che quello che diceva era attendibile. E tu? Che fai?

 Funziona o no?
Funziona anche se l'hack per la corretta gestione del box model da
parte di IE va gestito facendo i conti a mano.
Mi spiego meglio.
Secondo gli standard (w3c o no non fa differenza) il width è la
dimensione del contenuto, mentre secondo IE è la dimensione esterna
del box.
Ad esempio se nel tuo esempio provi ad aumentare il bordo dell'header
(ad esempio da 1px a 11px), noterai che su FF il box diventa più largo
di 20 px, mentre su IE è il contenuto a diventare più piccolo di
20px.
Ma questo non smonta la tua soluzione anzi la avvalora!
Sono contento di aver aperto questo post e che angelo abbia difeso la
sua posizione. I tre giorni ho capito davvero (anche se c'è ancora
molto da imparare) come funziona il boxmodel.
Grazie.

 dimostrato che quello che diceva era attendibile. E tu? Che fai?
-------------------------------------------------------------------------------------------------------------
Io mi dichiaro sconfitto e faccio penitenza coprendomi il capo di
cenere,  per aver stravisionato il problema, esattamente come hai
specificato. Infatti dalla terza foto (mi pare fosse proprio la terza),
vedevo solo una parte del contenitore, ingrandita per evidenziare la
mancanza del bordo, e mi lasciavo trarre in inganno pensando o
immaginando il contenitore intero.
Voglio inoltre ringraziare per la squisita educazione nel rispondere ai
miei tentativi (adesso lo so a buon ragione) di convincere del
contrario, DAG, che come ho appena detto, ha squisitamente offerto una
prova della sua educazione.
E' stato in ogni caso un piacere aver partecipato attivamente in questo
post.
Saluti e visto che siamo ormai vicinissimi al natale, buone feste e
buon anno 2007!
Angelo Palma