border

**Anduriel** · 02/09/2005, 12h17

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?

**Perceval** · 02/09/2005, 12h20

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....

**Anduriel** · 02/09/2005, 18h31

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

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
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...

**spirou** · 02/09/2005, 18h56

Ton code serait sans doute plus fonctionnel comme ceci :

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
 
.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.

**Anduriel** · 02/09/2005, 20h40

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

**balu** · 02/09/2005, 20h45

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 :

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

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 :

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

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

Code fonctionnant sur Firefox, Opera et IE :

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
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 :

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

a:hover.page

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

**Anduriel** · 02/09/2005, 21h05

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?

**balu** · 02/09/2005, 21h16

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

**Anduriel** · 02/09/2005, 21h43

Code :

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

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.

**balu** · 02/09/2005, 22h51

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
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 :

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

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.

border

HTML

Vue hybride

Discussions similaires

Partager

Partager