28173 sujets

CSS et mise en forme, CSS3

Problème de mise en forme tableau avec lien

Bonjour,

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Tableau</title>
		<meta http-equiv="content-style-type" content="text/css" />
		<style type="text/css">
		body
		{
			background-color	: #FFFFFF;
			color				: #000000;
			font-family			: Verdana, sans-serif;
			font-size			: 11px;
		}		
		#tableau
		{
			background-color	: #FFFFFF;
			color				: #000000;
		}
		#tableau a
		{
			color				: #000000;
			text-decoration		: none;
		}
		#tableau tr:hover
		{
			background-color	: #00913E;
			color				: #FFF300;
		}
		</style>
	</head>
	<body>
		<table id="tableau" cellspacing="0">
			<tr>
				<td width="150px">CONTENU1</td>
				<td width="150px">CONTENU2</td>
				<td width="150px">CONTENU3</td>
			</tr>
			<tr>
				<td width="150px"><a href="#">CONTENU1</a></td>
				<td width="150px">CONTENU2</td>
				<td width="150px">CONTENU3</td>
			</tr>
			<tr>
				<td width="150px">CONTENU1</td>
				<td width="150px"><a href="#">CONTENU2</a></td>
				<td width="150px">CONTENU3</td>
			</tr>
			<tr>
				<td width="150px">CONTENU1</td>
				<td width="150px">CONTENU2</td>
				<td width="150px"><a href="#">CONTENU3</a></td>
			</tr>
			<tr>
				<td width="150px">CONTENU1</td>
				<td width="150px">CONTENU2</td>
				<td width="150px">CONTENU3</td>
			</tr>
		</table>
	</body>
</html>


Mon petit soucis, la colorisation comme les autres colonnes de celle qui contient un lien.

Etant donné que je fixe la couleur du lien en noir "#000000" lorsque la souris est sur la colonne, celui-ci reste en noir.

Merci,
ZiP
Bonjour,

Une manière de résoudre ton problème est de déterminer que tous les éléments contenus dans tr doivent changer de couleur au survol de la souris:


#tableau tr:hover [b]*[/b]
		{
			background-color	: #00913E;
			color				: #FFF300;
		}


Au passage, l'attribut width n'existe pas pour la balise td en XHTML1.0 Strict.
Une dernière question...

Comment est-ce possible de généraliser le lien de la cellule à toute la ligne ?

Merci,
ZiP
ZiP a écrit :
Une dernière question...

Comment est-ce possible de généraliser le lien de la cellule à toute la ligne ?

En utilisant la propriété position, tu devrais parvenir à tes fins assez facilement, d'autant que ton tableau semble avoir une largeur fixe.
J'ai cherché sur Internet, je ne vois pas comment faire avec la propriété CSS "position".

Je voudrais en fait, rendre chaque ligne de ma table clicable.

Merci,
ZiP
ZiP a écrit :
J'ai cherché sur Internet, je ne vois pas comment faire avec la propriété CSS "position".

Je te conseille la lecture de l'article suivant:
Maîtriser le positionnement CSS dans toutes les situations

ZiP a écrit :
Je voudrais en fait, rendre chaque ligne de ma table clicable.

J'avais bien compris. Smiley cligne
Voici une piste, partant d'une structure simple:


[#black][b]HTML[/b][/#]

<table>
	
	<tr>
		<td><a href="#">Lien</a></td>
		<td>Contenu</td>
		<td>Contenu</td>
	</tr>
	
	<tr>
		<td>Contenu</td>
		<td><a href="#">Lien</a></td>
		<td>Contenu</td>
	</tr>
	
	<tr>
		<td>Contenu</td>
		<td>Contenu</td>
		<td><a href="#">Lien</a></td>
	</tr>
	
</table>



[#black][b]CSS[/b][/#]

table {width:450px;}
	
tr {position:relative; display:block;}
td {width:150px;}
	
tr a {position:absolute; left:0; top:0;}
tr:hover {background:yellow;}
	
tr a {width:450px;}
tr+tr a {padding-left:150px; width:300px;}
tr+tr+tr a {padding-left:300px; width:150px;}
Sujet clos
Aller à