Buonasera a tutti, sono alla ricerca di una cosa difficile: un menu "multilivello" accessibile, per una pagina accessibile.
Ho sviluppato la seguente pagina di test:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xthml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>Esempio uso CSS per l'impaginazione</title>
<link rel="stylesheet" type="text/css" href="impaginazione.css" title="default"/>
</head>
<body>
<div id="mainbox">
<div id="testata">
<h1>Testata del sito</h1>
</div>
<div id="colsx">
<h2>Colonna sinistra</h2>
Testo della colonna sinistra</p>
</div>
<div id="coldx">
<h2>Colonna destra</h2>
Testo della colonna destra</p>
</div>
<div id="colmain">
<h2>Colonna centrale - Titolo</h2>
Testo della colonna centrale e via dicendo...</p>
...ora non ci resta che provare....</p>
</div>
<div id="footer">
Footer, piè di pagina.</p>
</p>
</div>
</div>
</body>
</html>
con il seguente foglio di stile:
/* Impostiamo il corpo del documento, associato all'elemento BODY */
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000;
background-color: #fff;
}
#mainbox {
border: 1px solid #000;
background-color: #999;
}
#testata {
border-bottom: 1px solid #000;
color: #9ff;
background-color: #036;
}
/* Questo è riferito all'attributo: id="colsx" */
#colsx {
float: left;
padding: 5px;
width: 150px;
color: #fff;
background-color: #999;
font-size: 80%;
}
/* Questo è riferito all'attributo: id="coldx" */
#coldx {
float: right;
padding: 5px;
width: 150px;
color: #fff;
background-color: transparent;
font-size: 80%;
}
/* Questo è riferito all'attributo: id="colmain" */
#colmain {
color: #000;
background-color: #fff;
margin: 0px 156px 0px 160px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#footer {
border-top: 1px solid #000;
clear: both;
color: #fff;
background-color: #036;
margin: 0px;
padding: 0px;
font-size: 11px;
}
p {
margin: 0px;
padding: 5px;
}
/* Ci serve che anche i titoli all'interno della tabella siano personalizzati... colori, dimensioni, margini...*/
h1, h2, h3 {
margin: 0px 0px 0px 0px;
padding: 5px;
}
#coldx h2, #colsx h2 {
font-size: 100%;
}
#testata h1, #footer p {
text-align: center;
}
Scusatemi il lungo copia ed incolla, ma un onesto file .zip in questo forum non si può allegare...
L'obiettivo è, a questo punto, inserire un menu dinamico nella colonna di sinistra ("colsx").
Vedo almeno due difficoltà:
- un menu "a più livelli" che sia accessibile
- quando linko un'altra pagina del sito, ovviamente ne carico una creata a partire dallo stesso modello: come conservare il menu "aperto" allo stesso sottolivello della pagina chiamante?
Spero di aver dato un suggerimento a qualcuno....
Kisses,
Nat
Rispondi quotando
