[Résolu] Menu avec commentaires en css

Bonjour,

J'aimerai faire un menu qui, au survol d'un lien, affiche des commentaires. J'ai suivi ce tutoriel ici : Un menu avec commentaires au survol.

Comme pour l'instant je ne fais que des tests donc voici mon résultat : http://testdeco.olympe-network.com/site/.

Comme vous le voyez, les commentaires descendent si on va dnas les derniers liens et je voudrai au contraire qu'il soient fixes en haut à droite du cadre. Pour l'instant ya pas de design donc vous en faites pas pour ça

Voici le html :

<div id="menu">
	<ul>
	<li><a href="">Menu 1<span>Lorem ipsum dolor sit amet, consectetuer 
		adipiscing elit. Vivamus ipsum dui, vulputate ut, eleifend pretium, tristique 
		a, velit. Morbi lacus</span></a></li>
	<li><a href="">Menu 2<span>Cras eu mi vel pede 
		tempus dignissim. Etiam malesuada scelerisque massa. Maecenas metus sem, consectetuer 
		quis, rhoncus non, euismod id, elit</span></a></li>
	<li><a href="">Menu 3<span>Cras 
		fringilla. Integer in neque. Nulla massa. Vestibulum eleifend mattis erat</span></a></li>
	<li><a href="">Menu 4<span>Sed bibendum vehicula sem. Donec venenatis diam eu 
		erat. Ut rutrum sem ut erat</span></a></li>
	<li><a href="">Menu 5<span>Phasellus tristique, 
		turpis in nonummy luctus, eros enim pellentesque felis, sed venenatis quam 
		orci quis nisl. Nulla id nunc. Nam porttitor volutpat erat<em>can't</em> she 
		do?</span></a></li>
	<li><a href="">Menu 6<span>Dernière phrase bidon !</span></a></li>
	</ul>
</div>

Et voici le css

#menu {
	border:                1px black solid;
	padding:               0;
	margin:                0;}

#menu ul {
	padding:               0;
	margin:                0;}

#menu ul li {
	list-style:            none;
	border:                1px orange solid;
	width:                 200px;
	height:                20px;
	font-variant:          small-caps;
	line-height:           20px;
	padding:               0 10px;}

#menu a {
	display:                block;
	text-decoration:    none;}

#menu a span {
	display:                none;}

#menu a:hover span {
	display:                block;
	width:                  455px;
	border-top:           1px solid gray;
	margin:                -20px 0 0 220px;
	text-align:             right;}

Merci à ceux qui essayeront de m'aider =o)
Modifié par eWay (20 Dec 2008 - 22:39)

Bonsoir eWay,

En fin du tutoriel que tu cites, il y a la référence du site qui a inspiré ce menu avec commentaires au survol :
http://meyerweb.com/eric/css/edge/popups/demo.html

C'est en anglais, mais c'est assez facile d'accès.

En gros, pour afficher ton conteneur survolé à un endroit précis, la position absolute et ton amie

Sur le site d'Eric Meyer les propriétés sont celles-ci :

div#links a:hover span {
	display: block;
	position: absolute; 
	top: 200px; 
	left: 0; 
	width: 125px;
	padding: 5px; 
	margin: 10px; 
	z-index: 100;
	color: #AAA; 
	background: black;
	font: 10px Verdana, sans-serif; 
	text-align: center;
}

A toi d'adapter à ton besoin

Cdt,
Sylvain

Bonjour,

Le problème c'est que la position en absolute fait ça par rapport au haut droite de la page. Mes blocs sont centré au milieu, donc selon la taille de la fenêtre la distance entre le milieu de la page et le haut gauche va changer.

Est-il possible de positionner le commentaire par rapport à mon bloc #menu ?

J'ai essayé une autre méthode : en diminuant le margin-top afin que le block remonte.

<div id="menu">
	<ul>
	<li><a href="">Home<span id="lien1">Lorem ipsum dolor sit amet, consectetuer 
		adipiscing elit. Vivamus ipsum dui, vulputate ut, eleifend pretium, tristique 
		a, velit. Morbi lacus</span></a></li>
	<li><a href="">Créations<span id="lien2">Cras eu mi vel pede 
		tempus dignissim. Etiam malesuada scelerisque massa. Maecenas metus sem, consectetuer 
		quis, rhoncus non, euismod id, elit</span></a></li>
	<li><a href="">Présentation<span id="lien3">Cras 
		fringilla. Integer in neque. Nulla massa. Vestibulum eleifend mattis erat</span></a></li>
	<li><a href="">Contact<span id="lien4">Sed bibendum vehicula sem. Donec venenatis diam eu 
		erat. Ut rutrum sem ut erat</span></a></li>
	</ul>
</div>

#menu {
	padding: 0;
	margin: 0;
	border: 1px solid black;}

#menu ul {padding:0;margin:0;}

#menu ul li {
	list-style: none;
	width: 200px;
	height: 30px;
	font-variant: small-caps;
	line-height: 30px;
	padding: 0 10px;
	text-align: center;}

#menu a {
	display:block;
	text-decoration:none;}

#menu a span {
	display: none;}

#menu a:hover span {
	display: block;
	width: 455px;
	margin: 0px 0 0 220px;
	padding:0;
	text-align: right;
	border-top:1px solid orange;}

#menu a:hover #lien1 {
	margin-top: -31px;}

#menu a:hover #lien2 {
	margin-top:-61px;}

#menu a:hover #lien3 {
	margin-top:-91px;}

#menu a:hover #lien4 {
	margin-top:-121px;}

Sous Safari et Chrome : ça marche bien. Le problème c'est que sur IE parfois ça ne monte pas assez (comment appliquer une fiche css pour IE seulement ?)

Pour Firefox, quand le margin-top n'est pas trop grand ça va, mais quand il est grand (comme pour les deux dernières cases) et qu'on se place juste à gauche des liens ba ça clignote
Quelqu'un aurai une solution pour Firefox ?

eWay a écrit :
Bonjour,
Le problème c'est que la position en absolute fait ça par rapport au haut droite de la page. Mes blocs sont centré au milieu, donc selon la taille de la fenêtre la distance entre le milieu de la page et le haut gauche va changer.
Est-il possible de positionner le commentaire par rapport à mon bloc #menu ?

Petites lectures pas forcément inutiles
Comprendre le positionnement des balises en CSS
Initiation au positionnement CSS (position absolue et fixe)

En résumé, positionner ton menu (relatif, absolu) puis positionner ton span par rapport à l'ancêtre positionné (donc le menu) en haut à droite, ou à l'endroit qui te convient.

Cdt,
Sylvain

Evidemment, dans ce cas de figure, ceci n'est plus nécessaire :

#menu a:hover #lien1 {
	margin-top: -31px;}

#menu a:hover #lien2 {
	margin-top:-61px;}

#menu a:hover #lien3 {
	margin-top:-91px;}

#menu a:hover #lien4 {
	margin-top:-121px;}

De même qu'il faudra nettoyer le code html

J'ai compris !

Merci beaucoup ! Les histoires de position absolute et relatif n'est pas mon grand point fort mais je vais travailler ça sans problèmes

Merci beaucoup !

Sinon j'ai une erreur php que j'arrive pas à solutionner, je post ça ici ou bien je fais un nouveau topic dans une catégorie plus appropriée ?

Hello eWay et bienvenue,

si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.

Pour une question sur PHP merci d'ouvrir un nouveau sujet dans le salon "Langages serveurs".

Voilà, j'ai édité le titre, merci encore pour l'aide !

EDIT : Pour mon problème de PHP, j'ai trouvé la solution. Désolé d'avoir dérangé pour ça, si j'ai encore besoin d'aide je n'hésiterai pas à vous solliciter
Modifié par eWay (20 Dec 2008 - 22:47)