Discussion :

[fytheone]

Bonjour à tous,

J'aimerais entourer mes liens d'un cadre lorsque la souris le pointe. Grâce à une classe CSS, ça marche très bien mais je ne parviens pas à ce que ce cadre prenne toute la place de la colonne (j'utilise des DIV pour organiser graphiquement ma page.

Voici ce que je fais:

Code :

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

1
2
3
4
5
6
7
8
.highlightit{
    border: 1px solid #EFF0E6;
}
 
.highlightit:hover{
    color: #2907AF;
	background-color: #E1E1E1;
	border: 1px solid #919191;

Ce qui est bizarre, c 'est que s'il s'agit d'un titre (h2 par exemple) et que l'on y met un cadre, il prend bien toute la place.

Merci de votre aide.

Fy

[SpaceFrog]

Code :

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

width:100%

[fytheone]

Merci bien, mais ça ne marche que sur IE. Mozilla et Opéra n'en ont rien à caller! Je ne crois pas être assez stupide pour ne pas avoir essayer.

[Johnbob]

Code :

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

1
2
3
4
5
6
7
8
9
[CSS]
h2.maClasse {
font-size:10px;
border:solid 1px #FFFFFF;
margin:2px;
}
 
[HTML]
<h2 class="maClasse" onmouseover="this.style.borderColor='#000000';" onmouseout="this.style.borderColor='#FFFFFF';">Bla bla</h2>

Le principe c'est d'afficher tout le temps le cadre et simplement de changer sa couleur. Si le fond est blanc, tu met le cadre en blanc et il ne se voit pas (le code ci-dessus switche entre blanc et noir).

On peut faire autrement bien sur: largeur de la bordure, présence de la bordure...

Pour la largeur du cadre, les h1, h2, p... sont en block par défaut donc le cadre s'affiche autour en prenant tout le div (moins la marge du h2).

[Johnbob]

A la demande de fytheone par MP:

On peut agir sur plein de propriétés CSS grace à l'objet javascript style:

Pour la largeur de bordure: this.style.borderWidth

Concernant les liens, mieux vaut utiliser la pseudo-classe ":hover" qui marche sur tous les navigateurs. Mais le comportement est différent puisque "a" est un objet html "inline" alors que "p" et "h2" sont des "block" (pour changer ça en CSS: a { display:block; } )

[fytheone]

Merci pour le

Code :

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

 display: block;

Ca marche (enfin, opéra a du mal, mais bon, c pas trop grave). Par contre, il fait des espaces de "saïen" entre les lignes, mais je vais arranger ça sans problème, de la rigolade!

Encore merci et "Akimashite Omedeto" ("bonne année" au pays du soleil levant, où je me trouve pour le moment)!

KAMPAI!

[Johnbob]

Nickel

Tu peux indiquer que ton problème est solutionné en cliquant sur le bouton "résolu" en bas à gauche.

@+ !