Bordure blanche bizarre autour d'un lien!

Bonjour!
Dans cette image, le lien "les vétérans des essais nucléaires" est entouré d'une bordure blanche. Il n'est pas de la meme couleur que le reste du conteneur.

(désolé, je n'arrive pas à l'afficher en plus grand!)

Voici le Html:

<div class="encartmagma">
"Un magma incandescent grandit, grandit de plus en plus. Sur son pourtour, la matière prend des teintes rougeât.............fumée bouillante, noire se dresse, <span class="gras">on a l'impression d'un dépôt de pétrole qui brûle</span>. <a href="http://www.amazon.fr/v%C3%A9t%C3%A9rans-essais-nucl%C3%A9aires-fran%C3%A7ais-Sahara/dp/229600766X/ref=sr_1_1?s=books&amp;ie=UTF8&amp;qname=1451560656&amp;sr=1-1&amp;keywords=christine+chanton">Les vétérans des essais nucléaires français au Sahara 1960 -1966". </a>Christine Chanton. L'Harmattan. Page 158</div>

<span class="gras">Que dire de plus?</span><br /><br />

Savez vous comment enlever cette bordure blanche?
MERci pour vos explications.
Modifié par abeille (07 Mar 2016 - 16:53)

Tu peux appliquer du css ->border:none sur ta balise <a>

JENCAL a écrit :
Tu peux appliquer du css -&gt;border:none sur ta balise &lt;a&gt;

Salut JENCALT, merci pour ta réponse.
Donc je fais <a class="pasdebordure"><img src="...." alt="">

??

Oui tu peux mettre une classe dans ta balise <a> comme tu as fais, et ensuite appliquer du CSS (border:none) dans ton CSS.

JENCAL a écrit :
Oui tu peux mettre une classe dans ta balise &lt;a&gt; comme tu as fais, et ensuite appliquer du CSS (border:none) dans ton CSS.

Ok Jencal, c'est parfait.
Juste que j'avais déclaré une bordure pour tout mes floatright. Donc je dois créer une class spéciale pour les conteneurs où il y a un lien internet.

Merci bien, à plus.

abeille a écrit :
Ok Jencal, c'est parfait.
Juste que j'avais déclaré une bordure pour tout mes floatright. Donc je dois créer une class spéciale pour les conteneurs où il y a un lien internet.

Merci bien, à plus.

Si cela ne fonctionne pas essaye de rajouter !important

border:none !important;

JENCAL a écrit :


Si cela ne fonctionne pas essaye de rajouter !important

border:none !important;

Eh oui, très important le !important. Sinon ça ne fonctionne pas.
Merci pour ce petit rappel.

Au fait, excellent le texte de ton avatar!
Modifié par abeille (07 Mar 2016 - 21:12)

JENCAL a écrit :


Si cela ne fonctionne pas essaye de rajouter !important

border:none !important;

Beurk, beurk, beurk !
Enfin JENCAL, tu n'avais pas d'autres idée !?
Surdéfinir, oui, mais pas de la sorte...
Il faut voir le contexte, mais peut-être que juste l'ajout d'une classe dans ton sélecteur suffirait, du type :

.un-de-mes-parents .pasdebordure {
  border:none;
}

Modifié par SolidSnake (08 Mar 2016 - 07:44)

SolidSnake a écrit :

.un-de-mes-parents .pasdebordure {
  border:none;
}

Ok, mais je ne comprends pas très bien le .un-de-mes-parents
Cela correspond à quoi dans le Html?

Merci pour tes conseils.

Au parent de la balise portant la classe border:none

abeille a écrit :
Eh oui, très important le !important. Sinon ça ne fonctionne pas.

Hello,

Attention, l'usage de !important est le premier pas vers un code complètement in-maintenable.
!important est un bazooka à réserver aux circonstances extrêmement rares et documentées. Dans tous les cas il est toujours préférable de procéder autrement, par exemple comme le propose SolidSnake.

Bonne journée

Edit...
Modifié par JENCAL (08 Mar 2016 - 13:33)

JENCAL a écrit :
Edit...

Pourquoi edit?

Parce que je parlais du "poid" des éléments CSS et de la priorité entre les ID et les CLASS, mais la vérité est bien plus subtile que ce que j'avais posté....

abeille a écrit :
Ok, mais je ne comprends pas très bien le .un-de-mes-parents
Cela correspond à quoi dans le Html?

Merci pour tes conseils.

Par exemple, à ta classe .encartmagma qui est parent de ton <a>, ou encore un parent au-dessus.

Le soucis, c'est que cette technique est susceptible de ne pas fonctionner tel quel, tout dépendra de comment tu as défini ton .floatright, car il faut que tu réussisses à le surdéfinir (Cf. poids des sélecteurs en CSS)

SolidSnake a écrit :

Beurk, beurk, beurk !
Enfin JENCAL, tu n'avais pas d'autres idée !?
Surdéfinir, oui, mais pas de la sorte...
Il faut voir le contexte, mais peut-être que juste l'ajout d'une classe dans ton sélecteur suffirait, du type :

.un-de-mes-parents .pasdebordure {
  border:none;
}

Le contexte était d'ajouter une classe .pasdebordure sur le lien. Dans ce contexte, le !important est pour une classe "utilitaire" et ça ne me choque pas.
C'est à dire que si on rajoute une classe qui s'appelle "pas de bordure", on *veut* qu'il n'y ait pas de bordure et on ne veut pas que ça puisse être écrasé par quoi que ce soit (si on ne veut plus de bordure, on enlève la classe "pas de bordure" au lieu d'écraser l'instruction CSS).
Après on peut discuter de faut-il utiliser ou non les classes "utilitaires" mais si on les utilise, !important évite les régressions

SolidSnake a écrit :

Par exemple, à ta classe .encartmagma qui est parent de ton &lt;a&gt;, ou encore un parent au-dessus.

Le soucis, c'est que cette technique est susceptible de ne pas fonctionner tel quel, tout dépendra de comment tu as défini ton .floatright, car il faut que tu réussisses à le surdéfinir (Cf. poids des sélecteurs en CSS)

Yop, on manque un peu de détail sur la manière dont est stylé par défaut ce lien.

abeille > Pourquoi une bordure est-elle liée à une classe floatright ? Il faudrait éviter de lier de la déco (bordure) à du positionnement (float: right;) de manière aussi large ; soit en restreignant cette bordure aux éléments flottants ayant un certain parent (pas .encartmagma en tout cas), soit aux éléments ayant une certaine classe qu'il va falloir ajouter (s'il y a déjà une classe .floatright, en ajouter une autre nommée d'après le style qu'on veut lui donner ou plus ou moins la fonction de l'élément à cet endroit-là - je pense au nommage à la SMACSS Module rules - que j'utilise beaucoup dans des projets de bonne taille - et utiliser cette autre classe)
Modifié par Felipe (09 Mar 2016 - 11:14)

Felipe a écrit :

Yop, on manque un peu de détail sur la manière dont est stylé par défaut ce lien.

Merci pour ton explication. J'ai un peu de mal avec les héritages et la façon dont on attribue les classes.
Voila mon Html:

<div class="floatrightpasdebordure"><a><img src="C:essais.jpg"/></a>
Curabitur eu aliquam ex, id ultricies lorem. Mauris euismod
<div class="encartmagma">
, urna id dignissim pulvinar, ex erat viverra magna<a href="http://www.amazon.fr">Les essais français. </a> L'Harmattan. Page 132.
</div></div>
, in rutrum leo nunc ac nibh. Nam pretium tincidunt turpis ac luctus. Aenean mauris nisi, dapibus ac rutrum et, vehicula sed or<br />
<div class="floatright"><a><img src="C:\image.jpg"/></a>texte</div>
<div class="encartcirage" style="text-align: justify;">
Suspendisse sollicitudin, quam ut dapibus bibendum, urna urna pharetra dolor, quis elementum erat lorem non lacus. Nulla sit amet sapien ornare, hendrerit orci nec, consequat mauris. Maecenas non sagittis massa. Maecenas hendrerit pharetra felis laoreet imperdiet. Curabitur eget pretium m<a href="http://www.amazon.fr/">Les essais anglais</a> L'Harmattan. Page 163.</div>

Et me Css:

.floatright a{
	float: right;
    border: 15px solid #F2F2F2;}

.pasdebordure{border:none;}

.encartcirage {
border:1px solid #35a04d;
padding: 1% 1% 1% 1%;
margin: 2% 4% 0 0;
color:  black;
display : block ;
}

C'est peut être pas très technique comme solution, mais ça fonctionne!
Si vous avez autre chose de mieux, je suis preneur!
Merci pour vos explications!