posizionamento logo e menu in sito accessibile

[gabar-el]

ciao, sto cercando di implementare al meglio una sezione head con un logo e un menu. il tutto è accessibile. purtroppo non riesco a fare si che logo e menu non interferiscano tra loro e ottengo con varie soluzioni degli slittamenti che non riesco a sistemare in nessun modo. Il primo menu informativo è posizionato in alto e non mi torna alcun problema.

html:

	<div id="head">
		<map id="info" title="menù informativo">
			<ul class="menu">
				<li class="nascondi">[vai al men&ugrave; navigazione]
				<li class="pos">scorciatoie
				<li class="pos">accessibilit&agrave;
			[/list]
		</map>

		[img]images/immagine.png[/img]
	
		<map id="navi" title="menù navigazione">
			<ul class="menu">
				<li class="nascondi">[vai ai contenuti]
				[*]<a class="position" title="sei nella home" tabindex="5">home page</a>
				[*]******
				[*]******
				<li class="noBorder">contatti
			[/list]
		</map>
		
		<h1 id="homePage">************</h1>
	</div>

questo il css al momento:

div#head {
		width: 95%;
		min-width: 634px;
		max-width: 1280px;
		height: 275px;
		margin: 0 auto 25px;
		background: #fff url(images/bg_hea.gif) right bottom no-repeat scroll;
	}
img#logo {float:left; margin-right:50px;}
map#info { background:#000; overflow:hidden;}
	map#navi {background: #f0f; height: 200px;}
		map#info ul.menu {
			height: 50px;
			text-align: center;
			list-style-type: none;
			overflow: hidden;
		}
		
		map#info ul.menu li.pos {margin-top:6px;}
			map#info a, map#info a:link, map#info a:visited, map#info a:active {
				padding: 12px 1em 14px;
				color: #fff;
				text-decoration: none;
				display: block;
			}
			map#info a:hover, map#info a:focus {background: url(images/bg_info_menu.png) center bottom no-repeat;}
			
		map#navi ul.menu {
			width:70%;
			float: left;
			margin: 0px 0 60px;
			padding: 185px 0 0 0;
			text-align: center;
			list-style-type: none;
			background: #000 url(images/bg_had.gif) top left no-repeat;
			overflow: hidden;
		}
			ul.menu li {
				float: left;
				margin: 0 0.2em;
				font: 100% Verdana, Arial, Helvetica, sans-serif;
			}
							
				li.nascondi {position:absolute; top:-10000px; left:-10000px;}
				
				map#navi a, map#navi a:link, map#navi a:visited, map#navi a:active {
					padding: 0.5em 1em;
					color: #000;
					background: #F3F3F3;
					text-decoration: none;
					display: block;
				}
				ul.menu a:hover, ul.menu a:focus {
					border-color: #6ec9dd;
					background-color: #EBEBEB;
					text-decoration: underline;
				}
h1#homePage {float: left; font: 120% Geneva, Arial, Helvetica, sans-serif;}

i problemi principali sono che il menu navigazione in fase di ridimensionamento pagina slitta sotto e la sua larghezza non riesc a riempire tutto il map senza creare problematiche di vario tipo. non riesco a capire perchè...
grazie

[Mich_]

Dovresti anche fare uno schema di cio` che vuoi (immagine o ASCII-art - nota gli ASCII-art sempre all'inteno di tag [ code ], altrimenti non si vedono)

Comunque non capisco l'uso che fai dei tag <map>.
Il tag <map> non viene visualizzato dal browser, ma serve per creare delle zone (mappa) in una immagine. Vedi ad esempio questo link HTML <map> Tag.

Ed anche l'uso che fai dei posizionamenti: non puoi usare un posizionamento assoluto all'interno di oggetti flottati o comunque di oggetti non-posizionati: tali oggetti escono dal normale flusso, e danno problemi. Per un sunto sui posizionamenti, vedi ad esempio:
I posizionamenti assoluti
Capire i posizionamenti relativi


PS: passa sempre dai validatori, prima di postare: diversi errori li avresti trovati.

[gabar-el]

per quanto riguarda il tag map mi pare di avere letto che nell'accessibilità serve per potere dare una titolazione ai menu, in modo da fare capire di che tipo di menu si tratta. Forse mi sbaglio e se è così si può dare forse un titolo al tag ul?

circa i posizionamenti l'unico assoluto è a un link che esce dal layout per fare si che nn sia visibile con gli stili, può dare problemi anche solo questo se dentro agli ul flottati?

mi chiedo allora se sia meglio impostare i menu display:inline invece che flottati

grazie

[Mich_]

Originariamente inviato da gabar-el
per quanto riguarda il tag map mi pare di avere letto che nell'accessibilità serve per potere dare una titolazione ai menu, in modo da fare capire di che tipo di menu si tratta. Forse mi sbaglio e se è così si può dare forse un titolo al tag ul?

Ho l'impressione che ti sbagli.
La sintassi HTML non permette quell'uso del tag <map>, per cui non e` possibile che sia un consiglio per l'accessibilita`: gli errori di sintassi e di semantica sono sempre contrari all'accessibilita`.
Non so cosa intendi per titolazione.
L'attributo title puo` essere dato a molti tag, anche ad un <ul>, ma non so se i browser lo visualizzano. Di solito il title si usa nei link per far apparire info aggiuntive al passaggio del mouse.
Se invece intendi dare un titolo tipo <hX>, ho visto fare una cosa del tipo:

<div id="menu1">
  <h3>titolo del menu</h3>
  <ul>....

circa i posizionamenti l'unico assoluto è a un link che esce dal layout per fare si che nn sia visibile con gli stili, può dare problemi anche solo questo se dentro agli ul flottati?

Un posizionamento assoluto da` sempre problemi, se non e` usato con criterio.
Per "nascondere" un elemento di solito si usa il margin-left o lo si sposta con altri metodi. (*)

mi chiedo allora se sia meglio impostare i menu display:inline invece che flottati

NO, il display:inline da` altri problemi, ad esempio la impossibilita` di definire le dimensioni. Lo si trova associato ad un float per controbattere un baco di IE6, tanto un float non puo` mai essere inline.


(*) riguardando meglio ho visto che hai inserito un link visibile solo dai lettori di schermo.
Non ho mai visto una cosa del genere. Di solito si usa un link "vai ai contenuti" inserito all'inizio del body: viene messo all'interno di un div che viene spostato. Ma viene spostato tutto il <div>, ed in tal caso ci puo` stare il posizionamento assoluto. Nel tuo caso il posizionamento assoluto per il link ci puo` stare.
Invece il posizionamento assoluto per l'ancora NON va bene. Probabilmente e` quello che ti fa spostare il contenuto: quando "clicchi" (o comunque attivi) il link (per "link" intendo a href="...">), il browser va all'ancora ("ancora" = <a name="...">), e se tale ancora e` fuori dall'area visibile, va a tale locazione.
Un'ancora non viene visualizzata dal browser: e` solo un riferimento per il brwoser per sapre dove fermarsi.
Nel tuo caso ti basta mettere l'ancora all'interno o anche subito all'esterno del tuo <ul>. Se hai un titolo (tipo <hX> di cui sopra) e` un candidato ideale per metterci l'ancora. Altrimenti ti puo` bastare anche un semplice spazio:
<a name="...">&amp;nbsp;</a>
che ha il vantaggio di non essere "visto" ne` dai browser visuali, ne` da quelli uditivi.

[gabar-el]

per titolazione intendo proptio il title, viene utilizzato per consentire di capire il contenuto dei menu nei browser uditivi. In questo modo prima di partire con l'elenco del menu l'utente sa di cosa tratta il menu e se non gli interessa può saltarlo, grazie appunto al link name.

Grazie per tutte le informazioni, ci guarderò attentamente.

[Mich_]

Il title puoi applicarlo all'<ul>, ma io lo eviterei: infatti tale tag serve per racchiudere un menu, ed in tale menu ci sono altri elementi con il title (i vari link, in cui il title e` obbligatorio).

Quindi se il borwser mostra il title anche all'<ul>, avresti sempre qualcosa evidenziato: quando il mouse e` su un link si vede quello del link, quando e` fuori quello del menu: a mio parere piu` confusione che utilita`.

Io penserei ad una cosa del tipo:

<div id="menu1">
  <a name="ancora1"><h3 title="navigazione della sezione">menu secondario</h3></a>
  <ul>[*]prima voce del menu"
    ...[/list]
</div>

Nota che in questo caso c'e` un titolo del menu (che ci sta bene anche per chi ci vede - non e` che chi ci vede sia piu` intelligente o piu` perspicace degli altri ...); tale titolo puo` essere ulteriormente specificato con il title.
In tale titolo c'e` l'ancora per farci arrivare dal link nascosto.


Ma se metti un link nascosto, puoi anche inserire il title in tale link.
Esempio:

  <li style="position:absolute; top:0 left: -200px;">
    <a href="#..." title="salta il menu secondario ...">[*]primo link
  ...

[gabar-el]

ok, grazie del suggerimento.
ad ora però mi rimane dubbiosa la questione principale, che irugarda il div head e i suoi contenuti (logo e menu). Non riesco ancora a trovare una soluzione ottimale e i problemi di cui abbiamo parlato non intaccano il layout in questo div.
Vorrei mantenere il logo di dimensione fissa e lasciare il menu in percentuale, ma dando float a entrambi ho lo slittamento del menu sotto al logo durante il ridimensionamento della pagina.

L'unica soluzione che ho trovato al momento è dare il width percentuale anche al logo e va tutto bene, ma l'effetto in ridimensionamento non è il massimo a livello visuale e con un forte ridimensionamento comporta comunque dei problemi in quanto il logo mantiene una forte altezza, mentre il menu si adatta. Questo fa si che gli elementi sotto il div head trovino spazio per affiancarsi in quanto il logo è flottato....

[simotenax]

ma scusa dare semplicemente come sfondo dell'header l'immagine logo??

oppure se proprio vuoi tenere l'immagine così fissa potrebbe bastare posizionarla assolutamente all'interno dell'header

[gabar-el]

come sfondo dell'header direi di no perchè vorrei fosse indicizzata.
provo a vedere cosa riesco a fare posizionandola assolutamente. grazie

[Mich_]

Originariamente inviato da gabar-el
ok, grazie del suggerimento.
ad ora però mi rimane dubbiosa la questione principale, che irugarda il div head e i suoi contenuti (logo e menu). Non riesco ancora a trovare una soluzione ottimale e i problemi di cui abbiamo parlato non intaccano il layout in questo div.

Gia` nella prima risposta avevo scritto

Dovresti anche fare uno schema di cio` che vuoi (immagine o ASCII-art ...)

Infatti e` impossibile dare consigli su qualcosa che non si vede. In alternativa posta un link: non sapendo come e` fatto il logo, come e` posizionato nel suo blocco, ecc non si puo` intervenire.

Vorrei mantenere il logo di dimensione fissa e lasciare il menu in percentuale, ma dando float a entrambi ho lo slittamento del menu sotto al logo durante il ridimensionamento della pagina.

E` una questione di scelta: se due oggetti nella pagina non ci stanno, e` meglio che uno finisca sotto l'altro oppure ridurli di grandezza? A questo devi rispondere tu. Puoi immaginare che la larghezza minima ragionevole sia 760px; sotto tale dimensione non e` piu` un PC ma uno strumento leggero (telefonino, PDA, ecc), e come tale l'utente non si apetta di vedere tutto perfettamente.

L'unica soluzione che ho trovato al momento è dare il width percentuale anche al logo e va tutto bene, ma l'effetto in ridimensionamento non è il massimo a livello visuale e con un forte ridimensionamento comporta comunque dei problemi in quanto il logo mantiene una forte altezza, mentre il menu si adatta. Questo fa si che gli elementi sotto il div head trovino spazio per affiancarsi in quanto il logo è flottato....

Vedi i commenti sopra