Il layout è qui ed è caraterrizato dall'avere la prima colonna (quella dei contenuti) liquida, e la seconda colonna (quella dei link) a larghezza fissa. L'impostazione grafica mi serve che resti questa, dato che l'occhio "italiano" tende a dare priorità ai testi scritti a sinistra (il contenuto) e poi a quello a destra (i link). Devonno anche restare rispettivamente fluida e fissa le colonne nello stesso ordine per motivo analogo.
Il problema è questo: che per gli ipovedenti risulterebbe difficile e scocciante leggere la pagina, perchè con i loro programmi, leggerebbero prima i link e poi i contenuti (basandosi sull'ordine di scrittura impostato nel codice HTML).
Ho provato a invertire semplicemente l'ordine di scrittura nella pagina html delle due colonne (che sono inglobate da dei div specifici), ma così facendo si presenta uno sgrdevole "bug" (?) che imposta male il contenuto delle colonne. Il "bug" resta anche se provo a mutare i nomi delle colonne fra di loro ("colonna-1" diventa "colonna-2" e viceversa). Questo fatto si può vedere qui.
In questo caso gli ipovedenti usufruiscono di un ottimo servizio avendo la possibilità di leggere prima i contenuti e poi i link (cosa che voglio che avvenga), ma i normo vedenti subiscono uno sgradevole "bug" per quanto riguarda la posizione del contenuto dei link nella propria rispettiva colonna, come si può ben vedere...
DOMANDA:
Lasciando l'attuale posizione E il tipo di colonne (liquida per i contenuti e fissa per i link) come posso fare per rendere il servizio "buono" per entrambe le categorie di persone? Come posso mettere a posto il contenuto della colonna dei link?
Il codice html è facilmente visibile (è l'unico che cambia per le due pagine)... vi posto qui sotto il codice CSS delle pagine, mettendovi sotto anche quello per correggere i "problemi" dall'usare IE (che io uso)
CODICE CSS BASE
body {
margin: 0;
padding: 0 10%;
background: #eee;
color: #000;
}
#corpo {
width: 100%;
float: left;
background: #fff url(sfondo.gif) 100% 0 repeat-y;
border-left: 3px solid #000;
border-right: 3px solid #000;
margin: 0 -3px;
display: inline;
}
#colonna-1 {
float: right;
width: 200px;
background: transparent;
color: #000;
}
#colonna-2 {
margin-right: 200px;
background: transparent;
color: #000;
}
#intestazione {
background: #666;
color: #fff;
width: 100%;
border: 3px solid #000;
margin: 0 -3px;
}
#pie-di-pagina {
background: #666;
color: #fff;
clear: left;
width: 100%;
clear: left;
border: 3px solid #000;
margin: 0 -3px;
}
#intestazione, #colonna-1, #colonna-2, #pie-di-pagina {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
div p {
margin: 0;
padding: 0.5em 1em;
}
CODICE CSS PER IE
#colonna-1 {
margin-right: 0;
}
#colonna-2 {
height: 0;
margin-left: 0;
}
Grazie mille per l'aiuto e linteresse
Rispondi quotando
