Création menu Html/CSS
Elgate
-
lokakilo Messages postés 213 Date d'inscription Statut Membre Dernière intervention -
lokakilo Messages postés 213 Date d'inscription Statut Membre Dernière intervention -
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:
et voici le css:
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:
- Création menu Html/CSS
- Menu déroulant excel - Guide
- Creation compte gmail - Guide
- Création site web - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
- Création compte google - Guide
4 réponses
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>
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>
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?
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?
