28220 sujets

CSS et mise en forme, CSS3

Problèmes de sous menus

Hello,
Après beaucoup de recherche sur les pages tutoriels du site et ailleurs puis sur le net je ne comprend toujours pas le problème que je rencontre... j'ai décidé de vous l'exposer.

Voilà, je fais un site pour un ami et il à utilisé une police que je ne possède pas et qui contient certains droits (elle a été vectorisée sur illustrator, bref pas moyen de l'implanter sur le site) et donc je suis entrain de faire le menu et ses sous-menu en image... mais c'est pas facile d'aller plus loin qu'un sous menu.

J'utilise comme montré dans les tutoriels le js pour affiché un bloc, enfin ici une liste, caché (deja utilisé de nombreuses fois sur mes sites sans que ca me pose de réel problème).

Le but est d'avoir un premier menu principal constitué d'une image avec des zones de lien (c'est fait et c'est fonctionnel) et ensuite d'avoir au passage de la souris sur un lien un sous-menu formé de la même manière et c'est la que ca coince, il ne veut pas m'afficher mes balises <dd></dd> à l'intérieur Smiley decu

Le bout de code qui pose problème est la dernière définition d'un dd, dd#dayli qui correspond au premier sous menu sur l'image (j'y affiche meme une bordure afin d'être sur de ne pas la louper mais il se cache le bloc rebel)

Je met le code CSS qui nous interesse :

img.image{ display: none; }

			dl#headerMap{
				margin: 70px 0 0 250px;
				padding: 0;
				background: transparent url(./images/menu.png) top left no-repeat;
				height: 54px;
				width: 77px;
				position: relative;
			}

			dd#smenu1{
				margin: -18px 0 0 100px;
				padding: 0;
				background: transparent url(./images/menu_graphicdesign.png) top left no-repeat;
				height: 71px;
				width: 102px;
				/*position: relative;*/
			}

			dd#smenu2{
				margin: -18px 0 0 100px;
				padding: 0;
				background: transparent url(./images/menu_illustration.png) top left no-repeat;
				height: 72px;
				width: 71px;
				/*position: relative;*/
			}

			dd#smenu3{
				margin: -18px 0 0 100px;
				padding: 0;
				background: transparent url(./images/menu_photographie.png) top left no-repeat;
				height: 72px;
				width: 71px;
				/*position: relative;*/
			}

			dd#smenu4{
				margin: 20px 0 0 100px;
				padding: 0;
				background: transparent url(./images/menu_streetart.png) top left no-repeat;
				height: 72px;
				width: 71px;
				/*position: relative;*/
			}


			dd{ margin: 0; padding: 0; position: absolute;  font-size: 85%; }

			dd#graphicdesign { top: 3px; left: 0px; }
			dd#graphicdesign a{ position: absolute; width: 77px; height: 8px;  }

			dd#illustration { top: 13px; left: 0px; }
			dd#illustration a{ position: absolute; width: 77px; height: 8px; }

			dd#photographie { top: 23px; left: 0px; }
			dd#photographie a{ position: absolute; width: 77px; height: 8px; }


			dd#streetart { top: 33px; left: 0px; }
			dd#streetart a{ position: absolute; width: 77px; height: 8px; }


			dd#references { top: 43px; left: 0px; }
			dd#references a{ position: absolute; width: 77px; height: 8px; }

			dd#dayli { top: 0px; left: 0px; border:4px solid #444;}
			dd#dayli a{ position: absolute; width: 150px; height: 40px; border:4px solid #444;}


ainsi que la partie html:

	<body>
		<div id="container">
					<dl id="headerMap">

						<dd onmouseover="javascript:montre('smenu1');" id="graphicdesign">
							<a onmouseover="javascript:montre('smenu1');" href=""></a>
							<dd id="smenu1">
							

								

							</dd>

						</dd>

						<dd onmouseover="javascript:montre('smenu2');" id="illustration">
							<a onmouseover="javascript:montre('smenu2');" href=""></a>
							<dd id="smenu2">
				
							</dd>
						</dd>

						<dd onmouseover="javascript:montre('smenu3');" id="photographie">
							<a onmouseover="javascript:montre('smenu3');" href=""></a>
							<dd id="smenu3">
							
							</dd>
						</dd>

						<dd onmouseover="javascript:montre('smenu4');" id="streetart">
							<a onmouseover="javascript:montre('smenu4');" href=""></a>
							<dd id="smenu4">
							
							</dd>
						</dd>

						<dd id="references"><a href="./?i=references"></a></dd>
					</dl>

			<div id="footer">
				<div id="content">
				<img src='./images/BERLINER-KONSTRUKTION.jpg'>				
				</div>
			</div>
		</div>
	</body>


Pour voir le reste du code (il y a le js que j'ai repris sur alsacreations) et le site web en question: http://www.graphbook.ch/

(le code n'est pas définitif, j'ai tout mis sur la meme page pour que ca soit plus accessible)

Merci d'avance de passer un peu de temps à lire mon message, je dois dire que je suis bloqué Smiley langue
Modifié par jackanderson (06 Feb 2007 - 15:32)
Salut,
Pour commencer je te conseil de lire cet article : http://css.alsacreations.com/Accessibilite-du-Web/accessibilite-des-menus-de-navigation-en-cascade
Comme tou pourras le lire, il faut éviter d'avoir plus d'un niveau de sous menu.

Tu as remodulé le code issu du tutoriel mais en supprimant des jeux de balises nécessaires pour la validité du code et pour conserver la sémantique initiale:
<dl>
<dt></dt>
<dd><dd>
<dl>

Tu ne peux pas imbriquer dirtement des <dd> dans d'autres <dd>.

Il faudrait que tu commences par comprendre à quoi correspond chaque balise. Lire à ce sujet http://pompage.net/pompe/listesdefinitions/
et http://www.la-grange.net/w3c/html4.01/struct/lists.html#h-10.3
Modifié par Hermann (08 Feb 2007 - 20:33)
Hello
Ah oui effectivement, il manque des <dt> dans mon code, enfaite je ne voyais pas trop a quoi ils servaient dans mon cas, je vais lire ca de plus près merci Smiley langue

Pour l'accessibilité je ne sais que toi répondre, je mettrai sans doute des racourcis clavier par la suite si j'ai le temps
Modifié par jackanderson (09 Feb 2007 - 11:01)
Sujet clos
Aller à