Newsgroup: it.lavoro.professioni.webmaster
Titolo: Problema con tableless (parte II)

Ciao a tutti,
come buon compromesso ho trovato l'uso dei layout non-liquidi ovvero a 
larghezza fissa, che in qualche modo risolvono quei problemi avuti con 
quelli liquidi.
Dunque ho quanto segue:
<body>
     <div id="header"> header della pagina </div>
     <div id="colsx"> colonna sinistra </div>
     <div id="coldx"> colonna destra </div>
     <div id="footer"> footer della pagina </div>
</body>
col relativo css:
 body {
   background-color: #E7EEFE;
   font-size: 12px;
   margin: 0px auto;
   text-align: center;
   width: 600px;
  }
 #header {
   border: 1px solid #000000;
   background-color: #FFFF00;
   margin: 5px auto;
   padding: 5px;
   width: 600px;
  }
 #colsx {
   border: 1px solid #000000;
   background-color: #FFFF00;
   float: left;
   padding: 5px;
   width: 150px;
  }
 #coldx {
   align: right;
   border: 1px solid #000000;
   background-color: #FFFF00;
   float: right;
   padding: 5px;
   width: 420px;
  }
 #footer {
   border: 1px solid #000000;
   background-color: #FFFF00;
   float: left;
   margin: 5px auto;
   padding: 5px;
   width: 600px;
  }
tutto funziona meravigliosamente bene ed esattamente come volevo sia su 
firefox che su internet explorer 6.
Unico neo è la COLDX visualizzando, osserverete che a destra non è allineata 
con HEADER e FOOTER (l'estremità dovrebbe coincedere esattamente come alla 
sinistra).
Non riesco a individuare la fonte del problema, qualcuno mi può dire come 
ovviare?
Grazie in anticipo.
Cooper.
-- 
BlueWare WebAgency
  [Internet:] 
http://www.blueware.it
  [icq:] 146-781-935
  [msn:] 
coo...@blueware.it
 

 ovviare?
Ciao,
innanzitutto tu hai messo un body di larghezza fissa a 600px, ma poi gli
elementi cha hai messo dentro sono più grandi: header e footer sono larghi
610 (600 di width + 5 + 5 di padding), mentre i due elementi centrali sono
più stretti (160 + 430 = 590 pixel).
Il mio consiglio sarebbe di NON dimensionare body, aggiungere un div
"contenitore" a cui dai la larghezza desiderata, e poi NON assegnare nessuna
larghezza agli altri elementi (eccetto la colonna sx) che intanto sono
elementi blocco, pertanto sempre larghi il 100%. In questo modo la larghezza
la definisci in un unico posto, e gli altri elementi vi si adattano. Ah,
ultima cosa: "align" in CSS non esiste.
Max Graziani
PS: scusa se ti ho risposto in mail.


Non preoccuparti, a dire il vero è stata quella la prima che ho letto ed ero 
indeciso se risponderti da li o da qui, poi mi è venuta in mente quella 
regoletta della netiquette che dice che una discussione va terminata dove si 
comincia e quindi sto rispondendo qui :)
Grazie ancora,


 Cosa dovrei fare?
1) Prima non mi sono accorto che hai assegnato float:left alla colonna sx e
float:right a quella dx. In effetti in un layout a due colonne non ti serve,
è sufficiente dare float:left alla colonna sx e quella di destra si
"appoggia" automaticamente. Devi solo aggiungere un margine a sx grande
quanto la larghezza della colonna. Perciò:
#coldx {
   border: 1px solid #000000;
   background-color: #FFFF00;
   padding: 5px;
   margin-left:160px;
}
2) margin:auto; dovresti assegnarlo a #contenitore, non più a body (che
resta con il solo text-align:center;)
3) Puoi togliere width:100% a #header e #footer
4) A #footer, togli float:left; (a che ti serve?) e aggiungi, per sicurezza,
un clear:left, per annullare l'effetto del float se per caso i contenuti di
COLSX fossero più corti di COLDX, e far andare il footer sempre in fondo.
5) Per il problema di COLDX con Firefox, guarda se aggiustando queste cose
si risolve; adesso sono fuori ufficio e non ho a disposizione FF per
testare.
Ciao
--
Max Graziani
http://www.maxgraziani.net
http://zonadombra.blogspot.com

 ha scritto nel messaggio 
news:11180578...@picard.net4u.it...

Ok grazie mille, adesso sembra essere tutto apposto con i suggerimenti dati, 
riepilogando:
  <body>
     <div id="contenitore">
       <div id="header"> header della pagina </div>
       <div id="colsx"> colonna sinistra </div>
       <div id="coldx"> colonna destra </div>
       <div id="footer"> footer della pagina </div>
  </div>
  </body>
e css:
 body {
   background-color: #E7EEFE;
   text-align: center;
  }
 #contenitore {
    width: 600px;
 margin: auto;
  }
 #header {
   border: 1px solid #000000;
   background-color: #FFFF00;
   margin: 5px auto;
   padding: 5px;
  }
 #colsx {
   border: 1px solid #000000;
   background-color: #FFFF00;
   float: left;
   padding: 5px;
   width: 150px;
  }
 #coldx {
   border: 1px solid #000000;
   background-color: #FFFF00;
   padding: 5px;
   margin-left:170px;
  }
 #footer {
   border: 1px solid #000000;
   background-color: #FFFF00;
   margin: 5px auto;
   padding: 5px;
   clear:left,
  }
solo una curiosità mi è rimasta, perchè hai consigliato di usare un div 
contenitore anzichè il body? che io sappia il body è già un contenitore.
Andando per logica, partendo da questo presupposto mi sembrava che usare due 
contenitori fosse inappropriato.
C'è qualche ragione particolare? Te lo chiedo per cultura personale.
Grazie ancora per la disponibilità.
Cooper.
PS: Riallacciandomi al thread dei browser vecchi e nuovi, il css di cui 
sopra produce variazioni con versioni precedenti a ie6 e ff 1.0.4 ?
E infine, mi sembra di capire che i layout tableless a larghezza fissa, 
siano più stabili rispetto a quelli liquidi, puoi confermarmi o 
eventualmente smentirmi?
Infine per quanto riguarda l'accessibilità del layout e del contenuto, 
pensavo di fare tutto relativo (testo, bordi, immagini etc) in em prendendo 
come riferimento il valore di default del browser e mantenendo le 
proporzioni.
Ritieni che sia una soluzione efficace che in qualche modo risolve il 
problema delle risoluzioni semplicemente facendo si che l'utente adatti il 
layout e il testo agendo sulla dimensione di default del browser?


 layout e il testo agendo sulla dimensione di default del browser?
Qui vai a toccare un terreno minato. Anche per quello che riguarda fisso
Vs. fluido ci sono pareri discordanti. Fondamentalmente, dipende dal tipo
di layout che hai bisogno e dal tipo di contenuti che ci devi mettere
dentro. Non esiste una regola universalmente riconosciuta come migliore.
Il mio parere (aggiungici un IMHO grosso come una casa) è che, *per
l'accessibilità*, la cosa migliore è fare un layout fluido, testo in em,
distanze tra i bordi degli elementi e i contenuti anch'essi in em, e
dimensioni dei vari elementi in px (oppure in %) in modo da slegare le
preferenze dell'utente per la grandezza dei caratteri dalle dimensioni
della finestra dello user agent. Sennò rischi di trovarti un layout che si
ingrandisce troppo (ossia al di fuori della finestra) quando si usano
caratteri grandi e extra grandi.
--
Max Graziani
http://www.maxgraziani.net/
http://zonadombra.blogspot.com/


verissimo, per quello infatti pensavo di fare qualcosa direttamente sul 
sito, cioè una barra in cui l'utente impostava la dimensione e correggeva la 
grandezza della pagina, ovviamente a priori io avrei fatto i test con le 
varie risoluzioni etc.
Qualcosa tipo: Risoluzione: ( ) 800x600, ( ) 1024x768 etc etc.
Una curiosità a proposito di em, e percentuali, se gli em si riferiscono al 
testo, l'unità di misura in percentuale dovrebbe riferirsi alla finestra o 
sbaglio?
In questo caso perchè mettendo ad esempio la dimensione del bordo in 
percentuale esso non si regola di conseguenza? oppure il testo in 
percentuale? mentre funziona regolarmente se impostiamo la larghezza di un 
elemento etc?
Ho visto per esempio che con le immagini funziona, ma non sempre sugli altri 
elementi che compongono una pagina, tipo quelli detti prima-
Cioè mi sembra che ci siano delle incongruenze, magari sarò io che applico 
male l'unità di misura boh non so, mi sapresti dare maggiori info?
Grazie ancora :)
Cooper.


 male l'unità di misura boh non so, mi sapresti dare maggiori info?
Niente di meglio dei documenti ufficiali: 
http://www.w3.org/TR/CSS21/
 .
Nello specifico, per la tua domanda:
http://www.w3.org/TR/CSS21/syndata.html#percentage-units
Ciao.



letto, e si evince un comportamento analogo agli em, andando per logica che 
senso avrebbe avere due unità di misura con nomi diversi che svolgono la 
stessa funzione?
Ok cambia il riferimento per le due unità di misura, ma alla base il 
principio mi sembra che sia lo stesso.
Grazie mille.


 principio mi sembra che sia lo stesso.
Eh no! Se usi "%" vengono riferite ad una cosa, se usi "em" ad un'altra!
Leggi la specifica di "%":
Each property that allows percentages also defines the value to which the
percentage refers.
(
http://www.w3.org/TR/CSS21/syndata.html#percentage-units
)
Facciamo l'esempio della proprietà width; se definisco una width in em, si
riferirà alla grandezza del carattere usato in quell'elemento a cui sto
definendo la width. Quindi, un elemento con width:20em, sarà largo 20 volte
la dimensione del carattere definito per quell'elemento.
Se definisco la width in %, vado a vedermi a cosa si riferisce % nella
specifica di width (
http://www.w3.org/TR/CSS21/visudet.html#propdef-width
) e
scopro che
Percentages:  refer to width of containing block
ossia la larghezza dell'elemento si riferisce, in %, alla larghezza del
blocco contenitore.
Spero di essermi spiegato :-)



Se ho capito bene, mentre con gli em il riferimento è unico per tutti gli 
elementi, con la percentuale il riferimento avviene per elemento.
Cioè ogni elemento interpreta (o gestisce) la percentuale in modo diverso e 
quindi il riferimento in percentuale è in funzione dell'elemento a cui si 
riferisce, corretto?
Cooper


 riferisce, corretto?
Quasi. Con le % il riferimento è la PROPRIETA' dell'elemento a cui la stai
applicando.
Abbiamo visto prima che se usi % applicata alla proprietà 'width', farai
riferimento alla proprietà 'width' del blocco contenitore. Se usi %
applicata a 'font-size',  farai riferimento al 'font-size' dell'elemento
parent (
http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size
):
Percentages:  refer to parent element's font size
e così via. Riscrivo quello che hai enunciato prima, correggendolo:
con la percentuale il riferimento avviene per PROPRIETA' dell'elemento.
il riferimento in percentuale è in funzione della PROPRIETA' dell'elemento a
cui si riferisce.
