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:
codice:
	<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:

codice:
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