Image dans en fond de cellule de tableau
Fermé
Mr.White
Messages postés
251
Date d'inscription
jeudi 24 avril 2003
Statut
Membre
Dernière intervention
17 juillet 2012
-
4 juil. 2003 à 16:31
BICHACOU - 20 juil. 2011 à 13:31
BICHACOU - 20 juil. 2011 à 13:31
A voir également:
- Image dans en fond de cellule de tableau
- Tableau croisé dynamique - Guide
- Tableau ascii - Guide
- Aller à la ligne dans une cellule excel - Guide
- Image iso - Guide
- Tableau word - Guide
10 réponses
<td width="142" background="images/pict_2.jpg">Mon-TEXTE<td>
C'est à dire qu'après la définition des tailles de la cellule ("td") - ou du tableau d'ailleurs - la commande "background, etc."permettra d'afficher l'image en question en fond. Les guillemets ne fond rien à l'affaire. a priori, on peut d'ailleurs les supprimer partout.
exemple :
<table width="1000" height="857" align="center" background="images/degrade_02.jpg" ><tr><td><div align="center">JE SUIS LE MEILLEUR</div></td>
soit un tableau, centré, de 1000 x 857 pixels (table width="1000" height="857" align="center"), en fond duquel apparaîtra l'image "degrade_02.jpg". Sur cette image, j'ai inscrit le texte "JE SUIS LE MEILLEUR" qui sera centré ("div align"), mais ce pourrait être parfaitement une autre image.
Par contre, je n'ai pas trouvé l'astuce "no-repeat", le mieux me semble être d'accorder la taille de l'image de fond à la cellule ou au tableau.
Cordialement
C'est à dire qu'après la définition des tailles de la cellule ("td") - ou du tableau d'ailleurs - la commande "background, etc."permettra d'afficher l'image en question en fond. Les guillemets ne fond rien à l'affaire. a priori, on peut d'ailleurs les supprimer partout.
exemple :
<table width="1000" height="857" align="center" background="images/degrade_02.jpg" ><tr><td><div align="center">JE SUIS LE MEILLEUR</div></td>
soit un tableau, centré, de 1000 x 857 pixels (table width="1000" height="857" align="center"), en fond duquel apparaîtra l'image "degrade_02.jpg". Sur cette image, j'ai inscrit le texte "JE SUIS LE MEILLEUR" qui sera centré ("div align"), mais ce pourrait être parfaitement une autre image.
Par contre, je n'ai pas trouvé l'astuce "no-repeat", le mieux me semble être d'accorder la taille de l'image de fond à la cellule ou au tableau.
Cordialement
Marden
Messages postés
1072
Date d'inscription
dimanche 11 février 2001
Statut
Membre
Dernière intervention
29 janvier 2006
208
4 juil. 2003 à 17:40
4 juil. 2003 à 17:40
Salut Mr,
Je te confirme que la solution avec le Style suggéré fonctionne. L'image de fond est bien cadrée en haut à gauche de chaque cellule, complétée à droite par la couleur de fond si l'image est plus petite. En l'absence de "no-repeat", l'image est répétée. Etonnant non ?
Mon test est réalisé en JS/IE pour générer le Html, donc réalisable en Php, sauf erreur de ma part.
Je te confirme que la solution avec le Style suggéré fonctionne. L'image de fond est bien cadrée en haut à gauche de chaque cellule, complétée à droite par la couleur de fond si l'image est plus petite. En l'absence de "no-repeat", l'image est répétée. Etonnant non ?
Mon test est réalisé en JS/IE pour générer le Html, donc réalisable en Php, sauf erreur de ma part.
Le code est effectivement bon. Fais voir un peu comment tu appelles la class, ça vient sûrement de là.
Mr.White
Messages postés
251
Date d'inscription
jeudi 24 avril 2003
Statut
Membre
Dernière intervention
17 juillet 2012
53
7 juil. 2003 à 11:17
7 juil. 2003 à 11:17
Voici le code :
<table border=0 align="center"><tr>
<td class="process" width=100 height=50 align="center">
<a class="white" href="process/listeProcessus.php?num_dt=1&num_typ=1&num_process=1&nom_process=Avant vente" target="processus"><B>Avant vente
</B></a>
</td>
Et voici la feuille de style :
TD.process { background-image:url("image/process/avantVente.gif"); background-repeat:no-repeat; }
J'espère vraiment que vous trouverez l'erreur et je vous remerci de vous pencher sur mon problème.
<table border=0 align="center"><tr>
<td class="process" width=100 height=50 align="center">
<a class="white" href="process/listeProcessus.php?num_dt=1&num_typ=1&num_process=1&nom_process=Avant vente" target="processus"><B>Avant vente
</B></a>
</td>
Et voici la feuille de style :
TD.process { background-image:url("image/process/avantVente.gif"); background-repeat:no-repeat; }
J'espère vraiment que vous trouverez l'erreur et je vous remerci de vous pencher sur mon problème.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bmgg4
Messages postés
179
Date d'inscription
lundi 15 juillet 2002
Statut
Membre
Dernière intervention
29 juin 2006
23
7 juil. 2003 à 12:30
7 juil. 2003 à 12:30
Bonjour,
Essaie sans les guillemets dans l'URL de l'image
J'édite mes feuilles de style avec TopStyle Lite, et il ne met pas ces guillemets.
Monique
Elle est pas belle la vie ?
Essaie sans les guillemets dans l'URL de l'image
TD.process { background-image:url(image/process/avantVente.gif); background-repeat:no-repeat; }
J'édite mes feuilles de style avec TopStyle Lite, et il ne met pas ces guillemets.
Monique
Elle est pas belle la vie ?
Mr.White
Messages postés
251
Date d'inscription
jeudi 24 avril 2003
Statut
Membre
Dernière intervention
17 juillet 2012
53
7 juil. 2003 à 13:04
7 juil. 2003 à 13:04
Ca ne fonctionne toujours pas ! :o(
bmgg4
Messages postés
179
Date d'inscription
lundi 15 juillet 2002
Statut
Membre
Dernière intervention
29 juin 2006
23
7 juil. 2003 à 13:12
7 juil. 2003 à 13:12
Qu'est-ce qui ne fonctionne pas ?
Je veux dire, qu'obtiens-tu exactement comme résultat ?
Monique
Elle est pas belle la vie ?
Je veux dire, qu'obtiens-tu exactement comme résultat ?
Monique
Elle est pas belle la vie ?
PhP
Messages postés
1767
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
7 juil. 2003 à 13:30
7 juil. 2003 à 13:30
Bjr White,
Poste le code complet de toute ta page (feuille CCS y compris) : peut être références-tu mal ta feuille de style ou ta balise <STYLE>
Ha oui : tu utilises quel navigateur ? sur quel OS ?
@+
PhP [Push the button,Don't push the
. button,Trip the station,Change the channel]
Poste le code complet de toute ta page (feuille CCS y compris) : peut être références-tu mal ta feuille de style ou ta balise <STYLE>
Ha oui : tu utilises quel navigateur ? sur quel OS ?
@+
PhP [Push the button,Don't push the
. button,Trip the station,Change the channel]
Mr.White
Messages postés
251
Date d'inscription
jeudi 24 avril 2003
Statut
Membre
Dernière intervention
17 juillet 2012
53
8 juil. 2003 à 10:59
8 juil. 2003 à 10:59
Ca y est j'ai trouvé l'erreur à la con. Mon url était fausse car le fichier dans lequel ce code s'exécute n'est pas dans le dossier 'principale' (où j'ai l'abitude d'écrire) et donc par habitude j'ai écri mon url en chemin relatif à cette position (ce qui était faut).
Mon url resemble maintenant à ca : ../image/process/avantVente.gif.
Le problème maintenant c'est que je ne vois que la moitié de l'image. Je pense qu'il faut que je fixe la taille de ma cellule, non?
Mon url resemble maintenant à ca : ../image/process/avantVente.gif.
Le problème maintenant c'est que je ne vois que la moitié de l'image. Je pense qu'il faut que je fixe la taille de ma cellule, non?
Mr.White
Messages postés
251
Date d'inscription
jeudi 24 avril 2003
Statut
Membre
Dernière intervention
17 juillet 2012
53
8 juil. 2003 à 15:20
8 juil. 2003 à 15:20
C'est bon. J'ai fixé la taille de ma cellule et l'image apparait entièrement.
Merci à ceux qui m'ont aidé !
Merci à ceux qui m'ont aidé !
Mr.White
Messages postés
251
Date d'inscription
jeudi 24 avril 2003
Statut
Membre
Dernière intervention
17 juillet 2012
53
7 juil. 2003 à 13:55
7 juil. 2003 à 13:55
Alors, ce qui se passe c'est que les nom que je veu afficher sur l'image son là (ce qui est normale) mais tout se passe comme s'il n'y avait aucune image, c'est à dire que le tableau html est construit les nom sont au bonne place mais il n'y à pas d'image.
Le code source risque d'être fort long mais si vous insisté le voici :
Le feuille css (norme.css):
body { background-color:white; }
body.menu { background-color:dodgerblue; text-color:white; }
h3.menu { background-color:blue; font-size:20px; font-family:Verdana, sans serif; font-weidht:bold; color:white; }
h3.ssmenu { background-color:dodgerblue; font-size:17px; font-family:Verdana, sans serif; font-weidht:bold; color:white; }
h2.menu { background-color:blue; font-size:26px; font-family:Verdana, sans serif; font-weidht:bold; color:white; }
h6 { font-size:10px; font-family:Verdana, sans serif; }
h6.processus { font-size:12px; font-family:Verdana, sans serif; color:black; }
b.rouge { font-size:16px; font-family:Verdana, sans serif; font-weidht:bold; color:red; }
A { font-size:14px; font-family:Verdana, sans serif; font-weidht:bold; color:blue; }
A.white { font-size:14px; font-family:Verdana, sans serif; font-weidht:bold; color:white; }
A.red { font-size:14px; font-family:Verdana, sans serif; font-weight:bold; color:red; }
A.green { font-size:14px; font-family:Verdana, sans serif; font-weight:bold; color:green; }
a.menu { font-size:14px; font-family:Verdana, sans serif; font-weight:bold; color:white; }
A:active { color:blue; }
A:hover { font-size:14px; font-family:Verdana, sans serif; font-weight:bold; color:black; }
table.tableau { background-color:#124D95; }
TH.tete { background-color:blue; font-size:14px; font-family:Verdana, sans serif; color:white; }
TR.menu { background-color:dodgerblue; font-size:18px; font-family:Verdana, sans serif; color:white; }
TD { font-size:18px; background-color:white; }
TD.process { background-image:url(image/process/avantVente.gif); background-repeat:no-repeat; }
TD.blue { border-style:solid; border-width:2; border-color:#000000; background-color:blue; color:white;}
TD.ref { border-style:solid; border-width:2; border-color:#000000; }
TD.petit { font-size:16px; }
TD.lien { background-color:dodgerblue; color:white;}
div.liste { color:white; text-align:left; }
font.menu { font-size:20px; font-family:Verdana, sans serif; font-weight:bold; }
ol { list-style-position:inside; text-align=left; margin-left:2px;}
.lh { font-weight:bold; text-decoration:underline; }
.cadre { border-style:solid; border-width:2; border-color:#000000; }
.menu { border-style:solid; border-color:#124D95; border-width:2; background-color:#126DCE; color:white; font-size:14px; }
La page html (DT.php) :
<html>
<head>
<title>Aceuille</title>
<LINK rel="stylesheet" type="text/css" href="css/norme.css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
</head>
<body >
<?
$num_projet=$_GET['num_projet'];
$nom_projet=$_GET['nom_projet'];
$num_dt=$_GET['num_dt'];
$nom_dt=$_GET['nom_dt'];
?>
<table border=1 frame=void rules=none cellspacing=10>
<tr>
<td class=blue rowspan=2 valign="bottom"><h2 >Zone des PROCESS : </h2></td>
<td class=lien>Projet numero </td>
<td class=lien>Nom du projet </td>
<td class=lien>Numéro de la DT </td>
<td class=lien>Nom de la DT </td>
</tr>
<?
echo "
<tr>
<td align=\"center\">".$num_projet."</td>
<td align=\"center\">".$nom_projet."</td>
<td align=\"center\">".$num_dt."</td>
<td align=\"center\">".$nom_dt."</td>
</tr>
</table>
";
include('Include/affiche_image_processus.inc.php');
?>
<br><br>
</body>
</html>
e fichier php où j'affiche le tableau en question (affiche_image_processus.inc.php) :
<?
// Affiche les image des process et les processus correspondant lorsqu'on clique sur l'un d'eux.
// Var : $num_typ
$num_typ=$_GET[num_typ];
$db_affiche_image_processus = mysql_connect('localhost', '', '') or die('Erreur de connection');
mysql_select_db('csb', $db_affiche_image_processus) or die('Base de donnée inexistante');
// Nouvelle requette
$requette_typ_dt = "Select * from type_dt where num_typ = $num_typ";
$resultat_requette_typ_dt = @mysql_query($requette_typ_dt, $db_affiche_image_processus) or die('erreur dans la requête de récupération du typ de dt.<br>error sql :'.mysql_error());
$nb_colonnes = mysql_num_fields($resultat_requette_typ_dt);
$resultat_typ_dt = mysql_fetch_array($resultat_requette_typ_dt);
$nb_process=0;
echo '<table border=0 align="center"><tr>';
for($i=2;$i<$nb_colonnes;$i++)
{
$nb_process+=1;
$nom_process = mysql_field_name($resultat_requette_typ_dt, $i);
$requette_lien_process = "select lien from process where nom_process = \"$nom_process\"";
$resultat_requette_lien_process = @mysql_query($requette_lien_process, $db_affiche_image_processus) or die('erreur lors de la récupération du lien du process.<br>error sql :'.mysql_error());
$resultat_lien_process = mysql_fetch_array($resultat_requette_lien_process);
$lien = $resultat_lien_process['lien'];
echo '
<td class="process" width=100 height=50 align="center">
<a class="white" href=';
if($resultat_typ_dt[$nom_process]==1)
{
echo '"process/listeProcessus.php?num_dt='.$_GET[num_dt].'&num_typ='.$num_typ.'&num_process='.$nb_process.'&nom_process='.$nom_process.'" ';
}
else
{
echo '"process/processNull.php?num_typ='.$num_typ.'"';
}
echo ' target="processus"><B>'.$nom_process.'
</B></a>
</td>
';
}
echo '</tr></table>';
echo '
<br><br>
<iframe src="processus.php" name="processus" height="225" width=100% frameborder="no" border=1 scrolling="no">
Cadres local
</iframe>
';
?>
J'utilise IE.
OS?
Le serveur est APACHE avec EASYPHP.
J'espère avoir répondu à vos attentes.
Le code source risque d'être fort long mais si vous insisté le voici :
Le feuille css (norme.css):
body { background-color:white; }
body.menu { background-color:dodgerblue; text-color:white; }
h3.menu { background-color:blue; font-size:20px; font-family:Verdana, sans serif; font-weidht:bold; color:white; }
h3.ssmenu { background-color:dodgerblue; font-size:17px; font-family:Verdana, sans serif; font-weidht:bold; color:white; }
h2.menu { background-color:blue; font-size:26px; font-family:Verdana, sans serif; font-weidht:bold; color:white; }
h6 { font-size:10px; font-family:Verdana, sans serif; }
h6.processus { font-size:12px; font-family:Verdana, sans serif; color:black; }
b.rouge { font-size:16px; font-family:Verdana, sans serif; font-weidht:bold; color:red; }
A { font-size:14px; font-family:Verdana, sans serif; font-weidht:bold; color:blue; }
A.white { font-size:14px; font-family:Verdana, sans serif; font-weidht:bold; color:white; }
A.red { font-size:14px; font-family:Verdana, sans serif; font-weight:bold; color:red; }
A.green { font-size:14px; font-family:Verdana, sans serif; font-weight:bold; color:green; }
a.menu { font-size:14px; font-family:Verdana, sans serif; font-weight:bold; color:white; }
A:active { color:blue; }
A:hover { font-size:14px; font-family:Verdana, sans serif; font-weight:bold; color:black; }
table.tableau { background-color:#124D95; }
TH.tete { background-color:blue; font-size:14px; font-family:Verdana, sans serif; color:white; }
TR.menu { background-color:dodgerblue; font-size:18px; font-family:Verdana, sans serif; color:white; }
TD { font-size:18px; background-color:white; }
TD.process { background-image:url(image/process/avantVente.gif); background-repeat:no-repeat; }
TD.blue { border-style:solid; border-width:2; border-color:#000000; background-color:blue; color:white;}
TD.ref { border-style:solid; border-width:2; border-color:#000000; }
TD.petit { font-size:16px; }
TD.lien { background-color:dodgerblue; color:white;}
div.liste { color:white; text-align:left; }
font.menu { font-size:20px; font-family:Verdana, sans serif; font-weight:bold; }
ol { list-style-position:inside; text-align=left; margin-left:2px;}
.lh { font-weight:bold; text-decoration:underline; }
.cadre { border-style:solid; border-width:2; border-color:#000000; }
.menu { border-style:solid; border-color:#124D95; border-width:2; background-color:#126DCE; color:white; font-size:14px; }
La page html (DT.php) :
<html>
<head>
<title>Aceuille</title>
<LINK rel="stylesheet" type="text/css" href="css/norme.css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
</head>
<body >
<?
$num_projet=$_GET['num_projet'];
$nom_projet=$_GET['nom_projet'];
$num_dt=$_GET['num_dt'];
$nom_dt=$_GET['nom_dt'];
?>
<table border=1 frame=void rules=none cellspacing=10>
<tr>
<td class=blue rowspan=2 valign="bottom"><h2 >Zone des PROCESS : </h2></td>
<td class=lien>Projet numero </td>
<td class=lien>Nom du projet </td>
<td class=lien>Numéro de la DT </td>
<td class=lien>Nom de la DT </td>
</tr>
<?
echo "
<tr>
<td align=\"center\">".$num_projet."</td>
<td align=\"center\">".$nom_projet."</td>
<td align=\"center\">".$num_dt."</td>
<td align=\"center\">".$nom_dt."</td>
</tr>
</table>
";
include('Include/affiche_image_processus.inc.php');
?>
<br><br>
</body>
</html>
e fichier php où j'affiche le tableau en question (affiche_image_processus.inc.php) :
<?
// Affiche les image des process et les processus correspondant lorsqu'on clique sur l'un d'eux.
// Var : $num_typ
$num_typ=$_GET[num_typ];
$db_affiche_image_processus = mysql_connect('localhost', '', '') or die('Erreur de connection');
mysql_select_db('csb', $db_affiche_image_processus) or die('Base de donnée inexistante');
// Nouvelle requette
$requette_typ_dt = "Select * from type_dt where num_typ = $num_typ";
$resultat_requette_typ_dt = @mysql_query($requette_typ_dt, $db_affiche_image_processus) or die('erreur dans la requête de récupération du typ de dt.<br>error sql :'.mysql_error());
$nb_colonnes = mysql_num_fields($resultat_requette_typ_dt);
$resultat_typ_dt = mysql_fetch_array($resultat_requette_typ_dt);
$nb_process=0;
echo '<table border=0 align="center"><tr>';
for($i=2;$i<$nb_colonnes;$i++)
{
$nb_process+=1;
$nom_process = mysql_field_name($resultat_requette_typ_dt, $i);
$requette_lien_process = "select lien from process where nom_process = \"$nom_process\"";
$resultat_requette_lien_process = @mysql_query($requette_lien_process, $db_affiche_image_processus) or die('erreur lors de la récupération du lien du process.<br>error sql :'.mysql_error());
$resultat_lien_process = mysql_fetch_array($resultat_requette_lien_process);
$lien = $resultat_lien_process['lien'];
echo '
<td class="process" width=100 height=50 align="center">
<a class="white" href=';
if($resultat_typ_dt[$nom_process]==1)
{
echo '"process/listeProcessus.php?num_dt='.$_GET[num_dt].'&num_typ='.$num_typ.'&num_process='.$nb_process.'&nom_process='.$nom_process.'" ';
}
else
{
echo '"process/processNull.php?num_typ='.$num_typ.'"';
}
echo ' target="processus"><B>'.$nom_process.'
</B></a>
</td>
';
}
echo '</tr></table>';
echo '
<br><br>
<iframe src="processus.php" name="processus" height="225" width=100% frameborder="no" border=1 scrolling="no">
Cadres local
</iframe>
';
?>
J'utilise IE.
OS?
Le serveur est APACHE avec EASYPHP.
J'espère avoir répondu à vos attentes.