border

Version imprimable

02/09/2005, 12h17
Anduriel

border

Salut,
J'ai un problème que je ne comprends pas: j'ai fais des liens avec border 1 px solid mais les bordures du haut et bas n'apparaissent jamais!
Pourquoi?
02/09/2005, 12h20
Perceval

Avec des plus amples précisions..... la réponse qu'on pourra t'apporter ne pourra être que plus pertinentes.....

Parce que perso... je n'ai pas la science infuse.... Donc du code ou lien ne serait pas superflu....

Bein oui mais c'est tout en fait j'ai fait au plus simple...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 a.page { color: Black; padding: 3px; font-size: 11px; border:1px solid #A4A4A4;; background-color: #EAECFF; } a.page:hover { color: Black; font-size: 11px; border:1px solid #A4A4A4; background-color: #F4F6FF; padding: 3px; }
Voila et donc juste les bordures de droites et gauches apparaissent...

:salut:

Ton code serait sans doute plus fonctionnel comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .page a{ color: Black; padding: 3px; font-size: 11px; border:1px solid #A4A4A4; background-color: #EAECFF; } .page a:hover { color: Black; font-size: 11px; border:1px solid #A4A4A4; background-color: #F4F6FF; padding: 3px; }
Surtout que le hover ne fonctionne que sur la balise <a> avec IE.
:wink:

02/09/2005, 20h40
Anduriel

Mais avec ça plus rien ne se passe du tout...

spirou, ce que tu as modifié change complètement le comportement des css. Avec ton code, il faut que la classe page soit placé sur l'élément conteneur du lien.

De cette façon :
Code:

1 2 3 <body class="page"> <a href="#">texte du lien</a> </body>
Si tu mets la classe page à la balise a, ça ne fonctionne tout simplement pas.

Le code de Anduriel était correct sur ce point là car la classe page est placé sur le lien.

Code:

<a class="page" href="#">texte du lien</a>

Code fonctionnant sur Firefox, Opera et IE :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 a.page { display: block; color: Black; padding: 3px; font-size: 1em; border: 1px solid #A4A4A4; background-color: #EAECFF; text-decoration: none; width: 100px; text-align: center; } a.page:hover { background-color: #F4F6FF; }
Dans hover, tu n'as pas besoin de répéter les propriétés de a.page. Tu ne mets que les propriétés qui changeront le style du lien au survol.

Édition : Tu peux inverse le :hover et .page

Code:

a:hover.page

Le résultat est le même. Je ne peux dire si l'une est mieux que l'autre.

02/09/2005, 21h05
Anduriel

Ah c'est bien le display fait fonctionne le cadre mais il occupe 100% de mon td. Je ne veux pas mettre de width car je veux que les se "dimensionnent" seuls. Est-ce possible?
02/09/2005, 21h16
balu

Il faudrait voir le code de ton tableau html pour mieux comprendre ce que tu veux dire.

Code:

1
2
3
4
5
6
7
8
<table align="center" border="0" width="50%" cellspacing="0" cellpadding="0">
 
	<tr>
		<td valign="middle" align="left">{.PRECEDENT.}</td>
		<td valign="middle" align="right">{.SUIVANT.}</td>
	</tr>
 
</table>

Voila mon code ou Precedent et Suivant sont remplacés par mes liens.

Code:

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
a.btngauche, a.btndroit {
	display: block;
	color: #000;
	padding: 3px;
	font-size: 0.7em;
	border: 1px solid #a4a4a4;
	background: #eaecff;
	text-decoration: none;
	text-align: center;
}
 
a:hover.btngauche, a:hover.btndroit {
	background: #f4f6ff;
}
 
.btngauche {
	float: left;
}
 
.btndroit {
	float: right;
}
 
table {
	width: 50%;
	border: 0;
}

Code:

1
2
3
4
5
6
7
8
<table align="center" cellspacing="0" cellpadding="0">
 
   <tr>
      <td valign="middle"><a class="btngauche" href="#">PRÉCÉDENT</a></td>
      <td valign="middle"><a class="btndroit" href="#">SUIVANT</a></td>
   </tr>
 
</table>

Voilà! Je crois que ça correspond bien à ce que tu veux faire. ;)