28172 sujets

CSS et mise en forme, CSS3

Centrer une image en haut à gauche dans une cellule d'un tableau

Bonjour,

J'ai un souci que je n'arrive pas à proprement résoudre.
Si quelqu'un a une idée, elle est la bienvenue.

J'ai une ligne dans mon tableau ou j'ai du texte centré et j'aimerai rajouté un bouton close en haut à droite de la cellule mais je n'y arrive pas.
De base j'ai ça , que dois je rajouter pour obtenir le résultat attendu?
J'ai essayé des float: right , des display:inline-block, de faire plusieurs cellules mais rien de très concluant.


<tr>
	<th class='titretable' colspan = 3 ' >Titre location
	<a  style = 'cursor: pointer;' ><img  src="/html/image/close.png" alt ="Close"/></a>
	</th>
</tr>





th 
{		
	    white-space: nowrap;
		background:white;
		text-align: center;

}

th.titretable
{
		border : solid 1px gray;
		background:black;
		color:white;
}


Voila si quelqu'un a une idée.

Merci
Bonjour,
Essaie ceci :

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Positionner image</title>
    <style type="text/css">
/*<![CDATA[*/
	table {border: 1px solid gray}
                th {
                        background: white;
                        text-align: center;
                }
                th.titretable {
                        background: black;
                        color: white;
	           position: relative;
	           height: 50px;
                }               
	    a.close {
		position: absolute;
		right: 0; /* tu peux changer la valeur*/
		top: 0; /* tu peux changer la valeur*/

	   }
    /*]]>*/
    </style>
  </head>
  <body>
    <table width="300">
      <tr>
        <th class='titretable' colspan="3">
          Titre location<a class='close'><img src="/html/image/close.png" alt="Close" /></a>
        </th>
      </tr>
      <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
      <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
      <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
    </table>
  </body>
</html>

Modifié par lddsoft (30 May 2011 - 15:08)
Non cela fonctionne,
le button close se retrouve tout en haut a droit du navigateur.
Cela semble normal vu que tu le met en absolute et que du coup il se positionne en fonction du body, non?
J'ai essayé de le mettre en relatif par rapport à la cellule mais cela ne fonctionne pas non plus.
Merci pour ton idée.
Je t'assure que le code que je t'ai proposé ci-dessus fonctionne et place l'image 'close' dans le coin supérieur droit du th.titretable.
Fais un copier/coller de mon code et essaie!

Il y a une erreur dans TON code ici : < th class='titretable' colspan = 3 ' >

Petit rappel :
http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html#position-absolue a écrit :
Rappelons un point important concernant ce mode de positionnement : un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre.

Modifié par lddsoft (30 May 2011 - 15:59)
J'utilise firefox comme navigateur.
J'ai essayé un float:right; margin-top:-20px; qui fonctionne sous Firefox mais pas sous IE .
OK, ça fonctionne sous IE, et sous FF cela place l'image tout en haut et à droite de la fenêtre comme tu le disais.
Je cherche!
Cette fois, on y est!
Faudra adapter la source de l'image.

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Positionner image</title>
    <style type="text/css">
/*<![CDATA[*/
table {
width: 300px;
border: 1px solid black;
}
.tit {
	background: black;
	height:40px;
}
#titre {
	position: relative;
	background: black;
	text-align: center;
	color: white;
	font: bold 18px arial;
	padding: 15px;
}            
#close {
	position: absolute;
	right: 0; /* tu peux changer la valeur*/
	top: 0; /* tu peux changer la valeur*/
}
#close a:link {color:aqua;text-decoration:none;}
img {border:none}
/*]]>*/
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th class="tit" colspan="3">
			<div id="titre">Titre location
			  <div id="close">
				  <a href="#">
					  <img src="close.png" alt="close" />
				  </a>
			  </div>
			</div>
        </th>
      </tr>
      <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
      <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
      <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
    </table>
  </body>
</html>
Cool merci d'y avoir passé du temps.
J'ai trouvé une autre finte.
En mettant dans ce style à la balise link et en positionnant le text juste après.
<a style = 'cursor: pointer; float:right;width:20px;height:20px;'>
Titre tableau
Sujet clos
Aller à