Sujet Précédent Sujet Suivant

Création menu Html/CSS

Fermé
Elgate - 28 mai 2012 à 11:26
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 - 31 mai 2012 à 00:04
Bonjour,

Je suis en rhéto, et pour TFE, on m'a demandé de créer un site web avec un autre de ma classe. Ma partie est de faire le menu (qui sera le plus difficile vu notre niveau) et je viens solliciter votre aide.

J'ai décidé de faire un menu en forme de cercle et quand je passe la souris sur l'un des quarts du cercle, celui-ci se vide et laisse apparaitre les liens en dessous. seul problème à l'heure actuelle, impossible de cliquer sur ces liens. une idée? Voici le HTML: 

<html>
	<head>
		<link rel=stylesheet type=text/css href="Menu.css">
	</head>
	<body>
		<div id='menuIMG'>
			<div id='menuL'>
				<img src="MenuPTL.png" name="TL" onmouseover="TL.src='MenuVTL.png'" onmouseout="TL.src='MenuPTL.png'" />
			</div>
			<div id='menuR'>
				<img src="MenuPTR.png" name="TR" onmouseover="TR.src='MenuVTR.png'" onmouseout="TR.src='MenuPTR.png'" />
			</div>
			<div id='menuL'>
				<img src="MenuPBL.png" name="BL" onmouseover="BL.src='MenuVBL.png'" onmouseout="BL.src='MenuPBL.png'" />
			</div>
			<div id='menuR'>
				<img src="MenuPBR.png" name="BR" onmouseover="BR.src='MenuVBR.png'" onmouseout="BR.src='MenuPBR.png'" />
			</div>
		</div>
		<div id='menuTXT'>
			<div id='menuLTXT' style="margin-top:120;">
						<a href='http://www.google.be/'>test</a>
			</div>
		


		</div>
		
	</body>
</html>


et voici le css: 

#menuIMG{
	position:absolute;
	width : 400px;
	height : 400px;
	z-index : 3
}

#menuL{
	width : 200px;
	height : 200px;
	float : left;
}
#menuR{
	width : 200px;
	height : 200px;
	float : right;
}
#menuTXT{
	position: absolute;
	width : 400px;
	height : 400px;
	z-index : 2
}

#menuLTXT{
	width : 200px;
	height : 200px;
	float : left;
	margin-left : 80px;
}
#menuRTXT{
	width : 200px;
	height : 200px;
	float : right;
	margin-right : 80px;
}


A voir également:

4 réponses

Réponse 1 / 4
theshadoo Messages postés 786 Date d'inscription samedi 26 mai 2007 Statut Membre Dernière intervention 3 mai 2016 123
28 mai 2012 à 13:19
déjà des liens menu réalisé sans aucunes balises <a href...> c'est pas conforme et pas top, après je sais pas comment est ton site ou menu. Tu peux aussi réaliser tes liens en forme de cercle tout en css3 et html5.

les div hover fonctionne sous chrome et firefox voir ie9 mais en dessous tes divs en hover ne seront pas prises en compte par les ie plus ancien.

Je ne sais pas la disposition de tes blocks comment tu désires les disposer.

Quoi qu'il en soit tu dis qu'il est impossible de cliquer sur les liens et moi je ne vois aucun lien justement dans ton menu.

Un lien tu le fais comme ça <a href="le lien de ton menu" title="le titre de ton lien"> l' image de ton menu ou le texte </a>
0
Réponse 2 / 4
Elgate
28 mai 2012 à 13:59
Merci de ces idées, mais ce n'est pas tout a fait ce que je cherche. Je m'explique:

Le menu est en fait un cercle. quand je passe ma souris sur l'un des quarts du cercle, le quart se vide et laisse apparaitre 3 liens derrière (je n'en ai encore mis qu'un seul). Le problème est que ce menu est divisé en 2 "couches", celle du dessus les images, et celle du dessous, les liens. le problème est que de cette façon les liens sont visible, vu que lors du mouse-over l'image est transparente, mais ne sont pas cliquable. Une idée?
0
Réponse 3 / 4
Elgate
28 mai 2012 à 20:02
je cherche toujours de l'aide svp.
0
theshadoo Messages postés 786 Date d'inscription samedi 26 mai 2007 Statut Membre Dernière intervention 3 mai 2016 123
30 mai 2012 à 20:45
si tu postais un peu plus de code pour que l'on sache !!!!!! il faut lire ce que l'on te répond !
0
Réponse 4 / 4
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
31 mai 2012 à 00:04
Oulah, bizarre ton code, tu te complique la vie pour rien, n'utilise pas le Javascript ici, utilisé des :hover et des display:none;
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses