28173 sujets

CSS et mise en forme, CSS3

Pourquoi ce <a> en display block n'occupe pas TOUT le td ???

Bonjour,

Il y a apparemment une marge intérieure dans tes cellules de tableau.

Tentes donc de les forcer à zéro:

table.act td {
   padding: 0;
}

Modifié par Sebastien D. (09 Sep 2007 - 17:22)
Bonjour,

Merci de ta réponse.

Il y a bien un padding sur td.ing
mais pas de padding sur td.lnk qui nous préoccupe (sauf peut-être 1px ajouté par le navigateur).

J'ai essayé :

td.lnk {padding: 0, margin: 0}


Mais ça ne change rien.

Par ailleurs, même s'il y avait un padding, je ne vois pas pourquoi de a DISPLAY BLOCK n'occupe pas toute la cellule....
Salut
Les tables c'est pas mon truc mais en mettant un height: 30px;
à ta ligne table.act a:link, table.act a:visited il me semble que c'est bon.
Modifié par pastazere (09 Sep 2007 - 18:08)
Gatsu35 a écrit :
le display:block; ne fait occuper la cellule que sur la largeur, et non la hauteur. donc c'est normal


En rajoutant donc des marges intérieures en haut et en bas du lien tu résolveras ton problème.
Modérateur
Salut,

Un height: 100%; sur le lien en plus du display: block; résout aussi le problème.
Bonjour,

Merci de vos réponses, mais...

a écrit :

le display:block; ne fait occuper la cellule que sur la largeur, et non la hauteur. donc c'est normal


Tu crois ? À mon avis, le a s'ajuste aussi en hauteur, mais je me trompe peut-être...

a écrit :

en mettant un height: 30px;
à ta ligne table.act a:link, table.act a:visited il me semble que c'est bon.


D'accord, mais tu agrandis TROP la cellule.

Le problème est le suivant.

La première cellule est plus haute que la seconde, elle détermine donc la hauteur de la deuxième cellule.

La hauteur de la première cellule est déterminée par la hauteur de l'input.
La hauteur de l'input est fixée par le navigateur et dépend du navigateur.
Sauf usine à gaz, je n'ai pas moyen de connaître la hauteur des cellules, donc tout ajustement par un padding est impossible.

J'ai ajouté height: 100%

Mais ça ne marche pas mieux, vous pouvez voir.
J'avais déjà essayé height: 100% et height: auto avant de vous consulter, c'est effectivement la première solution qui vient à l'esprit, je ne comprends pas pourquoi ça ne veut pas marcher...

Smiley fache
Modérateur
Un petit exemple valant mieux qu'un long discours :
<!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>Exemple</title>
		<style type="text/css"><!--

@media screen, projection
{
	table {
		border-collapse: collapse;
	}
	td {
		width: 5em;
		height: 2em;
		border: 1px solid black;
	}
	a {
		display: block;
		height: 100%; /* A remplacer par line-height: 2em; si les écritures doivent être centrées verticalement */
		background-color: #5F7;
		text-align: center;
	}
}

		--></style>
	</head>
	<body>

<table summary="tableau de liens">
	<tr>
		<td><a href="#">lien 1</a></td>
		<td><a href="#">lien 2</a></td>
	</tr>
	<tr>
		<td><a href="#">lien 3</a></td>
		<td><a href="#">lien 4</a></td>
	</tr>
</table>

	</body>
</html>
Merci de ta réponse, mais on en revient toujours au même problème.

Dans mon problème, la taille des cellules n'est pas définie (donc définie par le contenu).
Mets un input submit dans les td de gauche et vérifie que tu n'as pas le même problème que moi.

height: 100%
NE MARCHE PAS

Bien sûr, tu peux toujours ajuster avec le padding ou le line-height, mais tu ne peux pas connaître la bonne valeur qui dépend de la hauteur de l'input et donc de chaque navigateur...

ohwell]
Modérateur
a écrit :
Mets un input submit dans les td de gauche et vérifie que tu n'as pas le même problème que moi.
Ce n'est pas un problème, c'est le comportement normal.
boteha a écrit :
tu peux toujours ajuster avec le padding ou le line-height
Oui donc où est le problème ? Smiley sweatdrop
a écrit :
tu ne peux pas connaître la bonne valeur qui dépend de la hauteur de l'input et donc de chaque navigateur
Raison de plus pour définir la hauteur de la cellule en fonction de la hauteur du lien et non de l'input, c'est plus simple...
Encore merci de ta réponse.

Mais mon principe, justement, est de ne pas définir (dans ce cas...) la taille de la cellule, de façon à s'adapter sans contrainte aux différentes tailles des différents inputs des différents navigateurs.

Si la taille de la cellule est connue, c'est sûr qu'il n'y a plus trop de problème !!

Il doit bien y avoir une solution avec taille de cellule inconnue Smiley confused

Ou au moins une explication à ce problème et l'impossibilité de le corriger par height: 100%
Modérateur
Non mais je ne disais pas de définir une taille de cellule mais d'agir directement sur le lien pour que ce soit lui qui contrôle cette hauteur.
Ainsi, tu n'as pas de différence de hauteur de cellule suivant le navigateur.
Merci beaucoup de ta réponse,

Mais le problème, c'est de considérer que c'est la cellule de l'input qui fixe la taille, et au lien de s'y adapter (pas le contraire)... et je ne vois pas pourquoi il n'y aurait pas une solution.
Sujet clos
Aller à