28172 sujets

CSS et mise en forme, CSS3

Enlever les décorations autour de l'image aprés le click

Bonjour,

J'aimerais lors du click sur le lien image, que le contour de l'image en pointillé qui reste après que le lien est été visité, ne soit pas présent .

Savez vous comment faire ?
<style type="text/css">
<!--
body {
	background-image: url(images/bg2.jpg);
	margin:0;
	padding:0;
}
#logo {

	position:absolute;
	top:130px;
	left:300px;
	margin:0px;
	height: 482px;
	width: 355px;
}
#conteneur1 {
	height: 670px;
    width: 1280px;
	position:absolute;
}
#conteneur2 {
	height: 130px;
    width: 100%;
	background-image:url(images/1px.jpg);
	background-repeat:repeat;
	top:670px;
	position:absolute;
}
#menu1 {

	position:absolute;
	top:450px;
	left:200px;
	margin:0px;
	height: 100px;
	width: 105px;
}
#menu2 {
	position:absolute;
	top:450px;
	left:650px;
	margin:0px;
	height: 105px;
	width: 242px;
}
#menu2:hover {
    background-image:url(images/hover_menu2.png);
	cursor:pointer;
	position:absolute;
	top:450px;
	left:650px;
	margin:0px;
	height: 105px;
	width: 242px;
}
-->
</style>
</head>

<body>
<div id="conteneur1">
<div id="menu1"><img src="images/menu1.png" alt="mobilier" />
</div>
<div id="menu2"><a href="http://www.mno.fr"><img src="images/menu2.png" alt="realisation" border="0" /></a></div>
<div id="logo"><img src="images/logo.png" alt="Arch-FS" />
</div></div>
<div id="conteneur2">
</div>
</body>
</html>



Autre petite question, pensez vous qu'il soit mieux que je fasse mon Rollover Image en CSS ou en Javascript ?

Merci par avance de votre aide
Modifié par dreadstock (20 Feb 2009 - 14:36)
dreadstock a écrit :
J'aimerais lors du click sur le lien image, que le contour de l'image en pointillé qui reste après que le lien est été visité, ne soit pas présent.

Faut-il rappeler que ce contour est ajouté par défaut par le navigateur pour rendre visible les liens et éléments divers lorsqu'ils prennent le focus?

Ce style va dépendre du navigateur, et peut être géré de diverses manières. Dans Internet Explorer 6 et 7, c'est un comportement natif que l'on ne peut pas (il me semble) contrecarrer en CSS. Dans Firefox, c'est une utilisation de la propriété outline, de même que dans Safari (je crois que ce dernier utilise des effets CSS3 pour obtenir les contours de type «halo bleuté»). Dans Opera, à vrai dire je ne sais pas.

Je parle ici des styles au focus, mais le truc c'est que quand un élément focusable (lien, champ de formulaire, tout élément avec un tabindex="0"), lors du clic il reçoit à la fois l'état :focus et l'état :active (du moins avec Firefox, pour les autres c'est à vérifier...).

Je t'invite à tester le code suivant:
a:active {outline: double 5px;}
a:focus {outline-color: red;}

Avec ce code, lors de la navigation au clavier, le liseré des liens devrait être rouge au lieu de la couleur par défaut (qui correspond à la couleur du texte du lien). Lors du clic (sans relâcher pour avoir le temps d'observer), le liseré devient une bordure double, ET devrait être rouge (style au focus). Ça démontre que les deux styles s'appliquent bien.

Pour donner la priorité à l'un ou l'autre style, il suffit de jouer sur leur ordre, ce qui nous permet de faire par exemple:
a:focus {outline: 1px dotted;}
a:active {outline: none;}

Ainsi les liens gardent un liseré au focus, mais pas au clic. On pourrait d'ailleurs se contenter de la deuxième ligne.

Le problème?
- Pas sûr que ça passe dans Safari ou Opera sans effets secondaires pour la navigation au clavier.
- IE6-7 implémente mal :active et :focus... en réalité, :active est implémenté comme s'il s'agissait de :focus ou presque, enfin je n'ai pas exploré ça en détail mais ça m'a l'air d'être un joyeux bordel. À tester absolument!

dreadstock a écrit :
Autre petite question, pensez vous qu'il soit mieux que je fasse mon Rollover Image en CSS ou en Javascript ?

L'image porte une information: image dans le code HTML, avec attribut alt qui va bien correctement renseigné (je soupçonne que ce n'est pas tout à fait le cas dans ton code actuel), et changement d'image en JavaScript.
L'image est décorative: CSS.
Administrateur
Bonjour,

"titre" a écrit :
Enlever les décorations autour de l'image aprés le click

Comme l'a expliqué Florent V., ce n'est pas une "décoration", mais un élément bien utile pour savoir sur quoi on avait cliqué, si on a cliqué, un repère, etc Smiley cligne
On peut l'enlever ou le restyler mais euh ... non en fait
C'est parfait , le code suivant marche pour les 3 navigateurs suivant IE7, FIREFOX, et CHROME,

a:active {outline: none;}
a:focus { outline:none;}
moi-même a écrit :
Faut-il rappeler que ce contour est ajouté par défaut par le navigateur pour rendre visible les liens et éléments divers lorsqu'ils prennent le focus?

Apparemment il le faut.

dreadstock, le code que tu as utilisé est à proscrire. Il rend complètement impossible la navigation au clavier sur le site, c'est un défaut énorme d'accessibilité. Flinguer l'accessibilité au clavier pour un petit défaut d'aspect, c'est une bêtise.

Celui que je donne en deuxième exemple est déjà beaucoup plus intéressant, même si son impact devrait être testé correctement.
Modifié par Florent V. (20 Feb 2009 - 17:55)
Dommage que ce soit la pire des solutions qui ai été utilisée.

Maintenant il n'est plus possible de ce situer dans le site (comme précisé par Felipe) dans le cas d'une navigation au clavier par exemple.

Cela devrait limite être interdit de donner l'info sur "outline" car au final c'est bien souvent très mal utilisé, la preuve une fois de plus.

Grilled Smiley lol
Modifié par knarf (20 Feb 2009 - 18:02)
knarf a écrit :
Cela devrait limite être interdit de donner l'info sur "outline" car au final c'est bien souvent très mal utilisé, la preuve une fois de plus.

Oui, j'avais commencé mon dernier message par «la prochaine fois je fermerai ma gueule», suivi de quelques insanités. Mais comme je me relis avant d'envoyer un message, ça n'a pas passé le stade de la réécriture. Smiley cligne
Sujet clos
Aller à