Sujets similaires

Pour commencer, bonjours à tous, et un grand merci à ceux qui prendront le temps de traiter ma demande.

Alors une amie a un projet de forum, et m'a demandé de l'aider et d'en faire le design, sachant que c'est une chose qu me plait pas mal. Elle me laisse donc le compte fondateur. Elle aimerait d'ailleurs que l'adresse ne soit pas encore divulguer, le temps de tout bien finir, mais si cela est vraiment nécessaire je donnerai l'adresse! Niveau graphisme aucun problème, Mais quand on en vient aux codes, ça se complique un peu, sachant que je ne suis absolument pas une déesse du HTML et du CSS, mais je me débrouille.

Mon problème vient de la page d'accueil, j'ai une image en background, avec des tableaux par dessus pour que le texte soit placé comme il faut. Néanmoins, je voudrais que cette image de background soit réactive, et je ne sais absolument pas comment m'y prendre, le code que je connais pour rendre une image cliquable ne me semble pas applicable dans notre cas. J'aurais voulu un peu d'aide à ce niveau là, il ne s'agit en rien d'une commande, je ne demande pas qu'on me mâche le travail, juste un petit éclaircissement! Smile

Le code de la PA:

Code:: <div style="background-image: url(http://i47.tinypic.com/35l6ed2.png); background-repeat: no-repeat; width: 715px; height: 600px;">

<center><embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/X2kOa5IlqFE" width="715" height="25" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit"></embed>
<center><table border="0" width="100%" cellpadding="2"><td style="vertical-align:top; width:250px; height: 145px"><div style="width: 95%; height: 132px;line-height: 90px; overflow: auto; padding-left: 20px; padding-right: 10px margin-right: 20px; margin-left: 10px; margin-top: 240px">
<span style="font-size: 10px; line-height: normal; color:#51656a;"> texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte textetexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte textetexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte textetexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte textetexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte
</div>
</td>
<td style="vertical-align:top; width:200px; height: 145px"><div style="width: 90%; height: 140px;line-height: 90px; overflow: auto; padding-left: 20px; padding-right: 30px margin-right: 100px; margin-top: 240px">
<span style="font-size: 10px; line-height: normal; color:#51656a;">
</div>
</td>

<td style="vertical-align:top; width:250px; height: 145px;"><div style="width: 95%; height: 132px;line-height: 90px; overflow: auto; padding-left: 10px; padding-right: 10px; margin-right: 35px; margin-top: 240px;">
<span style="font-size: 10px; line-height: normal; color:#51656a;">texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte

</div>

</div></td></table>

<table border="0" width="100%" cellpadding="2"><td style="vertical-align:top; width:180px; height: 70px;"><div style="margin-top: 35px; padding-right: -25px; margin-left: 20px; padding-left: 10px;" height: 70px;>
<span style="font-size: 10px; line-height: normal; color:#51656a;"> <MARQUEE behavior="scroll" align="center" direction="up" height="85" scrollamount="1" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'>
TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI </MARQUEE></div>
</div>
</td>
<td style="vertical-align:top; width:345px;"><div style="width: 95%; height: 90px;line-height: 90px; padding-left: 30px; padding-right: 30px">
<span style="font-size: 10px; line-height: normal; color:#51656a;">

</div>

<td style="vertical-align:top; width:180px; height: 85px;"><div style="margin-top: 35px; padding-right: 15px; margin-left: -10px; padding-left: 10px;" height: 85px;><div style="width: 95%; height: 85px;line-height: 85px; overflow: auto; padding-left: -5px; padding-right: 10px; margin-right: 15px; margin-top: 35px;">
<span style="font-size: 10px; line-height: normal; color:#51656a;">
TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI TON TEXTE ICI </div>
</div>
</td>
</center></div></div></table>

</div>

Aperçu: (capture d'écran parce que si je colle le code, tout est décalé)

Spoiler:

Code que je connais pour habituellement rendre une image réactive:

Code:: <IMG NAME="accueil0" SRC="LIEN DE TON IMAGE" WIDTH="LARGEUR DE TON IMAGE" HEIGHT="HAUTEUR DE TON IMAGE" BORDER="0" USEMAP="#accueil">
<MAP NAME="accueil">
<AREA SHAPE="rect" COORDS="X1,X2,Y1,Y2" HREF="LIEN DIRECTIF" ALT="COURTE DEscriptION">
<AREA SHAPE="rect" COORDS="X1,X2,Y1,Y2" HREF="LIEN DIRECTIF" ALT="COURTE DEscriptION">
</MAP>

Je ne sais pas si c'est utile de le préciser pour une PA dont toute la structure est définie dans les balises, mais le forum est en phpBB2, & il y a plusieurs templates modifiés!

J'avais éventuellement pensé à rajouter une image transparente dans une table au dessus de toutes et de rendre cette dernière cliquable mais l'idée me semble bizarre... Wink

Merci beaucoup à vous! Background Réactif? 577704309

Je ne vois pas ton problème, c'est exactement le code à utiliser selon moi. sinon tu peux positionner des images transparentes de la taille voulue qui auront un lien, mais c'est bien moins propre. Personnellement je ne vois pas d'autre solution à ton problème, et je ne vois pas vraiment pourquoi ta manière te pose problème! xD

C'est impossible d'utiliser ce type d'image map avec une image en background, il faut utiliser autre chose.
Le tutoriel suivant peut t'aider si l'anglais ne te rebutes pas:
http://css.flepstudio.org/en/css-tutorials/image-map-in-css.html

Bonjour,

Je confirme les dire d'Illadon: pas d'image réactive avec le background. À ce moment là, le mieux (mais pas l'unique solution) est de créer un lien type bloc et de t'arranger pour le positionner à l'endroit où tu voudrais tes zones. L'utilisateur aura alors l'impression de cliquer sur l'image, mais cliquera en fait sur le lien en bloc invisible que tu as inséré à cet endroit.

Un truc du genre:

Code:: <a href="#lien" class="lientrans"> </a>

Code:: .lienstrans {
display: block;
width: NOMBREpx;
height: NOMBREpx;
}

Sans avoir le lien de ton forum et les zones que tu souhaiterais avoir, nous ne pouvons pas t'aider davantage.

Tu peux utiliser les balise [ hide] et [ /hide] pour cacher le lien à ceux qui ne postent pas dans le sujet.

Merci !

Bonjour!
Merci beaucoup pour les réponse apportées, elles ont été largement suffisantes et j'ai trouvé solution à mon problème en mixant les codes d'Orange et le tutoriel d'Illadon!
Encore un grand merciiii Smack Smack

oui! :3

Alors je classe ! Wink

Background Réactif?

Background Réactif?

Sujets similaires

Sujets similaires

Partenaires Or