18041 sujets

Questions générales et questions de débutants

A h2 { text-decoration: none } récalcitrant

Bonjour,

J'ai un lien sur une h2 et un paragraphe et j'aimerai enlevé le souligné sur le h2 (pas sur le paragraphe). Le code html :

<a href="url"><h2>test</h2><p>blabla</p></a>


avec le css suivant :

a h2 { text-decoration: none }


et bien celà fonctionne uniquement sur IE ...

Ya la solution de faire 2 liens et un lien à l'intérieur du h2 :

<h2><a href="link">test</a></h2><p><a href="link">blabla</a></p>


Mais cette solution ne me convient pas car j'applique en changement de couleur :hoover sur les liens et lorsque que l'on passe la souris sur le paragraphe, j'aimerai bien que la couleur du h2 change aussi ... donc il faut laisser le lien sur l'ensemble.

Quelqu'un a une idée ?

Merci !
Ce bout de code n'est pas valide:
<a href="url"><h2>test</h2><p>blabla</p></a>


h2 est un élément de type bloc et a un élément de type en ligne. Tu ne peux pas mettre un élément de type bloc dans un élément de type en ligne.
Merci ! Oui vous avez raison ca n'est pas du code valide.

Mais c'est quand même un bug de la part des autres navigateurs. Parceque je peut très bien lui placer un display:block à mon <a> ou un display:inline à mon h2... mais ca ne fonctionne pas non plus.

Selon vous la seul facon de procéder et de créer 2 liens et donc de devoir se passer de l'effet de couleur sur le h2 lors du passage sur le paragraphe ? Ou bien utiliser JS mais bon je ne me voit pas passer par JS pour obtenir cet effet.
Modérateur
Bonjour,

idec a écrit :

Mais c'est quand même un bug de la part des autres navigateurs. Parceque je peut très bien lui placer un display:block à mon &lt;a&gt; ou un display:inline à mon h2... mais ca ne fonctionne pas non plus.


Non, ce n'est pas un bug des navigateurs. Les navigateurs respectent les standards, et ton code ne l'est pas. Il y a aussi une différence entre le type des éléments (block et inline) versus les styles CSS block et inline.
Merci.
Oui j’ai compris.

Dommage que les navigateurs suivent ces standards à la lettre parcequ’ honnêtement rien ne justifie de na pas pouvoir appliquer un lien à ce que l’on veut. Finalement je vais laisser tel quel. Les internautes utilisant IE auront quelque chose de joli et ça sera un peu moins joli pour les autres.
Modérateur
Oui, mais ton code restera invalide, et rien ne garantie qu'il s'affichera correctement dans les navigateurs actuels ou futurs.

Il existe des solutions à base de Javascript (JQuery) qui te permettrait d'avoir un code valide et avoir l'effet désiré assez simplement. Si ça t'intéresse, je peux essayer de le retrouver...
Merci !

C'est sympa mais je pense pouvoir le programmer en js.
C'est assez simple à première vue.

Mais franchement devoir en passer par js pour un truc de ce genre ... je vais y réfléchir parceque ca me fait de la peine pour les utilisateurs qui n'utilise pas IE je l'avoue Smiley smile

Avant d'en arriver là je voulais savoir si il n'y a pas une solution plus simple
C'est un bug... de IE Smiley smile

Il ne faut pas confondre le type d'un élément (block, inline) et la façon dont on l'affiche.

D'ailleurs d'un point de vue sémantique aussi, tu raisonnes à l'envers.

Pour ton cas, tu as deux solutions :

1) Tu utilises des span au lieu de ton h2 et de ton p.
2) Tu utilises deux liens.

C'est bien cette seconde solution qui est la plus correcte, à mon sens.
Modifié par mistike (09 Dec 2010 - 15:37)
salut,

j'ai un soucis d'imbrication de balises qui me donnent un mauvais résultat.

j'espères que vous pourrez m'aider

J'ai épuré pour fair un code de test :

<HTML>

	<HEAD>
		<style>
			a
			{
				color: red;
			}
			
			p a
			{
				color: green;
			}
		</style>
	</HEAD>

	<body>
		<p>
			<h2><a href="#">titre</a></h2>
		</p>
	</body>

</html>


Logiquement le texte "titre" devrai apparaitre vert pourtant il apparait rouge sur IE8, chrome et FF.

L'analyseur d'elements de chrome me donne :

<html><head>
	<style>
		a
		{
			color: red;
		}
		
		p a
		{
			color: green;
		}
	</style>
</head>
<body>
	<p></p>
        <h2>
                <a href="#">titre</a>
        </h2>
	<p></p>
</body></html>


comme si le h2 cassait le p

A l'origine, j'avais fait p=>a=>h2, mais en lisant ce post, j'ai compris qu'on ne met pas de block dans un inline, ca ok ....

mais la, je seche
Je sais bien qu'à l'ère de l'écologie on veuille recycler le plus possible, mais je ne pense pas que le recyclage de sujets dans un forum fasse partie des priorités pour l'environnement.

Donc si tu souhaites que les membres puissent voir ton problème et y répondre tu vas devoir créer un sujet à part. Smiley smile
Modifié par jb_gfx (12 May 2011 - 11:07)
Sujet clos
Aller à