Probleme Affichage Block

Version imprimable

Bonjour,

Pour un système de news je veux mettre une image en background dans un div, la rendre donc cliquable avec un lien dessus et mettre le texte de ma news dans le div et qu'il soit également cliquable.

voici donc mon code (très pompeux mais c'est parce que derriere y'a d'autres choses)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="defil_news" style="width: 758px; height:127px;overflow:hidden">
        	<table width="758" border="0" cellspacing="0" cellpadding="0" height="127">
 
                <tr>
                <?
                        while($objet_news=mysql_fetch_object($resultat_news))
                                        {
                                ?>
                        <td width="253" align="center" height="127" valign="bottom">
 
                   			<div class="news" align="center" style="overflow:none; height:127px ;width:253px; background-image:url(./images_news/<? echo $objet_news->News_image_mini ?>); text-align:end "> 
 
				   <a href="#" style="font-family:Arial, Helvetica, sans-serif;display:inline-block; height:100%; color:#FFF; text-decoration:none"><? echo $objet_news->News_titre ?></a></div></td>
                        <?
         }
         ?>
                </tr>
 
                 </table>
                    </div>

Et la je n'arrive pas a ce que mon texte s'affiche en bas de mes cases, j'ai essayé pas mal de choses, si vous avez une idée

17/09/2010, 13h52
insane1

Peux tu fournir plutot le html généré ?

Voici l'Html de la zone concernée

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="defil_news" style="width: 758px; height:127px;overflow:hidden">
        	<table width="758" border="0" cellspacing="0" cellpadding="0" height="127">
 
                <tr>
                                        <td width="253" align="center" height="127" valign="bottom">
 
                   			<div class="news" align="center" style="overflow:none; height:127px ;width:253px; background-image:url(./images_news/contenu_robe.jpg); text-align:end "> 
 
				   <a href="#" style="font-family:Arial, Helvetica, sans-serif;display:inline-block; height:100%; color:#FFF; text-decoration:none">TROUVEZ LA ROBE DE VOTRE VIE</a></div></td>
                                                <td width="253" align="center" height="127" valign="bottom">
 
                   			<div class="news" align="center" style="overflow:none; height:127px ;width:253px; background-image:url(./images_news/contenu_facebook.jpg); text-align:end "> 
 
				   <a href="#" style="font-family:Arial, Helvetica, sans-serif;display:inline-block; height:100%; color:#FFF; text-decoration:none">REJOIGNEZ NOUS SUR FACEBOOK</a></div></td>
                                                <td width="253" align="center" height="127" valign="bottom">
 
                   			<div class="news" align="center" style="overflow:none; height:127px ;width:253px; background-image:url(./images_news/contenu_barboza.jpg); text-align:end "> 
 
				   <a href="#" style="font-family:Arial, Helvetica, sans-serif;display:inline-block; height:100%; color:#FFF; text-decoration:none">DEFILE ELIZABETH BARBOZA</a></div></td>
                                        </tr>
 
                 </table>
                    </div>

17/09/2010, 14h09
insane1

Tu veux que ton lien soit situé sous ton image c'est bien ca ?
Pourquoi ne pas créer simplement un autre <tr> et mettre les liens qui correspondent en dessous.
Apres avec du css tu peux enlever les bordures etc si cela ne te convient pas
17/09/2010, 14h11
mckilleron

je veux que mon lien contienne et l'image du div et le texte cliquable
la seule solution pour ca c'est le display, mais je peux plus aligner mon texte après
17/09/2010, 14h14
insane1

Pourquoi ne pas faire deux liens identiques ? Un pour ton image, et un pour le texte qui serait en dessous (dans un autre <tr> )
17/09/2010, 14h19
mckilleron

contrainte de charte graphique il faut une superposition
17/09/2010, 14h26
insane1

J'ai du mal à cerner le problème...
Au final ton image en background et ton texte dans le div devront etre cliquable.
Le texte se superposera à l'image forcement.
Tout ce que tu as a faire est donc de rendre l'intégralité du div cliquable ( propriete onclick )

Problème Réglé, j'ai finté, c'est pas propre mais ca marche comme je veux, je met le code si qqun a une idée pour optimiser ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="defil_news" style="width: 758px; height:127px;overflow:hidden">
        	<table width="758" border="0" cellspacing="0" cellpadding="0" height="127">
 
                <tr>
                                        <td width="253" align="center" height="127" valign="bottom">
 
                   			<div class="news" align="center" style="overflow:none; height:127px ;width:253px; background-image:url(./images_news/contenu_robe.jpg);"> 
 
				   <a href="#" style=" cursor:pointer;display:block;font-family:Arial, Helvetica, sans-serif; height:100%; color:#000; text-decoration:none"><table><tr><td height="127" valign="bottom" width="253">TROUVEZ LA ROBE DE VOTRE VIE</td></tr></table></a></div></td>
                                                <td width="253" align="center" height="127" valign="bottom">
 
                   			<div class="news" align="center" style="overflow:none; height:127px ;width:253px; background-image:url(./images_news/contenu_facebook.jpg);"> 
 
				   <a href="#" style=" cursor:pointer;display:block;font-family:Arial, Helvetica, sans-serif; height:100%; color:#000; text-decoration:none"><table><tr><td height="127" valign="bottom" width="253">REJOIGNEZ NOUS SUR FACEBOOK</td></tr></table></a></div></td>
                                                <td width="253" align="center" height="127" valign="bottom">
 
                   			<div class="news" align="center" style="overflow:none; height:127px ;width:253px; background-image:url(./images_news/contenu_barboza.jpg);"> 
 
				   <a href="#" style=" cursor:pointer;display:block;font-family:Arial, Helvetica, sans-serif; height:100%; color:#000; text-decoration:none"><table><tr><td height="127" valign="bottom" width="253">DEFILE ELIZABETH BARBOZA</td></tr></table></a></div></td>
                                        </tr>
 
                 </table>
                    </div>