Menu che cade in basso

[samiel]

Ritorno su un problema già posto. In un sito non da me creato
devo inserire del materiale. Tuttavia succede con IE 6 (e 5.5)
che il menu di destra viene in alcune pagine a posizionarsi in basso
anziché restare in alto. Nel mio pc con Iceweasel e 1280 di risoluzione
lo vedo correttamente, ma la maggioranza degli utenti, si sa...
Questo il link:
http://www.liceofranchetti.it/pof/testopof.php
E questo il codice pertinente:

#colonna1 {float:left;text-align: center;width:12%;height:429px;background: transparent;color: #000080;border:0px solid #d2d2d2;font-size:0.7em;padding:10px;}
a.senza{text-decoration: none;}
#colonna2 {float:left;width:80%;height:auto; /*background: transparent;*/background: #f7f7f7; color: #a11f12;border:0px solid #104160;font-size:6mm;display:inline-block;}
#colonna2_largo {float:left;width:98%;height:auto; background: transparent; color: #a11f12;border:0px solid #104160;font-size:6mm;border:black}
#colonna2a {float:left;width:65%;height:auto; background: transparent;color: #009F82;border:0px solid #104160;padding:30px 0px 0px 30px;font-family:  arial, verdana, helvetica, sans-serif;/*cursive, verdana, helvetica, sans-serif;*/ font-size:5mm}
#colonna2apagine {float:left;width:72%;height:auto; background: transparent; color: #000080;border:0px solid #d2d2d2;padding:50px 0px 0px 30px;font-family:  arial, verdana, helvetica, sans-serif;/*cursive, verdana, helvetica, sans-serif;*/ font-size:0.70em}
#colonna2apagine_largo {float:left;width:60%;height:auto; background: transparent; color: #000080;border:0px solid #d2d2d2;padding:50px 0px 0px 30px;font-family:  arial, verdana, helvetica, sans-serif;/*cursive, verdana, helvetica, sans-serif;*/ font-size:0.70em}

.titolo_verde {font-family:  arial, verdana, helvetica, sans-serif;color:#000080;}
h4 {font-family:  arial, verdana, helvetica, sans-serif;color:#000080;}
h5 {font-family:  arial, verdana, helvetica, sans-serif;color:#000080;}
#colonna2b {float:right;width:30%;min-height:398px;height:auto; background: transparent; color: #000;border:0px solid #d2d2d2;padding:30px 0px 0px 0px;}
#colonna2bpagine {float:right;width:22%; /*min-height:398px;*/height:auto; background: transparent; color: #000;border:0px solid #d2d2d2;padding:50px 0px 0px 0px;font-size:4mm;color:#a11f12}
#colonna2bpagine1 {float:left;width:100px;min-height:398px;height:auto; background: transparent; color: #000;border:0px solid #d2d2d2;padding:50px 0px 0px 0px;font-size:4mm;color:#a11f12}
#colonna2bpaginepof {float:right;width:170px;min-height:398px;height:auto; background: #ffffff; color: #000;border:0px solid #d2d2d2;padding:10px 0px 0px 0px;font-size:4mm;color:#a11f12}
#colonna2bpagine_largo {float:left;width:170px;min-height:398px;height:auto; background: transparent; color: #000;border:0px solid #d2d2d2;padding:50px 0px 0px 0px;font-size:4mm;color:#a11f12}
#colonna2bpagine_largo_pof {float:right;width:26%;min-height:398px;height:auto; background: #ffffff; color: #000;border:0px solid #d2d2d2;padding:10px 0px 0px 0px;font-size:4mm;color:#a11f12}

Se metto width:auto a #colonna2bpagine (come mi era stato suggerito)
anche da me il menu scende. Per cui di male in peggio...
Ho provato a ridurre sotto il 72% (70%, 68%...) l'ampiezza, ma il difetto persiste.
poi ho provato a mettere in #colonna2, che contiene #colonna2bpagine
display:inline-block, ma non è servito a nulla.
Posto che non devo rifare li sito (3 colonne canoniche o altro) perché non è mio compito,
c'è cmq una correzione risolutiva?

Mille grazie
M.

[Mich_]

E` un problema interno alla colonna 2, e non interessa la col1, da quanto ho capito da una rapida occhiata.

La colonna 2a e` larga:
65% (della colonna 2) + 30px (padding sinistro)
La colonna 2b e` larga:
30% (della colonna 2)

La somma totale fa:
95% + 30px.
Quando i 30px sono maggiori del 5% (compreso eventuali errori di arrotondamento), la parte destra non ci sta e "scivola" sotto.

Ci sono vari metodi per uscirne; penso che il piu` semplice sia definire il padding orizzontale di 2a in %, anziche` in px, ad esempio:
padding: 30px 0px 0px 4.5%;


PS: La pagina e` fatta bene, ma mi domando perche` allora:
1. non usi XHTML Strict (che tra l'altro e` obbligatorio secondo la legge 4/04 per una istituzione pubblica - trovi riferimenti alla legge nei "link utili")
2. usi i
per spaziare (dovresti usare margini, ad esempio espressi in em: 3
corrispondono circa a 3em, se il line-height e` uguale al font-size.

[samiel]

Grazie per la risposta dettagliata.
Ho provato a ridurre il padding in questo modo:

#colonna2apagine {float:left;width:72%;height:auto; background: transparent; color: #000080;border:0px solid #d2d2d2;padding:50px 0 0 1.5%/*50px 0px 0px 30px*/;font-family:  arial, verdana, helvetica, sans-serif;/*cursive, verdana, helvetica, sans-serif;*/ font-size:0.70em}

cioè im misura anche maggiore di quanto da te suggerito,
ma in IE 6 il menu continua a scendere...

Per quanto riguarda le tue altre domande:
1. il sito non l'ho creato io. Per trasformarlo da Transitional in Strict
ci vorrebbe una riscrittura notevole, dal momento che la formattazione
è diffusa anche nelle singole pagine php. Ma questo non è
(o non dovrebbe essere) il mio compito istituzionale.
Io dovrei solo tenere aggiurnate alcune sezioni,

2. Idem per ilricordo a
. In questo caso magari
posso vedere di impostare meglio le pagine da aggiungere
o rifare.

Grazie
M.

[Mich_]

Adesso mi son perso nel codice.
Pensavo che la colonna centrale si chiamasse #colonna2a, mentre invece e` #colonna2apagine.
Allora il conto e` naturalmente da rifare.
Pero` controlla il corretto innestamento dei <div> (eventualmente con i validatori).

E` noto che il box model di IE e` diverso da quello degli altri browser. In estrema sintesi:

La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin
In IE (quirks mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

Quindi per IE il conto e` diverso.
In alternativa evita di usare padding, sostituendolo con margin (se il layout lo permette)


Tornando al problema accessibilita`, tieni presente che una scuola e` un ente pubblico e quindi il suo sito deve sottostare alla legge 4/04, entrata in vigore nell'agosto 2005, e che dava tempo 2 anni per l'adeguamento o la predisposizione di un piano di adeguamento.
Immagino che non sei tu il responsabile, ma fallo presente: la legge non ammette l'ignoranza.

[samiel]

Caspita, che velocita!

Cmq, #colonna2 è il blocco che contiene la colonna centrale ampia (#colonna2apagine)
col testo e la colonna laterale destra col menu (#colonna2bpaginepof).
Tu immagino mi suggerissi di ridurre il padding di #colonna2apagine,
ma anche azzerando il padding laterale il menu continua a scendere.
Adesso devo uscire, stasera ma rifaccio i conti. Ormai è una questione d'onore....

Per quanto riguarda l'accessibilità, adesso mi vedo bene la norma,
altrimento al prossimo Consilgio di Presidenza farò presente la cosa.

Grazie
M.

[samiel]

Allora... #colonna2 è 868px. Essa include:
#colonna2apagine, di 655 px, con 30 px di padding sinistro
#colonna2bpaginepof, di 170px, senza padding laterale.
Fra le due colonne c'è uno spazio bianco appartenente a colonna2.
Anche diminuendo a percentuali più basse #colonna2apagine
(da 72% a 68%, ad es, col che diventa 620px)
non si risolve...

Ho visto la Legge Stanca. Parla di accessibilità,
però non prescrive esplicitamente soluzioni tecniche,
come appunto la necessità di adottare lo Strict.
È un'interpretazione da informatico, oppure
esiste un consenso anche presso i giuristi su questo punto?

Grazie ancora
M.

[samiel]

Ah, ho trovato... Di Strict si parla nel DM 8 luglio 2005
che è il decreto attuativo della legge Stanca.
Chissà se il menu in basso sarebbe ammesso...

M.

[Mich_]

Originariamente inviato da samiel
Allora... #colonna2 è 868px. Essa include:
#colonna2apagine, di 655 px, con 30 px di padding sinistro
#colonna2bpaginepof, di 170px, senza padding laterale.
Fra le due colonne c'è uno spazio bianco appartenente a colonna2.
Anche diminuendo a percentuali più basse #colonna2apagine
(da 72% a 68%, ad es, col che diventa 620px)
non si risolve...

Tu ora parli di px, ma le misure nel file sono in %.
Probabilmente i px sono la trasformazione delle % nel TUO browser (che naturalmente sono diverse per risoluzin minori).
Prova a guardare il sito in una finestra larga circa 800 px (la larghezza degli schermi di molte persone).
Per risolvere ti potrebbe bastare esprimere tutte le larghezze in %, facendo in modo che la larghezza sia MINORE di 100% (se e` uguale o molto vicino ci possono essere problemi con gli arrotondamenti).

Chissà se il menu in basso sarebbe ammesso...

La legge non puo` dare prescrizioni sul layout. Ci sono le "buone pratiche" ("best practices"), ma poi occorre valutre l'importanza relativa delle varie sezioni. Una serie di indicazioni si possono dedurre dalle pagine del WAI (organismo del W3C), in cui pero` le WCAG1 sono un po' vecchiotte (alcune delle specifiche tecniche auspicate fanno parte di tutti i browser moderni, altre non lo saranno per diverso tempo ancora). Le WCAG2 non sono ancora sufficientemente discusse, quindi non si possono prendere come modello, anche se hanno spunti moderni molto interessanti.

Ecco alcuni link sull'accessibilta` che ho io:
Accessibilità dei siti web? Che cos'è? (Riassunto di cos'e` l'accessibilta` con link ai maggiori siti italiani)
Dive Into Accessibility
Contrasto colori
L' accessibilità
Web Accessibility Initiative (WAI)
Ci vedono poco ma navigano. Se possono
Improving Accessibility through Typography

[samiel]

A proposito del primo punto, certo, le misure le ho tratte dal mio browser.
Cmq ho scoperto la causa del problema: tutti gli oggetti posizionati in #colonna2apagine
e aventi misura definita. Per cui ho dovuto mettere "auto" non solo alle tabelle
(come mi aveva già segnalato un utente del Forum), ma anche ad qualche <hr>.
In tal modo il menu resta in alto a destra. La contropartita è che alcune tabelle
anche vicine non sono più esattamente uguali, creando un effetto graficamente
non molto bello, ma variano a seconda del contenuto. Adesso vedo se mi è possibile,
in considerazione dei contenuti, ridimensionare le tabelle.

A proposito del secondo punto, la mia era solo una boutade...
In realtà, il DM applicativo della Legge Stanca fissa nche alcuni parametri
"tecnici " da rispettare. È ovvio che non può esprimersi a favore, per dire,
di un layout liquido piuttosto che di un altro... Cmq grazie per le segnalazioni,
adesso cercherò di vederle. Ho trovato anche il titolo di in libro di Zeldman,
Progettare siti Web standard, anche se non sono sicuro che affronti
precisamente il tema dell'accessibilità.

Grazie
M.