28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Mes excuses aux modérateurs, je replace le sujet ici car je crois qu'il n'était pas dans la bonne rubrique

Deux questions par rapport à la page web ci-dessous

ici

1°/ J'ai un lien sur l'image ac-nancy-metz.fr et j'aimerai ne pas avoir le contour bleu.
2°/ Les intitulé " nous contacter" et "mentions" sont également des liens et je n'arrive pas à y avoir accès.

Voici les CSS correspondants:
menu de gauche
aspect global
aspect et menu de la barre de titre
aspect de la partie sur fond gris

Le problème est rencontré sous Firefox, mais pas sous IE7 Smiley biggol

Je sais que j'ai encore des progrès à faire au niveau design...

Merci d'avance de m'aiguiller
Smiley biggrin
Modifié par Boubou57 (01 Feb 2008 - 09:04)
Bonjour,

Pour le design, il y a une amélioration sensible. Smiley cligne

Pour le problème technique, on le débusque très facilement avec Firebug (en mode «inspect») par exemple.

Je serais tenté de te laisser t'équiper des bons outils et chercher par toi-même, mais on va tout de même donner la réponse:
#banniere_academique {
	bottom: 0px;
	left:0px;
	position:absolute;
	right:0px;
	top:0px;
}
En gros, tu dis à ce bloc en position absolue de prendre toute la largeur et toute la hauteur de la zone de visualisation du navigateur. Et comme il se place au premier plan devant le bloc de contenu principal, on ne peut plus cliquer sur les liens car en réalité on clique sur div#banniere_academique.
Salut,

merci pour ta réponse.

Je cherche encore pourquoi sur la bannière veticale ac-nancy-metz, j'ai un contour bleu sur firefox, que je n'ai pas sur IE7...

Si vous avez une idée

a bientôt
Pour avoir une idée, oui, elle est même consignée dans cette page de test:
http://web.covertprestige.info/test/25-soulignement-image-dans-lien.html

En gros: la majorité des navigateurs applique par défaut une bordure aux images contenues dans les liens (pour que l'on voie bien que c'est une image réactive). Cette bordure est de la couleur du texte (c'est à dire bleu si la couleur des liens par défaut est conservée).

Normalement, Internet Explorer devrait t'afficher cette bordure. Sauf qu'en fait dans Internet Explorer tu n'as plus d'image dans le lien: ton script pour l'affichage des PNG transparents, qui s'applique aussi bien à IE6 qu'à IE7 (ce qui est une erreur: IE7 gère nativement les PNG transparents!... il faudrait passer par un commentaire conditionnel), remplace l'image par un bloc flottant de mêmes dimensions utilisant un filtre DirectX pour l'affichage de l'image transparente.
Donc, pour Internet Explorer, dans le code HTML il y a bien une image mais dans le code généré après traitement du Javascript... plus d'image, donc plus de bordure.

Le problème se résout avec un a img {border: none;} dans la feuille de styles.

Par contre, tu as un autre problème: le lien dans IE6-7 n'est actif que sur les parties opaques de l'image. Tu peux circonscrire ce problème à IE6 en n'adressant le script JS qu'à IE6 et inférieurs via un commentaire conditionnel qui va bien (voir la FAQ du forum à ce sujet). Par contre, pour résoudre le problème lui-même... je ne sais pas s'il y a un correctif. Je te laisse le chercher si ça t'intéresse (sinon tant pis pour les utilisateurs d'IE6, ce lien sera simplement un peu moins utilisable que prévu).