Accessibilità: container prima del navigation

**copenga** · 17-04-2007, 23:39

Ciao a tutti,
vorrei rispettare i dettami dell'accessibilità facendo apparire prima i contenuti della barra laterale di navigazione, non ci sto capendo nulla, mi appello alle vostre conoscenze.
i collegamenti inseriti nel forum sono relativi a siti in lingua inglese.....ed io sono obsoleto :-/
Incollo il codice HTML ed il CSS dl sito (spero di non infastidire con la lunghezza)

Codice sorgente HTML (con tagli per non appesantirvi):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Roma in camper:Roma itinerari turistici</title>
<link href="roma.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head>

<body>
<div id="masthead">
[img]immagini/RIC.gif[/img]
<div id="menu">
<ul id="nav">[*]Home[*]Soste
<li id="active">Itinerari[*]Trasporti[*]Photo[*] Guestbook [*] Forum [*] Link [*] Eventi [*] [img]immagini/belgium31.gif[/img] [*] [img]immagini/france31.gif[/img] [*] [img]immagini/germany31.gif[/img]
<li id="lingua"> [img]immagini/italia.gif[/img] [/list]
</div>
</div>
<div id="navBar">
<div id="sectionLinks">
<ul id="sectionlinks">[*]Mordi e fuggi[*]Colosseo[*]Fori e Palatino[*]Domus aurea [*]Bocca della Verità [*] Appia antica [*] Da Piazza Navona [*] Dall'Aventino [*] Dal Celio [*] Gianicolo e Trastevere [*] Musei vaticani [*] Antiche Terme [*] Ciclabili [*] Musei [*] Ostia antica [/list]

</p>
</div>
</div>
<div id="page">
<h1>indice itinerari</h1>
</div>
<div class="content">
<div class="textimage">
++++++CUT-CUT-CUT++++++
</div>
<div id="footer">
+++++CUT++++++
</div>

</body>
</html>

---------------------------------------

il CSS relativo (ho tagliato qualcosa anche qui):

body {
text-align : left;
width : 760px;
text-align : left;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 90%;
color : #ffff99;
border : thin solid #ffff99;
background-color : #660000;
padding : 3px;
margin-top : 0;
margin-right : auto;
margin-bottom : 0;
margin-left : auto;
text-decoration : none;
}
div#container {
position : relative;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
div#menu {
text-align : center;
width : 760px;
margin : 0 auto;
text-align : left;
background-image : url(immagini/menu_b.gif);
font-size : 80%;
border-top-width : 1px;
border-top-style : solid;
border-top-color : #ffff99;
vertical-align : baseline;
}
div#content {
margin-right : 200px;
color : #ffff99;
font-family : Verdana, Arial, Helvetica, sans-serif;
padding-top : 5px;
padding-right : 5px;
padding-bottom : 5px;
padding-left : 5px;
background-color : #660000;
display:block;
}
div#content a:link {
text-decoration : underline;
}
div#page {
padding : 5px;
margin-right : auto;
margin-bottom : 0;
margin-left : auto;
color : #ff9900;
}
div#masthead {
text-align : center;
width : 760px;
}
div#footer {
clear : both;
border : 1px solid #ffff99;
font-size : 75%;
color : #cccccc;
padding : 5px 5px 5px 5px;
}
a {
color : #ffff99;
text-decoration : none;
}
a:link {
color : #ffff99;
text-decoration : none;
}
a:visited {
color : #ffff00;
text-decoration : none;
}
a:active {
color : #660000;
background-color : #ffcc66;
text-decoration : none;
}
h1 {
font-family : Verdana, Arial, sans-serif;
font-size : 120%;
color : #ffff66;
margin : 0;
padding : 0;
}
h2 {
font-family : Arial, sans-serif;
font-size : 114%;
color : #ffcc66;
margin : 0;
padding : 0;
}
h3 {
font-family : Arial, sans-serif;
font-size : 80%;
color : #ffcc33;
margin : 0;
padding : 0;
}
h4 {
font-family : Arial, sans-serif;
font-size : 100%;
font-weight : normal;
color : #ff9900;
margin : 0;
padding : 0;
}
h5 {
font-family : Verdana, Arial, sans-serif;
font-size : 100%;
color : #ff99ff;
margin : 0;
padding : 0;
}
ul#nav {
float : left;
width : 100%;
list-style : none;
margin : 0;
padding : 0;
background-image : url(immagini/menu_b.gif);
border-top-width : 0;
border-right-width : 0;
border-bottom-width : 0;
border-left-width : 0;
}
ul#nav li {
float : left;
background : url(tab.png) no-repeat top left;
margin-top : 0;
margin-right : 0.2em;
margin-bottom : 0;
margin-left : 0.2em;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 6px;
}
ul#nav a {
float : left;
padding : 0.4em 8px 0.4em 0;
background : url(tab.png) no-repeat top right;
text-decoration : none;
}
ul#nav a:hover {
color : #ffff00;
}
ul#nav li#active {
background : url(tab2.png) no-repeat top left;
}
ul#nav li#active a {
background : url(tab2.png) no-repeat top right;
color : #660000;
}ul#nav li#lingua {
background : url(tab2.png) no-repeat top left;
}
ul#nav li#lingua a {
background : url(tab2.png) no-repeat top right;
color : #660000;
}
ul ul {
list-style-type : none;
}
ul ul ul {
list-style-type : none;
}
label {
font-family : Arial, sans-serif;
font-size : 100%;
font-weight : bold;
color : #ffffcc;
}
div.textimage {
width : 560px;
margin-bottom : 10px;
border : 1px solid #ff6600;
font-size : 80%;
padding-left : 3px;
padding-right : 3px;
color : #ffff99;
padding-top : 10px;
}
div.textimage img {
float : left;
margin : 10px;
}
div.textimage a:link {
text-decoration : underline;
}
div.textimage h2 {
margin-top : 10px;
}
div.clearer {
clear : left;
}
#menu div {
text-align : center;
width : 760px;
font-size : 90%;
background-image : url(immagini/menu_b.gif);
text-align : center;
height : 25px;
vertical-align : bottom;
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : #ffff99;
}
#page {
text-align : center;
padding-top : 3px;
margin-top : 2px;
color : #ff9900;
}
#navBar {
float : right;
width : 180px;
margin : 0;
border-top-width : 0;
border-bottom-width : 0;
border-left-width : 0;
font-size : 12px;
padding : 0;
text-align : left;
border-right-width : 0;
}
html > body #navBar li {
border-bottom : none;
}
#sectionLinks {
margin : 0;
padding : 0;
width : 100%;
font-size : 100%;
color : #ffff99;
cursor : help;
border: 0;
border-style : solid;
}
#sectionLinks a {
display : block;
text-decoration : none;
height : 20px;
padding : 2px 0 2px 2px;
border-top-width : 1px;
border-top-style : solid;
border-top-color : #f75900;
}
#sectionLinks a:hover {
color : #ffff00;
}
#sectionLinks a:active {
background-color : #ffcc66;
color : #660000;
}
#sectionLinks ul {
padding : 0;
margin : 0;
list-style-type : none;
}
#sectionLinks li {
padding : 2px;
height : 36px;
margin : 2px;
background-image : url(lat.png);
list-style-type : none;
}
#sectionLinks li#active {
background-color : #ffcc66;
color : #660000;
background-image : url(lat2.png);
}
#sectionLinks li#active a {
background-color : #ffcc66;
color : #660000;
}
+++++CUT+++++

**GiovanniP** · 18-04-2007, 06:41

Gli elementi della pagina si visualizzano nell' ordine in cui sono stati inseriti nella pagina. Se poni la barra di navigazione all' inizio del codice html, viene visualizzata prima.

**Mich_** · 18-04-2007, 08:45

Non e` facile seguire tutto quel codice, per di piu` postato come testo normale.
Se devi inserire del codice, ci sono gli appositi tag VB [ code ] ... [ /code ] oppure [ php ] ... [ /php ] (senza gli spazi, inseriti solo per non far interpretare ora), che puoi inserire anche tramite gli appositi bottni sopra l'area di inserimento.

Pero` il codice e` ancora lungo. Sarebbe piu` proficuo un link ad una tua pagina di prova, e/o il codice della sola parte problematica.

Ma iniziamo da principio.
1. Se devi fare una pagina accessibile, DEVI (legge 4/04) usare una DTD strict.
Poi devi anche seguire le indicazioni della DTD.

2. Se vuoi usare i CSS, devi eliminare tutta la formattazione realizzata tramite attributi HTML (ad es. border="0"), dato che questa interferisce con i CSS e lascia al browser liberta` di seguire l'una o l'altra codifica (o anche nessuna).

3. L'ordine dei blocchi lo puoi variare, ma poi devi giocare con i float per gestire l'ordine nella visualizzazione (valido per le colonne, nonper le righe); io sono contrario all'utilizzo dei posizionamenti dei blocchi, che ritengo creino piu` problemi di quanti ne risolvano, anche al riguardo dell'accessibilita`. Meglio allora un bel link "salta al contenuto", da inserire prima del menu e che punta all'inizio del contenuto vero; poi puoi non farlo visualizzare per i browser visuali (ad esempio con lo spostmento fuori dello schermo).

**copenga** · 18-04-2007, 10:08

@GiovanniP

E' vero lo so, ma come al solito ho spiegato male...scusatemi, il problema in effetti è che se in HTML metto il navBar dopo il content, la visualizzazione del "navBar" va a finire sempre a dx ma sotto il box "content".
Ho provato ad assegnare un id al content invece che la class col risultato che il navBar non segue più il ridimensionamento della pagina dei browser e resta fisso.
Così com'è invece segue il comportamento della finestra.

@Mich_,
grazie per la puntualizzazione, sono un vero ignorante in materia, non ho postato l'url perché pensavo di fare spam....
La pagina che si può vedere è: http:copenga.altervista.org/itinerariindex.html sistemata la filosofia di quella il resto viene di conseguenza, sono agli albori e quindi è semplice semplice come struttura. (vedrai gli strafalcioni e la confusione che c'è!)

1- mi cerco le guide su questo ottimo sito per la DTD strict (?) e provo ad applicarle.
2- toglierò border="0" ma come si fa a non avere bordo? forse con un diverso cmd link?
3- ecco.....come si crea il link a "salta al contenuto", da inserire prima del menu?

Ho già scritto in un altro argomento che sono un 46enne con la 3° media.....scusatemi e grazie mille per le risposte.
ciao,
Fabio

**copenga** · 18-04-2007, 14:38

Un'altra precisazione: ho usato per prova anche la tecnica dei float contrapposti ( http://css.html.it/articoli/leggi/53...a-e-pratica/1/ ) ma il testo della navbar mi va sotto e non adiacente al box container, questo è il risultato: http://copenga.altervista.org/test.html
dove sbaglio?
ciao

**Mich_** · 18-04-2007, 15:29

La formattazione va resa con i CSS, non con tag HTML. Per annullare il bordo puoi assegnare al blocco (o immagine):
border: 0;

Gli id individuano un elemento unico, non puoi usarli piu` di una volta. Per quello ci sono le classi. Tieni anche presente che ilbrowser IE e` non-case-sensitive, per cui i due nomi qui sotto sono uguali.
<div id="sectionLinks">
<ul id="sectionlinks">

Il fatto che la navigazione finisca sotto, probabilmente dipende dal fatto che non ci stanno tutti i blocchi dentro lo spazio.
Prova a verificare la somma delle larghezze, tenendo pero` presente che:
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)

PS: se vuio che qualcuno possa capirci nei tuo sw, devi curare meglio la formattazione del sorgente stesso: il rispetto di una corretta indentazione da un lato e` sintomo di buona programmazione, dall'altro permette di capire dove finiscono i blocchi.

**copenga** · 18-04-2007, 15:54

grazie,
così ho capito che l'errore è proprio in sectionlinks, ho eliminato la lista ed il comportamento è corretto, credevo che quel box si comportasse di conseguenza a qullo in cui è incluso.
hai ragione, non capisco molto di codice ben messo e spesso inserisco direttamente righe dal pannello online, tra l'altro quello di altervista non consente la visualizzazione intere delle righ lunghe.
Finora IE7 non mi ha dato problemi con quegli id uguali ma li cambierò presto.

di nuovo grazie,
Fabio

**copenga** · 18-04-2007, 17:29

Grazie adesso è tutto a posto, non mi resta che sistemare tutte le pagine ed il border 0.

ciao

Discussione: Accessibilità: container prima del navigation

Strumenti discussione

Ricerca discussione

Visualizza

Accessibilità: container prima del navigation

Permessi di invio