Discussion :

[Gizmil]

Hello !

Voilà, j'essaye simplement de placer un border sur des balises <a></a> contenant une <img> mais le résultat n'y est pas ! J'écris mon css de manière à ce que seul le bord droit de mes balises <a> apparaissent. Le truc, c'est qu'au lieu de ça, j'ai des bords sur chaque côté et ils sont mauves ! Je sais que les balises <a> prennent un border mauve par défaut mais comment le modifier ? On dirait que c'est impossible ?

Du coup, j'essaye de mettre un border plutôt sur l'image contenue dans mes balises <a> mais ça ne marche pas vraiment mieux.

Mon script actuel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<div class="en-tete" id="en-tete_travaux"></div>
<div id="bloc_icones">
	<a href="body.php?a=8&contenu=works_s2_03&work=work_01" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_allee.gif" alt="Allée" /></a>
	<a href="body.php?a=8&contenu=works_s2_03&work=work_02" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_aplats.gif" alt="Aplats" /></a>
	<a href="body.php?a=8&contenu=works_s2_03&work=work_03" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_arriere.gif" alt="Arrière" /></a>
	<a href="body.php?a=8&contenu=works_s2_03&work=work_04" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_avantg.gif" alt="Avant" /></a>
	<a href="body.php?a=8&contenu=works_s2_03&work=work_05" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_bords.gif" alt="Bords" /></a>
	<a href="body.php?a=8&contenu=works_s2_03&work=work_06" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_confusion.gif" alt="Confusion" /></a>
	<a href="body.php?a=8&contenu=works_s2_03&work=work_07" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_division.gif" alt="Division" /></a>
	<a href="body.php?a=8&contenu=works_s2_03&work=work_08" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_filant.gif" alt="Filant" /></a>
</div>
<div id="bloc_images">
	<img src="
	<?php
		switch ($_GET["work"]) {
			case "work_01" : echo("works_pages/images/section_02/foret/grands_formats/allee.jpg");break;
			case "work_02" : echo("works_pages/images/section_02/foret/grands_formats/aplats.jpg");break;
			case "work_03" : echo("works_pages/images/section_02/foret/grands_formats/arriere.jpg");break;
			case "work_04" : echo("works_pages/images/section_02/foret/grands_formats/avantg.jpg");break;
			case "work_05" : echo("works_pages/images/section_02/foret/grands_formats/bords.jpg");break;
			case "work_06" : echo("works_pages/images/section_02/foret/grands_formats/confusion.jpg");break;
			case "work_07" : echo("works_pages/images/section_02/foret/grands_formats/division.jpg");break;
			case "work_08" : echo("works_pages/images/section_02/foret/grands_formats/filant.jpg");break;
		}
	?>
	" alt="" />
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
#bloc_icones {
	margin:10px 10px 0 0;
}
#bloc_icones a {
	float:left;
	display:block;
	height:40px;
	width:40px;
	border:0;
}
#bloc_icones img {
	border-style:solid;
	border-color:#f1ede4;
	border-left:0;
	border-right:3px;
	border-top:0;
	border-bottom:0;
}
#bloc_images {
	clear:both;
	height:430px;
	margin-top:34px;
}

Et la page concernée (donc, là, les bords des icônes ne sont pas en mauve) :

http://www.lne-art.be/body.php?a=8&c...3&work=work_07

Merci d'avance pour votre aide !!

[Macmillenium]

Bonjour,

Je sais que les balises <a> prennent un border mauve par défaut mais comment le modifier ? On dirait que c'est impossible ?

Le border mauve de 2px environ, s'applique par défaut sur les images contenues dans l'élément A.

Il suffit de surclasser le style par défaut :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
a img { border:0 }

[Gizmil]

Il suffit de surclasser le style par défaut :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
a img { border:0 }

Merci pour cette réponse mais je ne comprend pas bien...

Là, tu appliques un border:0 à <img> ! Ca ne va pas éliminer le border sur <a>, ça, si ?

EDIT : Ah, ok! C'est l'élément dans <a> qui prend le border, en fait ? Ca voudrait dire qu'il n'est pas possible d'appliquer un border à <a>, même s'il est en display:block ?

[Macmillenium]

EDIT : Ah, ok! C'est l'élément dans <a> qui prend le border, en fait ?

Le border mauve de 2px environ, s'applique par défaut sur les images contenues dans l'élément A.

Ca voudrait dire qu'il n'est pas possible d'appliquer un border à <a>, même s'il est en display:block ?

Il faudrait déjà enlever les bordures par défaut sur les images (cf mon code) et appliquer ensuite le border sur A.
Donc il n y a aucun problème :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#bloc_icones img {
	border-color:#f1ede4;
	border-width:0 3px 0 0;
	border-style:solid
}

ou

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#bloc_icones img {
	border:0;
	border-right:3px solid #f1ede4;
}