Discussion :

[mckilleron]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[insane1]

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

[mckilleron]

Voici l'Html de la zone concernée

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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

[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

[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> )

[mckilleron]

contrainte de charte graphique il faut une superposition

[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 )

[mckilleron]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>