Placer un élément en haut a gauche de chaques colonnes

16 oct. 2006, 11:21

Bonjour,

J'ai un tableau de 9 colonnes, et dans le but de pouvoir masquer certaines colonnes, j'aimerai placer une petite image (comme une petite croix par exmple) en haut a gauche de chacune de mes colonnes a l'aide de CSS.

Je me disais que ca serait pas trop compliqué, mais apparement je suis rouillé; je n'y arrive pas

Pour le moment mon html ressemble a ca :

Code : Tout sélectionner

<table border=1><caption>Budget 2006 :</caption>
			<colgroup>
			<col width='60px'>
			<col width='70px'>
			<col width='1*'>
			<col width='70px'>

			</colgroup>
				<tr>
					<th><a href=#?cache=1 ><img src='style/images/croix.gif' alt='cacher cette colonne'></a><a href='?tri=1'>Nature</a></th>
					<th><a href=#?cache=1 ><img src='style/images/croix.gif' alt='cacher cette colonne'></a><a href='?tri=2'>Fonction</a></th>
					<th><a href=#?cache=2 ><img src='style/images/croix.gif' alt='cacher cette colonne'></a>Libell&eacute;</th>
					<th><a href=#?cache=4 ><img src='style/images/croix.gif' alt='cacher cette colonne'></a>Budget Primitif</th>
					<th><a href=#?cache=8 ><img src='style/images/croix.gif' alt='cacher cettete colonne'></a>Report </th>
					<th><a href=#?cache=16 ><img src='style/images/croix.gif' alt='cacher cette colonne'></a>Transfert Totaux</th>
					<th><a href=#?cache=32 ><img src='style/images/croix.gif' alt='cacher cette colonne'></a>Allou&eacute; Total</th>
					<th><a href=#?cache=64 ><img src='style/images/croix.gif' alt='cacher cette colonne'></a>Engag&eacute;</th>
					<th><a href=#?cache=128 ><img src='style/images/croix.gif' alt='cacher cette colonne'></a>Factur&eacute;</th>
					<th><a href=#?cache=256 ><img src='style/images/croix.gif' alt='cacher cette colonne'></a>Disponible</th>
</th>
</table>

et mon css :

Code : Tout sélectionner

th img {
	position : inline;
	/*display : block;
	float : left;
	margin-top : -5px;*/
}

J'ai essayé plusieurs solutions avec du float, du relative ... mais je n'ai pas trouvé l'astuce. L'image se place toujours relativement au texte alors que j'aimerais qu'il se place par rapport a la balise th. Pour avoir mon image donc en haut a gauche de chaque colonnes.

Une idée pour me secourir ?
d'avance merci.

16 oct. 2006, 12:18

Tu pourrais mettre en ligne, qu'on voit le reste de la CSS et qu'on puisse trifouiller?

16 oct. 2006, 13:43

Je ne peux pas mettre en ligne malheuresement, vu qu'en fait je developpe (en local) une appli pour le suivi du budget du service dans lequel je travaille.

En plus je n'ai pas d'espace web où le mettre pour que ce soit accessible

Mais dans le principe, un tableau, une image en haut a gauche de chaque colonne dudit tableau.
Je pensais qu'avec ce que j'avais mis, ca suffirait.

Je continue de chercher.

16 oct. 2006, 14:03

Dommage

En tout cas, sauf erreur, la propriété position n'admets pas la valeur inline.

16 oct. 2006, 14:19

Normalement ce code devrait fonctionner

Code : Tout sélectionner

th img { 
   float : left; 
}

Tu n'as rien d'autre qui pourrait interfèrer ?

Quant au "inline" il est effectivement destiné à l'attribut display (none pour le faire disparaitre, block ou inline pour le rendre visible)

16 oct. 2006, 14:22

Haha ..
je suis rouillé de chez rouillé !
En effet, le inline ne conivent que pour le 'display', qui est sa valeur par defaut.

En tous cas, maintenant, j'arrive a cacher mes colonnes quand je clique sur l'image. Il ne me reste plus qu'a faire en sorte que l'image soit a la bonne place.

16 oct. 2006, 14:48

Normalement ce code devrait fonctionner
Code : Tout sélectionner
th img { float : left; }
Tu n'as rien d'autre qui pourrait interfèrer ?

Suis pas sûr: l'image est dans une balise <a>, de type inline, et un flottant sur un type en-ligne :s

16 oct. 2006, 14:54

Petite mise a jour,

J'arrive a avoir une image non cliquable la ou je veux avec ce bout de CSS :

Code : Tout sélectionner

th{
	background-image : url("images/croix.gif");
	background-repeat: no-repeat;
}

Mais il me faut pouvoir le rendre cliquable.

Donc voila ou j'en suis :
- soit j'ai l'image au bon endroit, mais je peux pas faire de lien
- soit j'ai l'image un peu n'importe ou, mais mon lien fonctionne

je suis dans de beaux draps

16 oct. 2006, 15:08

J'ai fait un petit test rapide, et à priori ce code fonctionne bien :

Code : Tout sélectionner

<style>
th img {
	float:left;
}
</style>
<table width="50%" border>
	<tr>
		<th>	
			<a href="#"><img src="square.gif" width="16" border="0"></a>
			blabla
		</th>
	</tr>
</table>

Mon image est alignée à gauche, avec un lien et le texte centré et gras (th). Donc à mon avis tu as bien autre chose qui interfère....

16 oct. 2006, 15:13

Disons qu'un de mes problemes c'est que mes titres de colonnes ne sont pas tous sur une ligne. Pour reprendre l'exemple :

Code : Tout sélectionner

<style>
th img {
   float:left;
}
</style>
<table width="50%" border>
   <tr>
      <th>   
         <a href="#"><img src="square.gif" width="16" border="0"></a>
         blabla
      </th>
      <th>   
         <a href="#"><img src="square.gif" width="16" border="0"></a>
         blibli<br>reblibli
      </th>
   </tr>
</table>

Et l'image ne se trouve du coup plus au bon endroit dans la premiere cellule

16 oct. 2006, 16:21

Je crois qu'on en revient à mon intuition, tu peux essayer de mettre ça?

Code : Tout sélectionner

tr
{
 display: block;
}

16 oct. 2006, 16:27

houla ;

Avec ca on se rapproche un peu effectivement, l'image est bien au meme niveau dans chaque cellules de titre de colonne, reste plus qu'a bien le positionner ... MAIS (et oui il y en a un gros) plus aucune cellule de mon tableau n'est aligné

ce qui ne m'arrange pas trop.

16 oct. 2006, 16:29

Moi j'aurais ajouté ceci plutôt

Code : Tout sélectionner

th {
   vertical-align:top;
}

16 oct. 2006, 16:36

j'ai envie de dire bravo

Je suppose qu'il n'est pas envisageable de replacer le texte un peu plus au milieu de la cellule maintenant que l'image est placé ?

En tous cas merci beaucoup

Placer un élément en haut a gauche de chaques colonnes

Qui est en ligne