Newsgroup: it.comp.lang.javascript
Titolo: [OT] Incomprensione CSS

Allora, ecco qui una cosa che non capisco:
<style type="text/css"><!--
	body {
		margin: 0px; padding: 0px;}
	body,td,div {
		font-family: Verdana, Arial, sans-serif; font-size: 12px;}
	#center {
		/*===> Soluzione 1:*/
		/*  position: absolute; left: 160px; right: 110px; top: 110px;
		    margin: 0px; padding: 0px;*/
		/*===> Soluzione 2:*/
		    margin: 100px 100px 0px 100px; padding: 0px;
		background-color: #CCFF99; color: #333333;
		}
	.contentPane {
		width: 25%; float: left;
		}
	.lastContentPane {
		width: 25%; float: right;
		}
	.contentPane div, .lastContentPane div {
		text-align: left; padding: 5px; margin: 0px;
		}
--></style>
E, nel body:
<div id="center">
	<div class="contentPane"><div>Del testo...</div></div>
	<div class="contentPane"><div>Dell'altro testo...</div></div>
	<div class="contentPane"><div>Ancora del testo...</div></div>
	<div class="lastContentPane"><div>Testo, per finire...</div></div>
</div>
Il problema e' questo.
Con la soluzione 1 (posizionamento assoluto) succede che IE6 non mi fa le 4
colonne di testo, ma la quarta me la mette sotto le altre, come se
calcolasse l'ampiezza dei div contentPane sulla base dell'ampiezza della
pagina e non dell'elemento #center; con altri browser (Firefox, Mozilla,
Opera) e' tutto ok.
Invece, con la soluzione 2 (margini), le 4 colonne sono ok in tutti i
browser ma, sempre in tutti i browser, non c'e' piu' il colore di sfondo.
Qualcuno sa dirmi dove sbaglio?
Grazie e pardon per l'OT... ma gruppi su css non ce ne sono, almeno in
Italia :-)
-- 
~Nando~ :-/__.oO
Apostolo della Prova

 Italia :-)
it.comp.www.html è sicuramente più indicato.
-- 
~ "FINARMENTE LI SFRATTATI AVRANNO UN TETTO SULLA TESTA!
...però tirato ammodino, un tegolo pe' vorta.." (Il vernacoliere)

 it.comp.www.html č sicuramente piů indicato.
Ho guardato ora il manifesto, non immaginavo. Chiedo umilmente perdono, la
testa mia sotto i Vostri piedi... e potete anche muovervi.


 testa mia sotto i Vostri piedi... e potete anche muovervi.
Non preoccuparti, se fosse stata una così "grave offesa" ti avrei
semplicemente scritto l'ultima riga, dirottandoti su icwh.
(ovviamente ce la legheremo al dito e te la faremo pagare quando meno te lo
aspetti, ma questo solamente perché noi siamo dei fot*****simi bastardi. In
verità, ci basta una scusa qualunque...)


 verità, ci basta una scusa qualunque...)
:-) e soprattutto sadici, quel "potete anche muovervi", uhm uhm mi
solletica...dove abiterà? Se ci viene incontro a me sta bene!! :-) (Uè
Nando và che si scherza né!)
-- 
"E' l' ignoranza che crea l'intolleranza
 di gente cieca e senza coscienza"
									  S.S.S.

 verità, ci basta una scusa qualunque...)
Sono masochista: ve ne forniro' a bizzeffe :)


 (Uè Nando và che si scherza né!)
Ah, che sollievo... iniziavo ad aver paura :-S


 Trattavasi di una semi-citazione, invero... "Non ci resta che piangere"...
AAAAAARGHHHH non me la ricordo questa battuta! so cosa fare stasera...
-- 
"Voi abili a tenere sempre un piede qua e uno là
 avrete un avvenire certo in questo mondo qua
 però la dignità
 dove l'avete persa?"
									    V.R.

 Sono masochista: ve ne forniro' a bizzeffe :)
Ach. Ma così ci togli il divertimento.


 questione di margini o bordi.
Magari questo potrebbe tornargli utile per capire?
 
http://www.constile.org/tutorial/IE5_box_model/
-- 
"That until there is no longer first class
And second class citizens of any nation
Until the colour of a man's skin
Is of no more significance than the colour of his eyes
Me say war"
B.M.

 AAAAAARGHHHH non me la ricordo questa battuta! so cosa fare stasera...
La lettera a Savonarola :)


 questione di margini o bordi.
Mi ricordero' anche di questo, allora... grazie... ma e' davvero
scoraggiante finanche per chi, come me, si interessa a queste cose per
hobby: immagino per voi, che ci lavorate.


  
http://www.constile.org/tutorial/IE5_box_model/
In questo articolo, pero', parla dei problemi che si ingenerano quando ci
sono bordi, margini o padding non "nulli" (avevo gia' letto cose in
proposito e ne avevo pure capito il senso :-P). Non immaginavo, pero', che
si incasinasse proprio tutto...


 dell'altezza.
Eh no, ti avevo detto una fesseria, ero convinto di non aver specificato il
doctype e invece l'avevo fatto... validato l'html e il css, nessun errore o
warning... e non va.
Vabbe', non voglio tediare oltre. Posto la pagina cosi' com'e' ora. E'
perfetta con tutti i browser che ho, tranne che con IE6. Viene il dubbio
che il problema sia suo :)
xoomer.virgilio.it/undertheskin/4divs.html


 warning... e non va.
Ti assicuro che il codice HTML e CSS che hai scritto nel primo post, con le
modifiche che ti ho detto va.
Almeno, su IE6 sp1. Hai IE6 sp2? Puň darsi che le cose siano un po'
diverse, quel service pack ha fatto piů casino che altro.
In caso, fammi sapere.
Adesso non ho il tempo di studiare il link che hai scritto, ma controlla
che il layout sia effettivamente quello che hai scritto in precedenza, e
che non vi siano altre modifiche di sorta.
Eventualmente prova a copiare il tuo primo codice su una pagina bianca ed
eseguire le modifiche su quello.
-- 
"When you have eliminated the impossible, whatever remains,
however improbable, must be the truth."

 si incasinasse proprio tutto...
Non è che si incasina tutto, cambia solamente l'interpretazione di alcune
cose. Se "googleggi" un po' a giro troverai sicuramente una tonnellata di
informazioni in merito.


 hobby: immagino per voi, che ci lavorate.
E' uno dei motivi per cui questo è un lavoro. Se fosse semplice farlo -
farlo bene, intendo - non potrebbe essere una professione.


 La lettera a Savonarola :)
ROTFL! ricordo la scena
-- 
"Ti sei salvato
 o sei entrato in banca pure tu?"
									    A.V.

 farlo bene, intendo - non potrebbe essere una professione.
Non sarebbe semplice farlo bene neanche se gli standard fossero piu'
diffusamente rispettati... a me pare assurdo dover spendere cosi' tanto
tempo per correre dietro ai capricci dei vari browser.
Concludo con una domanda che ogni professionista odia (credo): volendo
imparare a lavorare decentemente nel campo, cosa consiglieresti, di
iniziare a capire bene tutto cio' che e' standard e solo dopo preoccuparsi
di come rispondere alle differenze "interpretative" dei vari browser,
oppure di partire subito tenendo presente i vincoli della progettazione
cross-browser e della compatibilita' con i browser piu' vecchi?


 cross-browser e della compatibilita' con i browser piu' vecchi?
Le cose che consiglio sono le seguenti: La prima, comprarsi il libro di
Zeldman (Progettare il web del futuro).
Tu non mi conosci, ma ti assicuro che ce ne vuole prima che io consigli un
libro cartaceo che tratta di argomenti informatici. Deve essere
dannatamente buono. Quel libro in particolare, non è che ti rivela chissà
quali segreti mistici, dice cose che - almeno nel campo - tutti dovrebbero
sapere. Ma le dice bene. Organizza i vari aspetti dello sviluppo web in un
modo organico. E se per un professionista, leggere una cosa del genere di
sicuro male non fa, per chi inizia è sicuramente una sorta di "testo
scolastico" su cui studiare. Inoltre, si scorre molto bene.
Tratta degli standard web, e delle interpretazioni dei vari browser,
affrontando anche i modi per risolverli, eventuali workaround o hack.
Tutte le persone, professionisti e principianti, a cui l'ho consigliato e
l'hanno comprato, sono rimasti soddisfatti. 
(Dio, dovrei farmi dare una percentuale sulle vendite. Almeno fosse un
libro mio!)
La seconda cosa, ma solo dopo che hai già una buona base, è studiarti le
reference, che sono mediamente più tecniche. Ti consiglio di studiarti gli
standard web, e almeno i browser gecko based e IE.
Poi ovviamente, usando la rete come fonte di informazioni. Soprattutto per
quanto riguarda il design tableless.
Come vedi non ti ho consigliato direttamente nessuna delle due strade da te
proposte. Il libro di Zeldman è una via di mezzo.


 cross-browser e della compatibilita' con i browser piu' vecchi?
Le cose che consiglio sono le seguenti: La prima, comprarsi il libro di
Zeldman (Progettare il web del futuro).
Tu non mi conosci, ma ti assicuro che ce ne vuole prima che io consigli un
libro cartaceo che tratta di argomenti informatici. Deve essere
dannatamente buono. Quel libro in particolare, non è che ti rivela chissà
quali segreti mistici, dice cose che - almeno nel campo - tutti dovrebbero
sapere. Ma le dice bene. Organizza i vari aspetti dello sviluppo web in un
modo organico. E se per un professionista, leggere una cosa del genere di
sicuro male non fa, per chi inizia è sicuramente una sorta di "testo
scolastico" su cui studiare. Inoltre, si scorre molto bene.
Tratta degli standard web, e delle interpretazioni dei vari browser,
affrontando anche i modi per risolverli, eventuali workaround o hack.
Tutte le persone, professionisti e principianti, a cui l'ho consigliato e
l'hanno comprato, sono rimasti soddisfatti. 
(Dio, dovrei farmi dare una percentuale sulle vendite. Almeno fosse un
libro mio!)
La seconda cosa, ma solo dopo che hai già una buona base, è studiarti le
reference, che sono mediamente più tecniche. Ti consiglio di studiarti gli
standard web, e almeno i browser gecko based e IE.
Poi ovviamente, usando la rete come fonte di informazioni. Soprattutto per
quanto riguarda il design tableless.
Come vedi non ti ho consigliato direttamente nessuna delle due strade da te
proposte. Il libro di Zeldman è una via di mezzo.
-- 


 che non vi siano altre modifiche di sorta.
Non ti chiedevo di studiarlo, figurati, non sto progettando niente, sto
solo elucubrando :-)
Ad ogni modo, ho optato per la soluzione che fa uso dei margini; il
problema del background l'ho risolto (grazie al tuo suggerimento riguardo
al fatto che gli elementi float non occupano, in pratica) inserendo un
elemento fittizio vuoto non flottante. Se ti interessa capire meglio di
quanto mi sono spiegato, vedi qui:
http://xoomer.virgilio.it/undertheskin/4divs2.html


 standard web, e almeno i browser gecko based e IE.
Grazie assai.


 Ad ogni modo, ho optato per la soluzione che fa uso dei margini;
Non fraintendermi: non ho mai detto che avresti dovuto optare per la prima
soluzione, cercavo solo di spiegarti il "perché" non funzionasse come ti
aspettavi.


 aspettavi.
Infatti e' stato utilissimo. Non temere, non ho frainteso; del resto, se
chiedo un consiglio, e' perche' mi fa piacere riceverne, figurati... e la
soluzione che ho pensato m'e' venuta in mente grazie a una cosa che m'hai
detto tu.


 flottare.
Come ti ho dimostrato nell'esempio, no. La mia "flotta" senza avere
l'attributo. Basta essere accorti sulla dimensione dell'elemento che viene
fatto "flottare" (bbrrr).
Ci sono sempre diverse soluzioni per il medesimo problema.


 Ci sono sempre diverse soluzioni per il medesimo problema.
Fuori di dubbio! Probabilmente non avevo ben chiarito quale fosse il mio :)


 Fuori di dubbio! Probabilmente non avevo ben chiarito quale fosse il mio :)
Non mi sono spiegato: intendo dire, traslando in questo contesto, che per
realizzare la medesima cosa vi possono essere strade diverse. Io ad
esempio, avrei optato per altro. Ma questa non è la sede per fare una
analisi approfondita di layout e CSS (tra l'altro, non ne avrei neppure il
tempo).


 tempo).
Piu' che giusto. Grazie comunque per l'attenzione.
Ho sottoscritto il ng appropriato, intanto :)
