28220 sujets

CSS et mise en forme, CSS3

Placer un element dans les cellules d'un tableau

Bonjour,

voilà mon probleme :

Je crée une page contenant le planning de la semaine pour mon entreprise.
J'ai donc en entete de colonne les jours (lundi à vendredi) et en entete de ligne les employés. Et dans chaque case, l'occupation de la personne pour la journée... jusque là, tout va bien...

Pour faciliter la saisie de ce planning, je souhaite mettre un petit signe "+" (plus) dans chaque cellule. Ainsi, si vous souhaitez rajouter une réunion pour tel jour, vous n'avez qu'à cliquer sur le "+" dans la cellule souhaitée et les informations sur la personne et sur la date sont deja pré-renseignées...

J'espere que c'est clair jusque là... voila mon vrai soucis :

Je voudrais que le "+" se trouve dans chaque cellule en bas à droite (quasiment collé contre les lignes du tableau) (parce que sinon, mon tableau, il ressemble à un cimetière !)
Je veux donc :
- mon texte à l'intérieur centré dans la cellule
- mon "+" en bas à droite de la cellule

J'ai fait quelques tests en essayant de jouer sur les propriétés CSS "Position : relative | absolute" mais j'arrive pas à ce que je veux.

D'apres mes lectures, il faudrait positionner ce "+" en position Absolute mais pour cela, il faut que le conteneur soit en Relative.
Si je met mes cellules (TD) en position Relative et mon "+" en absolue :
- sous IE, mon tableau explose à cause des TD en Relative
- sous Firefox, mes "+" n'apparaissent pas.

Si quelqu'un peut m'aider là dessus... Merci
On pourait voir ce que ça donne (la version qui explose avec les plus qui disparaissent) ?
Edit : non en fait c'est bon, j'ai vu en faisant un test.

Edit bis : il semblerait que les cellules de tableau ne peuvent pas être positionnées en relatif (ce qui ne m'étonne pas trop...). Au passage, les « plus » ne disparaissent pas avec Firefox, mais ils vont tous se placer dans le coin en bas à droite de leur plus proche ancêtre positionné.

Mais si on ne peut pas positionner les cellules, on peut toujours positionner un conteneur placé dans les cellules.

Voila un petit exemple :
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Nouvelle page</title>
	<meta name="description" content="" />
	<link rel="stylesheet" type="text/css" media="screen" href="" />
	<style type="text/css">
	table {
		border-collapse: collapse;
		border: solid 1px red;
	}
	td {
		width: 150px;
		height: 120px;
		border: solid 1px red;
	}
	td div {
		height: 100%;
		position: relative;
	}
	td div span {
		display: block;
		width: 30px;
		height: 30px;
		background: blue;
		position: absolute;
		bottom: 0; right: 0;
	}
	</style>
</head>

<body>
<table>
<tr>
<td><div><span>&nbsp;</span></div></td>
<td><div><span>&nbsp;</span></div></td>
<td><div><span>&nbsp;</span></div></td>
<td><div><span>&nbsp;</span></div></td>
</tr>
<tr>
<td><div><span>&nbsp;</span></div></td>
<td><div><span>&nbsp;</span></div></td>
<td><div><span>&nbsp;</span></div></td>
<td><div><span>&nbsp;</span></div></td>
</tr>
<tr>
<td><div><span>&nbsp;</span></div></td>
<td><div><span>&nbsp;</span></div></td>
<td><div><span>&nbsp;</span></div></td>
<td><div><span>&nbsp;</span></div></td>
</tr>
</table>
</body>
</html>

Modifié par Florent V. (02 Feb 2007 - 18:58)
Merci pour ta réponse.

En effet, en mettant un div (on donc TD > DIV > A), ca marche nickel !

Merci beaucoup.
Sujet clos
Aller à