Discussion :

[kingmandrax]

Bonjour à la communauté!

J'ai un petit souci avec un tableau HTML et une petite feuille de style CSS à côté qui ne fait pas grand chose si ce n'est spécifier une classe et ce qu'il faut faire quand la souris se trouve sur un composant de cette classe. En l'occurence un hover.

Voici tout d'abord un extrait de mon tableau HTML :

Code :

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

1
2
3
4
5
6
7
8
9
 
<table cellspacing="5" align="center">
	<tr>
		<td><img id="label" class="icons" src="images/label.jpg" border="0"/></td>
		<td>Label</td>
	</tr>
...
...
</table>

La classe "icons" est celle qui est reprise dans ma feuille de style CSS que voici :

Code :

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

1
2
3
4
5
 
.icons:hover {
	cursor: pointer;
	border: solid red 2px;
}

Vraiment très basique! Le tout marche très bien mais le seul problème est que lorsqu'une image contenue dans le tableau est entourée du cadre rouge, tout le tableau bouge...ceci est dû certainement parce que le bord rouge qui est rajouté prend plus de place dans la cellule et du coup tout le tableau doit être ajusté! Quand j'enlève la souris d'une image, le tableau se remet à sa position initiale.

En fait il s'agit d'un problème esthétique si on veut mais c'est pas très beau de voir ce tableau "danser" de la sorte! Y a-t-il un moyen en HTML pour que le tableau ne soit pas à chaque fois redimensionné?? J'ai également essayé de mettre l'attribut class="icons" au niveau du td mais ça fait le même phénomène!

Merci bcp d'avance.

[kodokan]

Salut

Il existe une astuce : tu met une bordure sur la tableau de 2px et de la meme couleur que le fond de ton tableau :

Code HTML :

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

1
2
3
4
5
6
7
8
<table cellspacing="5" align="center" style="border: 2px solid #000 ; ">
	<tr>
		<td><img id="label" class="icons" src="images/label.jpg" /></td>
		<td>Label</td>
	</tr>
...
...
</table>

Le tableau ne devrait pas bouger

[kingmandrax]

Ca ne change rien, le problème est en fait les cellules et non pas le tableau! Les cellules font que le tableau prend plus de place!

Pour l'instant j'ai rajouté des prorpiétés width et height dans chaque td qui contient une image de sorte à ce que ça ne bouge plus...mais je trouve ça assez moche! Vous en pensez quoi??

[MasterOfChakhaL]

Salut,

cette petite bidouille te permettra normalement de contourner le problème...

Code css :

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

1
2
3
4
5
6
7
.icons:hover {
	cursor: pointer;
	border: solid red 2px;
 
	/* bidouille*/
	margin: -2px
}

Le but étant de compenser par les marges l'augmentation de la taille due à la bordure que tu ajoutes...

[kingmandrax]

Effectivement ça fonctionne pas trop mal mais il reste encore quelques petits problèmes. Quand je clique sur une image, j'ai un script qui maintient le bord autour de l'image et si je repositionne mon curseur sur elle (une image déjà entourée donc), le tableau bouge à nouveau...argh, pas facile d'être à 100% satisfait!

[MasterOfChakhaL]

pourquoi ne pas simplement créer une classe que tu nommerais par exemple

"persistantHover" qui contiendrait la définition des bordures et du margin.

C'est ton script qui s'occupera d'attribuer cette classe a ton élément

[kingmandrax]

Je ne suis pas sûr de bien comprendre le principe...c'est-à-dire lorsque l'image est cliquée, lui assigner cette classe? Ca ne changera rien au problème non?

[MasterOfChakhaL]

En gros, je ne sais pas de quelle manière tu maintiens la bordure avec ton script, mais il faudrait maintenir le margin de la même manière...

Ma proposition prenait en compte l'idée que je me faisais d'un script qui maintient une bordure à la sortie d'un hover...

[kingmandrax]

Mais bien sûr! J'avais effectivement oublié de tenir compte de l'attribut "margin" dans mon script! C'est tout bon à présent...merci bcp pour ton aide!!!