[CSS] roll over d'une image.

[easytype]

Bonjour !

J'ai voulu tenter le roll over dans mon menu, mais voilà que le resultat obtenut n'est pas celui que j'attendai

Resultat obtenu :

Resultat souhaité :

Voici mon bout de code :

			.element_menu a
			{
				background:url("../img/av.gif");
				 color:RoyalBlue;
			}

			.element_menu a:hover
			{
				background:url("../img/ap.gif");
				color:RoyalBlue;
			}

Vous avez une idée pour avoir un resultat similaire à la seconde image ?

Merci, bonne soirée.

Jessy

[yuston]

Salut,

c'est sur tous les navigateurs que tu obtiens le résultat de la première image ou uniquement sur des navigateurs récalcitrants par exemple IE6, voire IE7?

Et tes images, elles ont toutes la taille de la largeur de ton menu? Vu les arrondis, c'est la seule méthode (légère, sans imbrication de span ou de div): l'image doit occuper toute la largeur, donc pas de repeat-x.

Sinon au niveau du code, j'aurai testé un truc du genre:

.element_menu a{
background:url("../img/av.gif");
color:RoyalBlue;
display:block;
 }

[easytype]

Hello,

Sur tout les navigateurs.

L'image en question est :

J'ai tester le bout de code, et j'obtient un résultat meuilleur, mais pas complet

http://jessy.houcke.free.fr/index1.php

Modifié 16 Mars 2009 par easytype

[yuston]

Je pense qu'il faut jouer avec les margin maintenant.

.element_menu a{
background:url("../img/av.gif");
color:RoyalBlue;
display:block;
margin: 1px 2px 0 0;
}

Essaie de faire varier les marges pour voir.

[easytype]

Merci pour l'aide, c'est encore mieux, j'ai reussi à réglé les margin grace a FireBug, mais je n'arrive qu'a les géré horizontalement, on ne voit pas la suiste de l'image à la vertical

En tout cas, Merci beaucoup

Bonne soirée

[libelinfo]

pour ça, tu fais comme te l'a indiqué yuston mais en plus tu indiques une taille à ton bloc <a>, ce qui donne :

.element_menu a{
	 background:url("../img/av.gif");
	 color:RoyalBlue;
	 display:block;
	 margin: 1px 2px 0 0;
	 width : 108px; /*longueur de ton image*/
	 height : 20px; /*hauteur de ton image*/
}

ensuite à toi de jouer eventuellement avec un padding ou un margin

[easytype]

Merci beaucoup, sa marche super !

Merci beaucoup pour l'aide !

Une dernière petite chose

Les mots : [bienvenue] [Contact] [Qui suis-je ?] ... sont collé à la gauche de l'image, comment les décaler de 1 ou 2 éspace vers la droite ?

Merci à vous.

[Dadou]

Joue avec les padding

[easytype]

Merci, mais quand je joue avec, même les image bouge, et pas que le texte. :/

[Dadou]

.element_menu a
			{
				 background:url("../img/av.gif");
				 color:RoyalBlue;
				 display:block;
				 margin: 5px 0px 0 0;
				 width : 98px;
				 height : 24px; 
				 padding-left : 10px; 
			}

[libelinfo]

le "padding" est une petite bête sournoise..

il faut savoir que lorsqu'on a un bloc, quel qu'il soit et qu'on lui indique une largeur et/ou une hauteur en % ou px + un padding,

la taille de bloc devient dans les faits :

width : valeurs indiquée + valeur du padding-left / right.

donc si ton bloc fait : 200px

et que tu lui ajoute un padding de 5x à gauche et 5px à droite, ton bloc se retrouve avec une taille de 210px.

il faut donc soustraire les valeurs du padding à celle de la longueur indiquée ce qui donne dans ton cas:

.element_menu a 
	background:transparent url(../img/av.gif) repeat scroll 0 0;
	color:RoyalBlue;
	display:block;
	height:24px;
	margin:5px 0 0 0;
	padding-left:5px;
	width:103px; /*108 (taille originale de ton image) - 5 valeur de ton padding-left */
}

le fonctionnement est le même pour la hauteur et padding-top / bottom

Modifié 17 Mars 2009 par libelinfo

[easytype]

Youpi, tout marche, merci beaucoup à vous !!!

Un dérnière choses (Je suis chiant )

J'ai vu que au lieu d'utiliser 2 image differantes pour créé cette éffet, je pouvai en créé 1 et en faite, c'est un decallage de l'image qui se fait de façon à faire appariatre l'autre partie de l'image.

Si c'est trop compliquer, ce n'est pas grave, laissez tomber, car vous m'avez beaucoup aidé à obtenir ce que je voulais !

Merci beaucoup et bonne soirée.

Jessy

[libelinfo]

pour ça c'est très simple, il suffit de :

mettre dans une même image tes deux boutons l'un au dessus de l'autre, donc tu te retrouves avec une image qui va faire, dans ton cas précis : 20 + 20 => 40px de haut.

et ta feuille de style va donner ceci :

sur le a:hover on décale juste l'image à l'aide du background-position:bottom left;

.element_menu a {
	background:transparent url(../img/av_double.gif) no-repeat scroll top left; /* on place l'image en haut à gauche du bloc */
	color:RoyalBlue;
	display:block;
	height:24px;
	margin:5px 0 0 0;
	padding-left:5px;
	width:103px; /*108 (taille originale de ton image) - 5 valeur de ton padding-left */
}

/* au passage de la souris sur ton lien, l'image est juste décalée pour avoir l'effet de "roll-over" */
.element_menu a:hover {
	background-position:bottom left; /* on place l'image en bas à gauche du bloc */
}

Modifié 17 Mars 2009 par libelinfo

[easytype]

Mais c'est que tout marche super !

Merci beaucoup à tous pour votre aide, c'est vraiment sympa !

Bonne soirée à tous.

[Réglé]

[yuston]

Ah drôle, j'avais justement fait un truc similaire ce matin. Je n'ai pas trop le temps de t'expliquer, si tu arrives, regarde vite fait mon code là: student.unifr.ch/cineclub/fr/ (moyen de le mettre en nofollow m'sieurs les admins?)

La partie HTML qui te concerne c'est

<div id="affiche">
	<a href="http://student.unifr.ch/cineclub/media/upload/programmes/cinema_dementia_2009.pdf" title="Télécharger le programme (PDF)">Télécharger le programme</a>
</div>

Après, suffit de trouver la CSS correspondante, mais c'est un jeu d'enfant

[Dudu]

regarde vite fait mon code là: student.unifr.ch/cineclub/fr/ (moyen de le mettre en nofollow m'sieurs les admins?)

Non, ce n'est pas exactement la politique de la maison. Nous, on est plutôt pour la fuite du PR, pour la dilution du link juice, etc.

C'est d'ailleurs peut-être pour ça qu'on est le premier forum Invision à avoir modifié les sources pour que les signatures soient visibles des moteurs.

Et au final, c'est plus sain. Le web n'existerait pas sans les liens, finalement.

Après, tu es libre:

- tu ne veux pas que ce soit suivi des moteurs, tu rends non cliquable (et il faut se farcir un copier-coller)

- tu veux, tu rends cliquable.

Simple, n'est-ce pas ?

[yuston]

Merci de ta précision Dudu, mais mon but ce n'est pas de minimiser les liens sortants du Hub ou quoi que ce soit, juste que le site étant en construction, je n'ai nullement envie de voir des pages avec du contenu sans intérêt se faire indexer autant plus que je risque de changer sans arrêt les URLs des pages, donc, de encore moins envie de voir des futures erreurs 404. La page d'accueil étant indexée, c'est largement suffisant actuellement.

Et ma demande de rendre nofollow un lien, c'est justement de permettre aux visiteurs de cliquer (qui est avouons-le est plus simple que de copier-coller le lien).

Pour finir, un HS, je n'avais pas vu que j'ai posté ma réponse un peu près au même moment que easytype (donc je n'ai pas tenu compte de ce qu'il a écrit).