accessibilita ed em: perche troppo stretto?

[obert]

ciao,
sto scrivendo un layout elastico a 3 colonne (a 2, pure ) con il menu dopo i contenuti, testandolo su windows ff,opera e ie6.
La domanda e':

1.utilizzo il float (o la <sottinteso>proprieta</sottinteso> float?) applicato a tutte e 3 le colonne, purtroppo non riesco a far andare la tecnica del
<pre>
#container = width:61em;
#sinistra = width:25em;float:left;
#destra = margin-left:26em;width:35em;
</pre>
perche su ie #destra viene posizionato troppo distante dal #sinistra. Questo problema avviene anche quando vado a testare il layout a risoluzioni maggiori: i 61em di larghezza del #container, risultano troppo piccoli: rendendo il tutto troppo stretto, lasciando la parte destra libera quasi per meta' schermo.
Cio' non dovrebbe accadere se utilizzassi %, ma a quel punto, non parlando del poca compatibilita' che hanno le % nei vari browser, non so quanto il layout sarebbe elastico.
Quindi mi chiedo se non ci sia un modo per avere un layout elastico con menu dopo i contenuti, come si deve, senza utilizzare absolute: quasi tutti gli esempi che ho trovato, come il classico elastico di csszengarden fa appunto uso di absolute.

So che un elemento con float e' preferibile averlo con una width settata, in questo caso in em, cosi come un elemento con margin:0 auto; per cui sono costretto ad dare un width:61em; che a 800x600 rende la larghezza del contenitore, secondo me, giusta, ma che, ripeto, a risoluzioni maggiori fa diventare il tutto troppo piccolo.
Non potrebbe esserci un modo di non utilizzare width, per es, in modo da rendere il tutto piu relativo al monitor? Usando, per es, i margin/padding ? Non credo. perlomeno pensandola in questo modo.

Per cui chiedo a voi, se avete qualche idea, se sto sbagliando qualcosa io, o se avete semplicemente opinioni in merito.

grazie.
alberto

[Mich_]

Non e` facile rispondere. Anche perche` e` un discorso senza dati concreti su cui lavorare (esempio).

Sicuramente se usi i float non devi usare i margini per spostare i blocchi.

Inoltre un layout tutto basato su misure in em, potrebbe non starci dentro la finestra dell'utente. Occore dosare le misure in em e le misure %. Usa em dove deve starci una scritta definita (ad esempio un menu), ed usa % dove serve usare una parte dello spazio.

In qualche caso puo` esere utile usare un max-width (che pero` non e` riconosciuto da IE).

Ma hai provato a guardare i layout proposti tra i "link utili"? Di solito sono un buon punto di partenza.

[obert]

beh ne ho visti molti, letto gli articoli di ala, di html.it, studiato il codice di zengarden, provato varie soluzioni, ma rimane il fatto che se sistemo per un 800x600 su win rimane troppo stretto, ammesso che 'too narrow' significhi 'troppo stretto', quindi l'utente e' costretto a ingrandire il font per vederlo piu grande (ctrl++ su ff, ++ su opera); avevo anche un js che permette di utilizzare differenti fogli di stile a seconda della risoluzione del monitor che l'utente sta utilizzando, in questo caso dovrei creare tre o piu .css con varie width, pero' non mi sembra proprio bellissima come soluzione, il mio intento sarebbe quello di trovare 'il mio stile' con un layout elastico, con menu dopo i contenuti, cross-browser, con un livello di accessibilita' alto, senza l'utilizzo di absolute, ma soltanto con la tecnica del #sinistro float:left;width:n; #destro margin-left:n; ormai e' quasi una fissazione; ma per adesso, credo che la soluzione migliore sia quella di utilizzare un float:left e uno right, anche se non mi piace molto come soluzione, e rimanere o con un layout piccolo tutto spostato a sinistra, oppure centrato, ma non credo che importi molto la centratura sulla larghezza, magari risolvero' con un qualcosa di grafico, ma non so.
Probabilmente usare em e % e' l'unica soluzione.Anche se attualmente non ho idee su come impostare il layout.
qua c'e' un piccolo esempio in costruzione, 3 colonne, menu dopo i contenuti, elastico, niente absolute, solo float:left e right, ma non mi convince del tutto: va solo a 800x600.

opinioni?

[Mich_]

Anzitutto potresti fare un controllo sintattico: validatore HTML, e dopo anche un controllo sintattico del CSS: validatore CSS.
A me trova degli errori HTML, per cui non ha senso poi cercare gli errori CSS.
Inoltre (cosa che il validatore non trova), non si puo` inserire il CSS direttamente nella pagina HTML.
Meglio se usi il tag <link>.

Per quanto riguarda il CSS.
Salta subito all'occhio che non hai definito le regole di stile per il tag <html>. Lo so che in IE non servono (<html> coincide con <body>, ma in altri browser non e` cosi`.

Chiaro che se definisci la larghezza totale 61 em, la cosa risulta un po' stretta in alcuni brwoser, mentre in altri dovrai usare lo scroll orizzontale.
Definisci una larghezza min 100% ed una larghezza max 61em (ma forse di piu`)
In realta` e` la larghezza del blocco del testo che nondeve superare un certo limite, non la larghezza totale.

Poi nelle prove dovresti dare degli sfondi diversi ai blocchi (oppure usare dei bordini), in modo da renderti conto degli spazi occupati dai vari elementi (spesso si trovano sorprese).

Vedo ora che ti manca anche l'ancora #inizio (devi metterci un tag <a name="inizio">, perche` fa ancora parte delle cose obbligatorie, per i link interni alla pagina).