[résolu] <h2> et <p> dans un <a>? ...

Bonjour,

Désolé si ma question est un "grand classique", mais je ne trouve pas de sujet similaires... ou je ne sais pas quoi chercher


Je suis en train d'essayer de faire une page contenant un suite de "résumés" qui pointent chacun vers une page plus complète. Chaque résumé est composé d'un <h2> et d'un <p>.
J'aimerais pouvoir faire en sorte que ces deux éléments changent d'aspect au survol en même temps. J'ai donc bricolé un truc comme ça pour arriver à mes fins:

<div class="campagnes">
<a href="creche-rentable" class="campagnes">
<h2>
“La crèche est rentable, ...”
</h2>
<p>
Les crèches sont rentables et c'est leur absence qui coûte! Pour 1 franc investi, elles rapportent environ 3 francs à la collectivité, comme l'a montré une étude publiée en 2003, sur mandat des Bureaux de l’égalité romands. [+]
</p>
</a>
</div>

et le bout de css

#col_droite >.campagnes a{
text-decoration: none;
color: #8c8c8c;
}

#col_droite > .campagnes a:hover{
color: #3F3B3F;
background-color: #D8D7BF;
}

Même si on n'est pas censé mettre des éléments blocs dans des élément en ligne, le pire c'est que ça marche...

Comment arriver à ce même aspect en faisant qqch de "propre"?

Merci d'avance pour vos lumières
Modifié par firfelin (20 Aug 2007 - 14:21)

firfelin a écrit :
Même si on n'est pas censé mettre des éléments blocs dans des élément en ligne, le pire c'est que ça marche...

Oui mais vu que ce n'est pas homologué, cela peut marcher... ou pas. Aucune règle ne forcera les navigateurs à faire fonctionner ton code.
Bref, cela reste du hasard, même si actuellement le hasard semble bien faire les choses.

firfelin a écrit :
Comment arriver à ce même aspect en faisant qqch de "propre"?

JavaScript me semble parfaitement adapté à ce genre de situation.
Il est justement fait pour ça et, bien conçu, il s'intègrera parfaitement à ton document sans gêner les personnes chez qui il est inactif.

Merci pour la réponse rapide

Ce qui est vraiment hallucinant, c'est que sur toute la série, il s'avère que le 3e de la liste (toujours le 3e, même quand je change l'ordre... ) s'affiche dans Firefox comme si les balises s'inversaient et revenaient à "une bonne pratique": au lieu de <a> <h2></h2><p></p></a>, il fait <h2><a></a></h2><p><a></a></p> alors que les autres sont "justes"...
aaargh

Je vais essayer d'aller voir du coté de javascrip donc (et encore un truc inconnu ...), merci du conseil.


edit: je n'avais pas vu ton exemple, merci infiniment, je teste et je reviens
Modifié par firfelin (19 Aug 2007 - 14:01)

Alors...

Je ne sais pas si je fais mal quelque chose, mais je n'arrive pas du tout à faire fonctionner l'effet en ajoutant un lien...

tant qu'il n'y a que le titre et le paragraphe tout marche à merveille, dès que je change en

<div class="effet">
<h2><a >Titre</a ></h2>
<p><a >un paragraphe</a ></p>
</div>

ça ne marche plus... comme si le style des liens prenait le dessus

Modifié par firfelin (19 Aug 2007 - 15:17)

ah bah rajoute ça dans ton CSS

.effet a { color: inherit; }

Je suis vraiment désolé, mais je n'y arrive pas...

http://binocle.ch/test/test_changecouleur.html

les liens restent obstinément de leur couleur de base...

Au temps pour moi... Je me suis emmelé les pinceaux dans les boucles...

Remplace le code JS par celui-ci :

var oO =
{
	'class': 'effet',
	'effet': 'effect',

	/**
	 * oO.connect(oElem, sEvType, fn, bCapture)
	 * Affecte un gestionnaire d'événement lors d'un événement sur un élément
	 */
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},
	
	/**
	 * oO.aTag(oEl, sTag)
	 * Renvoie un tableau des éléments de tag sTag compris dans l'élément oEl
	 */
	aTag: function(oEl, sTag)
	{
		return oEl.getElementsByTagName(sTag);
	},
	
	/**
	 * oO.getSource(e)
	 * Renvoie la source d'un événement
	 */
	getSource: function(e)
	{
		return e.target || e.srcElement;
	},
	
	/**
	 * oO.gestionClass(a, o, c1, c2) -> Manipulation et test de classes CSS
	 * par Christian Heilmann
	 *  http://onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
 
	 *
	 * This example function takes four parameters:
	 * a -> defines the action you want the function to perform.
	 * o -> the object in question.
	 * c1 -> the name of the first class
	 * c2 -> the name of the second class
	 *
	 * Possible actions are:
	 * swap -> replaces class c1 with class c2 in object o.
	 * add -> adds class c1 to the object o.
	 * remove -> removes class c1 from the object o.
	 * check -> test if class c1 is already applied to object o and returns true
	 *          or false.
	 */
	gestionClass: function(a, o, c1, c2)
	{
		switch(a)
		{
			case 'swap': // Modification d'une classe en une autre
				o.className = !oO.gestionClass('check', o, c1) ?
					o.className.replace(c2, c1) :
					o.className.replace(c1, c2);
			break;
			case 'add': // Ajout d'une classe
				if(!oO.gestionClass('check', o, c1))
					o.className += o.className?
						' ' + c1 :
						c1;
			break;
			case 'remove': // Suppression d'une classe
				var rep = o.className.match(' ' + c1) ?
					' ' + c1 :
					c1;
				o.className = o.className.replace(rep, '');
			break;
			case 'check': // Recherche d'une classe
				return new RegExp('\\b' + c1 + '\\b').test(o.className);
			break;
		}
	},
	
	/**
	 * insertGestionKey(oEl)
	 * Insère un lien de contrôle en début d'élément (pour la navigation clavier)
	 */
	insertGestionKey: function(oEl)
	{
		var oA;

		oA = document.createElement('a');
		oA.href= '#';
		
		return oEl.insertBefore(oA, oEl.firstChild);
	},
	
	/**
	 * oO.gestionEffect(e)
	 * Gère les effets
	 */
	gestionEffect: function(e)
	{
		var oSrc, aChilds, iChild, sEffect;
		
		oSrc = oO.getSource(e);
		
		while(oSrc && oSrc.nodeName.toLowerCase() != 'div')
			oSrc = oSrc.parentNode;

		switch(e.type)
		{
			case 'mouseover':
				aChilds = oSrc.childNodes;
				iChild = aChilds.length;
				sEffect = 'add';
			break;
			case 'mouseout':
				aChilds = oSrc.childNodes;
				iChild = aChilds.length;
				sEffect = 'remove';
			break;
			case 'focus':
				aChilds = oSrc.parentNode.childNodes;
				iChild = aChilds.length;
				sEffect = 'add';
			break;
			case 'blur':
				aChilds = oSrc.parentNode.childNodes;
				iChild = aChilds.length;
				sEffect = 'remove';
			break;
		}
		
		do oO.setEffect(aChilds[--iChild], sEffect);
		while(iChild > 0);
		
		return true;
	},
	
	/**
	 * oO.setEffect(oEl, sControl)
	 * Applique l'effet demandé à un élément
	 */
	setEffect: function(oEl, sControl)
	{
		return sControl === 'remove' ?
			oO.gestionClass('remove', oEl, oO['effet']):
			oO.gestionClass('add', oEl, oO['effet']);
	},

	/**
	 * affectListener(oEl)
	 * Affecte un gestionnaier d'événement à un élément
	 */
	affectListener: function(oEl)
	{
		var aEvents, iEvent;

		aEvents = ['mouseover', 'mouseout', 'focus', 'blur'];
		iEvent = aEvents.length;

		while(iEvent-- > 0)
			oO.connect(oEl, aEvents[iEvent], oO.gestionEffect, false);
	},

	/**
	 * oO.init()
	 * Chef d'orchestre du script
	 */
	init: function()
	{
		var aDivs, iDiv, aAs, iA, aEvents, iEvent;
		
		aDivs = oO.aTag(document, 'div');
		iDiv = aDivs.length;
		
		while(--iDiv > -1 && oO.gestionClass('check', aDivs[iDiv], oO['class']))
		{
			oO.insertGestionKey(aDivs[iDiv]);
			oO.affectListener(aDivs[iDiv]);
		}
	}
};

oO.connect(window, 'load', oO.init, false);

Merci infiniment

Ca marche enfin... après des heures d'arrachage de cheveux à essayer d'intégrer l'effet qui marchait à merveille sur une page test, et qui refusait obstinément de fonctionner sur la vraie page. Au final, il se trouve que le footer de la page perturbe tout et empeche l'effet de fonctionner