Sujets similaires

C'est chouette si tu as réussi toute seule! Very Happy

Par ailleurs, le "spacer.gif" est bel et bien dans les étapes du tuto ^^" Tu as du lire trop vite car:

Spoiler:

Pourtant, j'ai vu que tu avais mis un lien sur ces spacer, ça me semblait bizarre aussi
:cyclops:

Non mais j'avais les lignes de spacer à la fin comme toi, et d'autre entre les lignes du code ... Et je les avais bêtement supprimées >.<

Oui !! J'ai tout affiché sur mon forum : Http://b-days.keuf.net je trouve que ça fait un super rendu alors encore un grand merci à toi pour ton tuto <3 Depuis le temps que je voulais savoir comment faire une PA réactive ^^ Merciii =)

Merci beaucoup pour ce tuto, c'est du beau travail \o/

Bien joué Mina, ça rend bien! Very Happy

Il faudrait que je précise que les "spacer" peuvent: soit ne pas apparaître, soit n'être qu'à la fin, ou soit être après certaines images et à la fin. De ce côté là, il faut juste faire attention et bien vérifier son code ^^

Merci Mariabelle Very Happy

si un jour tu le fais, tu sais où trouver de l'aide Wink

Oui, je pense que ce serait utile de préciser, ça t'éviterait de te retrouver plusieurs fois avec des membres qui ont mon problème Very Happy

. En tout cas merci pour le rendu *-*

Au secours ! *rires*

J'ai suivi les instructions de Jill à la lettre et tout se déroule nickel (merci à elle, d'ailleurs, très bien fait, même moi, une véritable daube en codage, je me trouve avec un résultat fort satisfaisant !). J'ai réussi à faire le mapping impeccable.

Mais le problème, c'est que je ne parviens pas faire entrer un texte dans la boîte "Intrigue" et "Dernières Informations". Quand j'essaie de mettre du texte selon les instructions de Jill, toutes les images se désolidarisent, du gris apparait et ça fait légèrement... Moche.

http://testgraph.forumotion.com/index.htm (sans les textes)

Voici mon code :

Code:: <html>
<head>
<title>Fond Mapping</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="1201" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td colspan="4">
      <img src="http://img825.imageshack.us/img825/6291/fondmapping01.gif" width="1200" height="121" alt=""></td>
   <td>
      <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="121" alt=""></td>
</tr>
<tr>
   <td rowspan="4">
      <img src="http://img202.imageshack.us/img202/4346/fondmapping02.gif" width="347" height="481" alt="" USEMAP="#annonce"></td>
   <td colspan="3">
      <img src="http://img837.imageshack.us/img837/7072/fondmapping03.gif" width="853" height="65" alt=""></td>
   <td>
      <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="65" alt=""></td>
</tr>
<tr>
   <td rowspan="5">
      <img src="http://img409.imageshack.us/img409/9821/fondmapping04.gif" width="160" height="614" alt=""></td>
   <td>
      <img src="http://img838.imageshack.us/img838/896/fondmapping05.gif" width="551" height="281" alt=""></td>
   <td rowspan="5">
      <img src="http://img409.imageshack.us/img409/9383/fondmapping06.gif" width="142" height="614" alt=""></td>
   <td>
      <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="281" alt=""></td>
</tr>
<tr>
   <td>
      <img src="http://img829.imageshack.us/img829/9705/fondmapping07.gif" width="551" height="114" alt=""></td>
   <td>
      <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="114" alt=""></td>
</tr>
<tr>
   <td rowspan="2">
      <img src="http://img830.imageshack.us/img830/88/fondmapping08.gif" width="551" height="192" alt=""></td>
   <td>
      <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
   <td rowspan="2">
      <img src="http://img821.imageshack.us/img821/2481/fondmapping09.gif" width="347" height="198" alt=""></td>
   <td>
      <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="171" alt=""></td>
</tr>
<tr>
   <td>
      <img src="http://img823.imageshack.us/img823/9968/fondmapping10.gif" width="551" height="27" alt=""></td>
   <td>
      <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="27" alt=""></td>
</tr>
</table>
<MAP NAME="annonce">
<AREA SHAPE="rect" ALT="Règlement" COORDS="33,43,283,110" HREF="http://lenvoldelaigle.forumactif.com/reglement-f1/">
<AREA SHAPE="rect" ALT="Contexte" COORDS="47,144,221,211
" HREF="http://lenvoldelaigle.forumactif.com/contexte-f3/">
<AREA SHAPE="rect" ALT="Présentation" COORDS="48,247,292,314" HREF="http://lenvoldelaigle.forumactif.com/bureau-de-recensement-f5/">
<AREA SHAPE="rect" ALT="Annonce" COORDS="44,357,252,424" HREF="http://"http://lenvoldelaigle.forumactif.com/annonces-f4/>
</MAP>


</body>
</html>

Et rien là dessus au niveau de ma CSS.
J'aimerai rajouter du texte dans la cinquième tranche (fondmapping5) et dans la huitième (fondmapping8). Quelqu'un pourrait m'expliquer où est mon erreur? J'ai déjà recommencé mon codage 3 fois...

Et j'aurais également une autre question. J'aimerais réduire la taille de l'image. Y a-t-il un code spécifique pour cela, ou dois-je tout redimensionner et recoder?

Merci d'avance.

EDIT : huhu j'avais oublié la map ^^". <== Boulette.

@ Dylan: Merci beaucoup! Very Happy

Heureuse d'avoir pu t'aider!

@ Alejandro: Je vais me pencher sur ton problème ^^

Tout d'abord, pour réduire ton mapping, il faut tout redimensionner (et donc, ne pas oublier de changer les tailles des images dans ton code; ou bien reprendre depuis photoshop qui redonnera le code directement (je pense que le plus simple reste la 2nde solution)

Sinon, pour ton mapping, je veux bien t'aider, mais tu préfère que je t'explique tout sur celui là, ou j'attends que tu es redimensionné les images?

En attendant, si tu n'as pas de css, le texte aura des problèmes d'affichage ^^" Je peux te réepliquer, si tu veux Wink

D'accord pour la redimension =). Je termine de créer les classes sociales de mon forum et je fais ça. Dans la foulée, je rehost et recode ^^".

Merci infiniment de te pencher sur mon problème !

Youpi, ça marche, voici mon nouveau code !

Code:: <html>
<head>
<title>Fond Mapping</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="801" height="533" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td colspan="4">
      <img src="http://img844.imageshack.us/img844/6291/fondmapping01.gif" width="800" height="80" alt=""></td>
   <td>
      <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
   <td rowspan="4">
      <img src="http://img826.imageshack.us/img826/4549/fondmapping02.png" width="232" height="322" alt=""USEMAP="#annonce"></td>
   <td colspan="3">
      <img src="http://img838.imageshack.us/img838/7072/fondmapping03.gif" width="568" height="43" alt=""></td>
   <td>
      <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
   <td rowspan="5">
      <img src="http://img834.imageshack.us/img834/9821/fondmapping04.gif" width="106" height="410" alt=""></td>
   <td>
      <img src="http://img827.imageshack.us/img827/896/fondmapping05.gif" width="368" height="189" alt=""></td>
   <td rowspan="5">
      <img src="http://img695.imageshack.us/img695/9383/fondmapping06.gif" width="94" height="410" alt=""></td>
   <td>
      <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="189" alt=""></td>
</tr>
<tr>
   <td>
      <img src="http://img816.imageshack.us/img816/9705/fondmapping07.gif" width="368" height="75" alt=""></td>
   <td>
      <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="75" alt=""></td>
</tr>
<tr>
   <td rowspan="2">
      <img src="http://img836.imageshack.us/img836/88/fondmapping08.gif" width="368" height="129" alt=""></td>
   <td>
      <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
   <td rowspan="2">
      <img src="http://img163.imageshack.us/img163/2481/fondmapping09.gif" width="232" height="131" alt=""></td>
   <td>
      <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="114" alt=""></td>
</tr>
<tr>
   <td>
      <img src="http://img839.imageshack.us/img839/9968/fondmapping10.gif" width="368" height="17" alt=""></td>
   <td>
      <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="17" alt=""></td>
</tr>
</table>
<MAP NAME="annonce">
<AREA SHAPE="rect" ALT="Règlement" COORDS="28,35,186,76" HREF="http://lenvoldelaigle.forumactif.com/reglement-f1/">
<AREA SHAPE="rect" ALT="Contexte" COORDS="26,103,151,144
" HREF="http://lenvoldelaigle.forumactif.com/contexte-f3/">
<AREA SHAPE="rect" ALT="Présentation" COORDS="28,171,194,212
" HREF="http://lenvoldelaigle.forumactif.com/bureau-de-recensement-f5/">
<AREA SHAPE="rect" ALT="Annonce" COORDS="22,242,188,283" HREF="http://"http://lenvoldelaigle.forumactif.com/annonces-f4/>
</MAP>

</body>
</html>

Cowl !

Alors, pourrais tu me donner ton code de base aussi (le même que celui-ci mais non rempli) et si tu as, ton css.

Je vais vérifier que ça marche avant de t'expliquer, je n'ai pas envie de t'induire en erreur x)

En tout cas, bien joué, la map, elle, fonctionne parfaitement! ^^

Est-ce ceci que tu nommes "code de base"?

Code:: <html>
<head>
<title>Fond Mapping</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="801" height="533" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td colspan="4">
      <img src="Fond-Mapping_01.gif" width="800" height="80" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
   <td rowspan="4">
      <img src="Fond-Mapping_02.gif" width="232" height="322" alt=""></td>
   <td colspan="3">
      <img src="Fond-Mapping_03.gif" width="568" height="43" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
   <td rowspan="5">
      <img src="Fond-Mapping_04.gif" width="106" height="410" alt=""></td>
   <td>
      <img src="Fond-Mapping_05.gif" width="368" height="189" alt=""></td>
   <td rowspan="5">
      <img src="Fond-Mapping_06.gif" width="94" height="410" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="189" alt=""></td>
</tr>
<tr>
   <td>
      <img src="Fond-Mapping_07.gif" width="368" height="75" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="75" alt=""></td>
</tr>
<tr>
   <td rowspan="2">
      <img src="Fond-Mapping_08.gif" width="368" height="129" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
   <td rowspan="2">
      <img src="Fond-Mapping_09.gif" width="232" height="131" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="114" alt=""></td>
</tr>
<tr>
   <td>
      <img src="Fond-Mapping_10.gif" width="368" height="17" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="17" alt=""></td>
</tr>
</table>

</body>
</html>

Et pour la CSS, la voici :

Code:: body {
margin : 0px;
background-repeat: no-repeat;
background-position: center;
}

a.forumlink {
text-decoration: none;
background-color: #black;
border-bottom: 2px double #gold;
border-top: 2px double #gold;
-moz-border-radius: 10px ;
border-right: 5px solid #black;
-moz-border-radius: 10px ;
border-left: 5px solid #black;
display:block;
font-variant: small-caps ;
font-family: georgia;
text-transform : uppercase;
text-align: center;
}

a {
text-align: justify;}

Rien de spécifique à la PA :-/.

Coucou! Désolée du retard ^^"

Alors, oui, c'était bien le code de base, et je n'en ai pas eu besoin tout compte fait Wink

J'ai réglé ton problème assez facilement puisque tu n'avais pas de css. Pour que le mapping marche entièrement, il faut faire et le html et le css, sinon, rien n'est aligné comme il faut =) Même si on croit que le html donne la base, c'est faux. Il faut obligatoirement rajouter le css en même temps. (je ne cesserai jamais de le répéter xD)

Voila le css: (auquel tu pourras rajouter des caractéristiques sans problème, notamment pour la structure de tes textes, c'est la base de chez base que je te donne ^^)

Code:: .intrigue
{
background-image: url("http://img827.imageshack.us/img827/896/fondmapping05.gif");
background: no repeat;
width: 368px;
height: 189px;
overflow: auto;

}

.annonce
{
background-image: url("http://img836.imageshack.us/img836/88/fondmapping08.gif");
background: no repeat;
width: 368px;
height: 129px;
overflow: auto;
}

Et le html: (qui ne change qu'au niveau des tranches 5 et 8 en fait: Là où il y a "bla bla bla", tu y mets le texte que tu veux, et tu lui donne un style avec le css)

Code:: <html>
<head>
<title>Fond Mapping</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="801" height="533" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="http://img844.imageshack.us/img844/6291/fondmapping01.gif" width="800" height="80" alt=""></td>
<td>
<img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://img826.imageshack.us/img826/4549/fondmapping02.png" width="232" height="322" alt=""USEMAP="#annonce"></td>
<td colspan="3">
<img src="http://img838.imageshack.us/img838/7072/fondmapping03.gif" width="568" height="43" alt=""></td>
<td>
<img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="http://img834.imageshack.us/img834/9821/fondmapping04.gif" width="106" height="410" alt=""></td>
<td>
<div class="intrigue">bla bla bla</div></td>
<td rowspan="5">
<img src="http://img695.imageshack.us/img695/9383/fondmapping06.gif" width="94" height="410" alt=""></td>
<td>
<img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="189" alt=""></td>
</tr>
<tr>
<td>
<img src="http://img816.imageshack.us/img816/9705/fondmapping07.gif" width="368" height="75" alt=""></td>
<td>
<img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="75" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<div class="annonce">bla bla bla</div></td>
<td>
<img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://img163.imageshack.us/img163/2481/fondmapping09.gif" width="232" height="131" alt=""></td>
<td>
<img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="114" alt=""></td>
</tr>
<tr>
<td>
<img src="http://img839.imageshack.us/img839/9968/fondmapping10.gif" width="368" height="17" alt=""></td>
<td>
<img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="17" alt=""></td>
</tr>
</table>
<MAP NAME="annonce">
<AREA SHAPE="rect" ALT="Règlement" COORDS="28,35,186,76" HREF="http://lenvoldelaigle.forumactif.com/reglement-f1/">
<AREA SHAPE="rect" ALT="Contexte" COORDS="26,103,151,144
" HREF="http://lenvoldelaigle.forumactif.com/contexte-f3/">
<AREA SHAPE="rect" ALT="Présentation" COORDS="28,171,194,212
" HREF="http://lenvoldelaigle.forumactif.com/bureau-de-recensement-f5/">
<AREA SHAPE="rect" ALT="Annonce" COORDS="22,242,188,283" HREF="http://"http://lenvoldelaigle.forumactif.com/annonces-f4/>
</MAP>

</body>
</html>

voilou

Sinon, j'ai vu que tu as posté puis enlevé ton message Miyu, tu as réussi à résoudre ton problème?

Comme disait le grand Gainsbourg, tu es ma Lady Héroïne. Merci beaucoup. C'est juste magnifique, je vais avoir terminé mon cadeau dans les temps !

Oh Merci

Et de rien!
Si tu as d'autres problèmes plus tard, n'hésite pas! Wink

Sujet: Re: Créer une PA réactive / mapping Sam 25 Sep 2010, 10:17

Coucou,

Le tutoriel est très bien expliqué, j'ai compris tout de suite ce qui est rare quand je lis un tutoriel.
Seulement comme disait quelqu'un précédemment, moi non plus je n'ai pas eue d'images "Spacer" et mes images se sont enregistrées en .GIF ~

Ensuite, j'ai créée une "boîte" sur mon image que j'aimerai utiliser pour y mettre des informations etc, mais voilà le soucis même si le tutoriel est clair, je n'ai pas compris au niveau du CSS & HTML *est très nulle en codes* ... u_u
Je crois plutôt que je l'ai convertie en lien d'ailleurs !

Et j'ai une petite question (la dernière j'espère !) peut-on ajouter des infobulles ensuite, dans les zones où je pourrais mettre le texte, par exemple ?

Je pense que les questions ont été posées, mais comme ma connexion me fait des caprices, ça lui arrive de pas tout m'afficher (L)... xD

Sujet: Re: Créer une PA réactive / mapping Dim 26 Sep 2010, 17:47

Bonjour! Merci pour tes compliments sur mon tuto, j'ai passé pas mal d'heures à la réaliser, donc ça me fait vraiment plaisir Wink

Pour la boite, as-tu rajouté ton image dans le css? (et non dans le html)
Sinon, il me semble qu'il est possible de mettre des infobulles sur du texte, mais je ne suis pas assez calée sur ce sujet là (les infobulles je veux dire :p) pour t'aider ^^" (sauf si je me mets dedans Razz

)

Pour les spacer, tu n'es pas forcée d'en avoir en fait (faudrait que je rajoute ça dans le tuto d'ailleurs .__. ) Pour les images en .gif, as tu essayé de les ré-enregistrer?

Sinon, je peux t'aider pour rajouter ta boite, mais il me faudrait ton html, ton css, et ton html "de base" (le code donné par photoshop) et me dire quelles sont les tranches à changer (surtout pour ta boite, et si tu veux d'autres ajouts en même temps)

Voili voilou Wink

Sujet: Re: Créer une PA réactive / mapping Mar 28 Sep 2010, 14:29

Salut!!
Tout d'abord bravo pour ton super tuto! =D
Moi qui ne suis pas une pro j'ai un peu près tout compris.

Mais j'ai un petit problème, les deux parties où il y a du texte ne sont pas au bon endroit, et je n'arrive pas a comprendre où est l'erreur.
(Lien: http://test-forum94.forumperso.com/index.htm )

Codes HTML:

Spoiler:

Code:: <html>
<head>
<title>PA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="640" height="470" border="0" cellpadding="0" cellspacing="0">

<tr>
   <td colspan="3">
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0110.gif" width="209" height="123" alt=""></td>

   <td colspan="2" rowspan="3">
      <img src="http://i52.tinypic.com/atq5n5.gif" width="431" height="345" alt="" USEMAP="#navigation"></td>

</tr>

<tr>
   <td rowspan="4">
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0310.gif" width="36" height="346" alt=""></td>


<td colspan="2">
      <marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115"></td>

   <td colspan="2"> <div class="News">Bribri nous a quittée... et il faut donc un autre guerisseur pour le clan du Soleil.

Un concour est organisé pour le nouveau design' ;)

Vous pouvez tous participer

ICI

La guerre a enfin éclaté :

Clan de la Rivière contre Ténèbres et Tonnerre.

C'est aux arbres =)
</div></td></tr>


<tr>
   <td colspan="2">
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0510.gif" width="173" height="98" alt=""></td>
</tr>

<tr>
   <td rowspan="2">
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0610.gif" width="10" height="124" alt=""></td>

<td colspan="2">
      <marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115"></td>
<td colspan="2"><div class="Membres de la Semaine">Bois/Cerise/Jais :
Tu as été très active ces derniers temps.

Bravo =)

C. de Panthère/N. d'Aube :

Tu es active, c'est bien... Mais ce serait encore mieux si tu te concentrais un petit peu plus au RPS plutôt qu'au flood.

Bravo quand même =)</div></td></tr>

<tr>

   <td rowspan="2">
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0810.gif" width="360" height="124" alt=""></td>
</tr>
<tr>
   <td colspan="2">
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0910.gif" width="234" height="19" alt=""></td>
</tr>
<tr>
   <td>
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="36" height="1" alt=""></td>
   <td>
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="10" height="1" alt=""></td>
   <td>
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="163" height="1" alt=""></td>
   <td>
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="71" height="1" alt=""></td>
   <td>
      <img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="360" height="1" alt=""></td>
</tr>
</table>

<MAP NAME="navigation">
<AREA SHAPE="rect" ALT="reglement" COORDS="43,109,154,140" HREF="http://test-forum94.forumperso.com/avant-de-se-presenter-f1/reglement-t1.htm">
<AREA SHAPE="rect" ALT="annonces" COORDS="21,171,122,199" HREF="http://test-forum94.forumperso.com/annonces-f3/">
<AREA SHAPE="rect" ALT="evenements" COORDS="17,235,146,258" HREF="http://test-forum94.forumperso.com/evenements-f4/">
</MAP>


</body>
</html>

Codes CSS:

Spoiler:

Pourrais-tu m'aider?

Merci d'avance!! =)

Sujet: Re: Créer une PA réactive / mapping Mar 28 Sep 2010, 16:20

Bonjour! Tout d'abord, merci pour tes compliments Very Happy

Pour ton problème, j'ai réussi à trouver pour le placement de tes boites de texte, seulement, il y a encore des espaces non voulu. Du coup, pourrais-tu me donner ton html de base? Celui que te donne photoshop. Que je vérifie par ce biais là, puisque tu as glissés plein de petites erreurs (surement dû à la dernière étape, la plus difficile pour un novice du codage).

Mais ne t'inquiètes pas, je peux te rattraper ça ^___^ Je t'expliquerais ensuite ce que tu n'as pas bien fait, pour que tu ne te fasse pas avoir la prochaine fois Wink

Sujet: Re: Créer une PA réactive / mapping Mer 29 Sep 2010, 03:08

D'accord, merci! =)

Voilà le code:

Spoiler:

Sujet: Re: Créer une PA réactive / mapping Mer 29 Sep 2010, 15:05

Voila ton code réparé :p :

Code:: <html>
<head>
<title>PA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="640" height="470" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0110.gif" width="209" height="123" alt=""></td>
<td colspan="2" rowspan="3">
<img src="http://i52.tinypic.com/atq5n5.gif" width="431" height="345" alt="" USEMAP="#navigation"></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0310.gif" width="36" height="346" alt=""></td>
<td colspan="2">
<div class="News"><span class="texte">Bribri nous a quittée... et il faut donc un autre guerisseur pour le clan du Soleil.
Un concours est organisé pour le nouveau design' ;) Vous pouvez tous participer ICI
La guerre a enfin éclaté : Clan de la Rivière contre Ténèbres et Tonnerre.
C'est aux arbres =)</span></div></td>
</tr>
<tr>
<td colspan="2">
<img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0510.gif" width="173" height="98" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0610.gif" width="10" height="124" alt=""></td>
<td colspan="2"><div class="Membres"><span class="texte">Bois/Cerise/Jais :
Tu as été très active ces derniers temps. Bravo =)
C. de Panthère/N. d'Aube :
Tu es active, c'est bien... Mais ce serait encore mieux si tu te concentrais un petit peu plus au RPS plutôt qu'au flood.
Bravo quand même =)</span></div>
</td>
<td rowspan="2">
<img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0810.gif" width="360" height="124" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0910.gif" width="234" height="19" alt=""></td>
</tr>
<tr>
<td>
<img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="36" height="1" alt=""></td>
<td>
<img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="10" height="1" alt=""></td>
<td>
<img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="163" height="1" alt=""></td>
<td>
<img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="71" height="1" alt=""></td>
<td>
<img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="360" height="1" alt=""></td>
</tr>
</table>

<MAP NAME="navigation">
<AREA SHAPE="rect" ALT="reglement" COORDS="43,109,154,140" HREF="http://test-forum94.forumperso.com/avant-de-se-presenter-f1/reglement-t1.htm">
<AREA SHAPE="rect" ALT="annonces" COORDS="21,171,122,199" HREF="http://test-forum94.forumperso.com/annonces-f3/">
<AREA SHAPE="rect" ALT="evenements" COORDS="17,235,146,258" HREF="http://test-forum94.forumperso.com/evenements-f4/">
</MAP>


</body>
</html>

Je me doutais que tu t'étais emmêlée les pinceaux avec l'ajout du css/html entre les lignes. Tu as dû faire du copier/coller en trop puisque tes deux boites étaient en double, et tu avais un mapping à 11 tranches plutôt qu'à 9 ^^" Par exemple, tu as mis:

Code:: <td colspan="2">
<marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115"></td>

<td colspan="2"> <div class="News">Bribri nous a quittée... et il faut donc un autre guerisseur pour le clan du Soleil. Un concours est organisé pour le nouveau design' ;) Vous pouvez tous participer ICI
La guerre a enfin éclaté : Clan de la Rivière contre Ténèbres et Tonnerre.
C'est aux arbres =)
</div></td>

Ta première ligne ne donne aucune indication pour ta tranche, car il n'y a ni image, ni lien, ni classe. Je la balise pour faire défiler ton contenu.. qui n'existe pas! Néanmoins, la ligne est quand même comptée et ça t'a décalé tout ton mapping. Idem avec la deuxième boite Wink

Ensuite, l'autre erreur est celle ci:

Code:: <div class="Membres de la Semaine">

Alors que dans ton css, on a:

Code:: .Membres

Il faut écrire le même mot dans les 2 parties, sinon ça ne marchera pas. Et surtout, pas d'espace dans la "div class". Au pire, mets un "_"

Voili voilou, si jamais tu as d'autres questions n'hésite pas Very Happy

Sujet: Re: Créer une PA réactive / mapping Jeu 30 Sep 2010, 08:39

Bonjour et un grand merci pour ce tutoriel super bien expliqué ! C'est un rêve de graphiste qui se réalise =D

J'ai un petit soucis par contre que je désespère de résoudre (la preuve en IMAGE)

Je n'ai pour l'instant pas réussit à le régler depuis hier soir ! Je n'ai pas encore placé de CSS ou autre puisque je voulais d'abord que le panneau s'agence correctement avec les liens cliquables (qui fonctionnent parfaitement d'ailleurs) avant de mettre mes parties de pur HTML+CSS Cependant je doute que cela change grand chose.
Alors si quelqu'un avait la petite astuce ...

Voici mon code :

Code:: <html>
<head>
<title>panneau non coupé</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="801" height="451" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844052.gif" width="800" height="29" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844053.gif" width="35" height="211" alt=""></td>
<td colspan="2" rowspan="2">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844054.png" width="155" height="151" alt="" USEMAP="#navigation"></td>
<td colspan="2" rowspan="3">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844055.gif" width="373" height="211" alt=""></td>
<td colspan="4">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844056.gif" width="237" height="134" alt="" USEMAP="#team"></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="134" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844057.gif" width="237" height="77" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844058.gif" width="155" height="60" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="60" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844059.gif" width="594" height="38" alt=""></td>
<td colspan="2">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844060.gif" width="179" height="38" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844061.gif" width="27" height="38" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844062.gif" width="46" height="172" alt=""></td>
<td colspan="2">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844063.gif" width="222" height="144" alt=""></td>
<td colspan="2" rowspan="2">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844064.gif" width="362" height="172" alt=""></td>
<td colspan="2" rowspan="2">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844065.gif" width="170" height="172" alt="" USEMAP="#annexe"></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="144" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844066.gif" width="222" height="28" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="35" height="1" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="11" height="1" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="144" height="1" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="78" height="1" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="295" height="1" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="31" height="1" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="36" height="1" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="143" height="1" alt=""></td>
<td>
<img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="27" height="1" alt=""></td>
<td></td>
</tr>
</table>

<MAP NAME="navigation">
<AREA SHAPE="rect" ALT="histoire" COORDS="39,6,138,31" HREF="http://angels-house.forum-actif.net/vieux-grimoire-f1/histoire-t1.htm">
<AREA SHAPE="rect" ALT="regles" COORDS="8,25,96,53" HREF="http://angels-house.forum-actif.net/code-civil-f3/reglement-t29.htm">
<AREA SHAPE="rect" ALT="rangs" COORDS="56,55,132,78" HREF="http://angels-house.forum-actif.net/statut-f4/rangs-disponibles-t1388.htm">
<AREA SHAPE="rect" ALT="fiche" COORDS="12,75,80,97" HREF="http://angels-house.forum-actif.net/modele-de-fiche-f6/fiche-de-personnage-t33.htm">
<AREA SHAPE="rect" ALT="predef" COORDS="38,112,150,142" HREF="http://angels-house.forum-actif.net/les-predefinis-f118/">
</MAP>

<MAP NAME="team">
<AREA SHAPE="rect" ALT="admin" COORDS="12,10,53,101" HREF="http://angels-house.forum-actif.net/profile.forum?mode=viewprofile&u=1">
<AREA SHAPE="rect" ALT="raph" COORDS="71,34,118,118" HREF="http://angels-house.forum-actif.net/profile.forum?mode=viewprofile&u=26">
<AREA SHAPE="rect" ALT="willi" COORDS="129,32,171,116" HREF="http://angels-house.forum-actif.net/profile.forum?mode=viewprofile&u=334">
<AREA SHAPE="rect" ALT="jimi" COORDS="181,34,229,114" HREF="http://angels-house.forum-actif.net/profile.forum?mode=viewprofile&u=130">
</MAP>

<MAP NAME="annexe">
<AREA SHAPE="rect" ALT="strass" COORDS="6,23,165,52" HREF="http://angels-house.forum-actif.net/9734-strass-et-paillettes-9734-f82/">
<AREA SHAPE="rect" ALT="evenement" COORDS="23,53,166,85" HREF="http://angels-house.forum-actif.net/9734-angel-s-diary-9734-f13/">
<AREA SHAPE="rect" ALT="intrigue" COORDS="51,92,148,121" HREF="http://angels-house.forum-actif.net/9734-vieux-grimoire-9734-f1/intrigue-crow-s-flight-t1637.htm">
</MAP>

</body>
</html>

Merci d'avance pour ton aide !

Sujet: Re: Créer une PA réactive / mapping Jeu 30 Sep 2010, 12:29

Merci beaucoup Jill!! =D

Sujet: Re: Créer une PA réactive / mapping Sam 02 Oct 2010, 10:17

Juste pour dire que j'ai résolu mon problème en redécoupant tout proprement et tout marche parfaitement !

Merci encore pour ce super tutoriel !

Sujet: Re: Créer une PA réactive / mapping Dim 10 Oct 2010, 12:45

Bonjour,
j'ai un problème avec ma page d'accueil.
Quand je mets mon code HTML, j'enregistre et quand j'arrive à la page d'accueil, tout est désordonné :S
Voilà ce que ça donne:

Spoiler:

La voilà découpée:

Spoiler:

J'ai pas encore mis le CSS pour m'assurer que ça ressemble déjà à quelque chose (ce qui n'est pas le cas).
Voilà le code HTML:

Spoiler:

Code:: Format : GIF
Dimensions : 740 l x 556 h
Taille : 285,8 K
Images : 12
Paramètres : Sélective, 256 Couleurs, Diffusion 100 % , Transparence Activé, Sans tramage de transparence, Non entrelacé, 0 % d'alignement sur Web

<html>
<head>
<title>ScreenShot018</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="741" height="556" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://img7.hostingpics.net/pics/288640PA_reactive_GH_01.gif" width="356" height="217" alt=""></td>
<td colspan="2" rowspan="2">
<img src="http://img7.hostingpics.net/pics/959563PA_reactive_GH_02.gif" width="384" height="260" alt=""USEMAP="#Navigation"></td>
<td>
<img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="217" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="http://img7.hostingpics.net/pics/604542PA_reactive_GH_03.gif" width="18" height="339" alt=""></td>
<td colspan="2"><div class="Description">Tout
d'abord, Graphic'Horse est un forum de graphisme équin. On apprend à
coloriser un cheval, à faire des montages avec, le dessiner avec des
crayons... bref, tout sur votre compagnon préféré!
Des conseils, des tutoriels, des bases... sont à votre disposition et vous pouvez vous en servir.
Des commentaires des membres, des examens de niveau... tout ce qu'il vous faut pour progresser.
Alors n'hésitez pas à vous inscrire!</div></td></tr>
<td rowspan="7">
<img src="http://img7.hostingpics.net/pics/308931PA_reactive_GH_05.gif" width="17" height="339" alt=""></td>
<td>
<img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="http://img7.hostingpics.net/pics/306576PA_reactive_GH_06.gif" width="384" height="21" alt=""></td>
<td>
<img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="2"><div class="partenaires"><marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115">
<A class=postlink href="http://artistseeds.1fr1.net/forum.htm" target="_blank"><IMG border="0" alt="" src="à venir"></A></div></td>
<td rowspan="5">
<img src="http://img7.hostingpics.net/pics/900248PA_reactive_GH_08.gif" width="259" height="275" alt=""></td>
<td>
<img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="107" alt=""></td>
</tr>
<tr>
<td>
<img src="http://img7.hostingpics.net/pics/521106PA_reactive_GH_09.gif" width="321" height="38" alt=""></td>
<td>
<img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td colspan="2"><div class="News"><marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115">10/10/2010--> Mise à jour complète</div></td>

<td>
<img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://img7.hostingpics.net/pics/741355PA_reactive_GH_11.gif" width="125" height="110" alt=""></td>
<td>
<img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="92" alt=""></td>
</tr>
<tr>
<td>
<img src="http://img7.hostingpics.net/pics/683048PA_reactive_GH_12.gif" width="321" height="18" alt=""></td>
<td>
<img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="18" alt=""></td>
</tr>
</table>

<MAP NAME="Navigation">
<AREA SHAPE="rect" ALT="reglement" COORDS="240,125,369,150" HREF="http://graphic-horse.graphforum.com/reglement-general-f1/reglement-general-a-lire-avant-tout-t1.htm">
<AREA SHAPE="rect" ALT="annonce" COORDS="235,178,357,205" HREF="http://graphic-horse.graphforum.com/annonces-f3/">
<AREA SHAPE="rect" ALT="staff" COORDS="258,226,315,252" HREF="http://graphic-horse.graphforum.com/annonces-f3/l-equipe-de-graphic-horse-t59.htm#267">
</MAP>


</body>
</html>

Aidez moi s'il vous plait, je n'y comprends vraiment rien! D:
Merci d'avance

Sujet: Re: Créer une PA réactive / mapping Mer 13 Oct 2010, 14:43

Bon, j'ai suivi le tuto à la lettre, je l'ai recommencé trois fois pour à chaque fois obtenir le même résultat.
Tout va bien au niveau des MAP, mais il n'en est pas de même pour mes parties de html où c'est le bazar complet.
J'ai beau lire et relire mes codes je ne vois pas d'où peut venir le problème.

J'ai déjà fait une PA réactive, avec ce même tuto, et ça avait bien fonctionné, je suis sceptique.

http://tohodai.asiat-world.com

Code de ma PA :

Code:: <div class="texte_PA">Bienvenue à Tohodai <b>{USERNAME}</b> ! ♥</div><br><br><br><table><tr><td><html>
<head>
<title>pa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="401" height="550" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="http://img46.xooimage.com/files/6/2/7/pa_01-2154796.gif" width="165" height="49" alt=""></td>
<td rowspan="2">
<img src="http://img42.xooimage.com/files/b/7/c/pa_02-21547ae.gif" width="235" height="121" alt="" USEMAP="#Tops></td>
<td>
<img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="1" height="49" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://img48.xooimage.com/files/d/5/a/pa_03-21547c8.gif" width="38" height="195" alt=""></td>
<td rowspan="2"><div class="Partenaires">uc Partenaires coup de coeur à venir.</div></td>
<td>
<img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="1" height="72" alt=""></td>
</tr>
<tr>
<td><div class="Vacants"><img src="http://img46.xooimage.com/files/7/6/4/76vai52g-214d8e4.png"> <img src="http://img48.xooimage.com/files/4/3/2/m6h9ndl8-214d92c.png"> <img src="http://img26.xooimage.com/files/6/2/3/c4jeilo5-214d94e.png"></div></td>
<td>
<img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="1" height="123" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://img26.xooimage.com/files/a/2/1/pa_06-2154816.gif" width="400" height="306" alt="" USEMAP="#Navigation></td>
<td>
<img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="1" height="306" alt=""></td>
</tr>
</table>

<MAP NAME="Navigation">
<AREA SHAPE="rect" ALT="Règlement" COORDS="103,47,196,77" HREF="http://tohodai.asiat-world.com/-panneau-d-affichage-f1/b-reglement-du-forum-t2.htm#2">
<AREA SHAPE="rect" ALT="Contexte" COORDS="214,65,292,93" HREF="http://tohodai.asiat-world.com/-panneau-d-affichage-f1/c-contexte-t1.htm">
<AREA SHAPE="rect" ALT="Invités" COORDS="281,102,348,127" HREF="http://tohodai.asiat-world.com/section-invites-f13/">
<AREA SHAPE="rect" ALT="Prédéfinis" COORDS="170,10,255,147" HREF="http://tohodai.asiat-world.com/-les-predefinis-f2/">
<AREA SHAPE="rect" ALT="Fiches" COORDS="322,156,381,178" HREF="http://tohodai.asiat-world.com/-vos-papiers-f3/">
<AREA SHAPE="rect" ALT="Partenariat" COORDS="224,188,329,211" HREF="http://tohodai.asiat-world.com/partenariat-f29/">
</MAP>

<MAP NAME="Tops">
<AREA SHAPE="rect" ALT="Top1" COORDS="23,43,77,91" HREF="http://www.root-top.com/topsite/kawaii/in.php?ID=336">
<AREA SHAPE="rect" ALT="Top2" COORDS="80,42,131,90" HREF="http://www.root-top.com/topsite/eri/in.php?ID=82">
<AREA SHAPE="rect" ALT="Top3" COORDS="133,48,176,89" HREF="http://www.root-top.com/topsite/asiansound/in.php?ID=65">
<AREA SHAPE="rect" ALT="Top4" COORDS="185,47,230,89" HREF="http://www.root-top.com/topsite/lawliet/in.php?ID=148">
</MAP>


</body>
</html>
</td>
<td width="35%"><blockquote><div class="title">Quoi de neuf ?</div><br><marquee style="width: 250px; height: 390px" direction="up" onmouseover=this.stop(); onmouseout=this.start(); SCROLLAMOUNT=2>» Le forum a ouvert le <b>xx.xx.xx</b><br>» Un minimum de <b>20 lignes</b> par post est requis.<br>» Vous avez <b>15 jours</b> pour postez votre fiche.<br><br><b>INFOS</b><br>La rentrée est passée depuis une semaine. Mais il va falloir encore du temps à nos coréens pour s'habituer à leur nouvelle famille !<br><br><b>TEMPERATURE</b><br>Nous sommes au <b>Printemps</b>, la température est d'environ <b>8°C le matin & 13°C l'après-midi</b>.<br><br><b>EVENTS</b><br>Les étudiants sont autorisés à créer des fraternités, histoire de créer des liens entre eux ! Un bal de rentrée aura bientôt lieu au sein de Tohodai. Trouvez-vous un(e) cavalière, c'est l'occasion de rencontrer du monde !<br><br>Veuillez nous excuser pour les bugs causés par les ongglets (disparition temporaire du QEEL, agrandissement de la PA), je vais essayer de résoudre le problème !</marquee></blockquote></td></tr></table><br><br>

<a href="http://www.root-top.com/topsite/kawaii/in.php?ID=336" class="postlink" target="_blank"><img src="http://img.root-top.com/topsite/kawaii/banner.gif" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/eri/in.php?ID=82" class="postlink" target="_blank"><img src="http://img.root-top.com/topsite/eri/banner.gif" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/asiansound/in.php?ID=65" class="postlink" target="_blank"><img src="http://img.root-top.com/topsite/asiansound/banner.gif" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/lawliet/in.php?ID=148" class="postlink" target="_blank"><img src="http://img.root-top.com/topsite/lawliet/banner.gif" border="0" alt="" /></a>

CSS :

Code:: body { cursor: crosshair }
a:hover { cursor: crosshair }

/*Déco barre navigation*/
a.mainmenu {
background-color: #a2d1d9;
font-weight: bold;
opacity: 0.5;
-moz-border-radius: 15px;
color : #ffffff;
font-style: bold;
text-shadow: #789fa6 1px 1px 3px;
font-size: 10px;
}

.forumline {
border: 0px dashed #cb99a1;
-moz-border-radius: 8px;
}

a.mainmenu:hover {
font-size: 10px;
color: #789fa6;
text-shadow: 3px 3px 3px #ffffff; }

/* Dernière colonne PA*/
.sujets_messages {
padding: 3px;
font-size: 11px;
background-color: #63714e;
-moz-border-radius: 10px;
border: 0px solid #fff4e0;
background-image: url();
text-align: center;
}

tr.post td {padding-left: 5px;} /* Espace entre avatar et post */
tr.post td {padding-right: 5px;}

a { text-decoration: none !important;
text-shadow: #000000 1px 1px 3px;
}

a:hover {
text-decoration: none !important;
color: #b1d4aa;
}

body { margin : 0 ; }
.bodylinewidth {
border-left :solid 0px ;
border-right :solid 0px ;
}

.code div { width: auto !important; }
.code { font-family: Courier new;
font-size: 11px;
color: #72838F;
line-height: 125%;
background-image: url();
border: #FFFFFF;
border-style: solid;
border: 2px dashed #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 3px ;
width: 500px;
display: block;
padding: 10px;
text-align: justify;
}

.profil_contour
{
background-color: #ffffff;
-moz-border-radius: 15px;
filter:alpha(opacity=70);
opacity:0.7;
}

.pseudos {
font-variant: small-caps;
font-size: 14px}

table.bodylinewidth {
position: relative;
border: 6px solid;
border-color: #616c4e;
-moz-border-radius: 20px;
}

.row1{
background-color: #;
background-image: url("");
background-repeat: repeat;
}
td.row2{
background-color: #;
background-image: url("");
background-repeat: repeat;
}
td.row3{
background-color: #;
background-image: url("");
background-repeat: repeat;
}

.titre {
font-size: 20px;
font-family: Georgia;
color: #b1d4aa;
text-shadow: 1px 1px 3px #000000;
text-align: justify;
letter-spacing: 2px;
font-style: italic;
}

.titre_forum {
font-family: Verdana;
font-variant: small-caps;
font-size: 15px;
text-align: justify;
padding-right: 10px;}

.profil_contour
{
background-color: #63714e;
-moz-border-radius: 15px;
}

.pseudos {
font-variant: small-caps;
font-size: 14px}

.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding: 3px;
border:0px solid black;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
cursor:pointer;
font-family: Verdana;
color: #ffffff;
font-size: 12px;
}
.onglet_0
{
background:#63714e;
border-bottom:0px solid black;

}
.onglet_1
{
background:#708767;
border-bottom:0px solid black;

}
.contenu_onglet
{
background-color:#63714e;
border:0px solid black;
margin-top:-1px;
font-family: Verdana;
color: #ffffff;
font-size: 10px;

display:none;
width: 340px;
height: 400px;
padding-left: 15px;
-moz-border-radius: 15px;

}

.image { background-image: url("http://img41.xooimage.com/files/e/1/8/gr-21283a2.png");
background-repeat: no-repeat;
background-position: right;
;
}

.stats {
color: #264301;
letter-spacing: 2px;
opacity: 10;}

.PV {
background-color: #63714e;
-moz-border-radius: 15px;
opacity: 0.7;}

.title {
letter-spacing: 2px;
font-size: 12px; }

.boite
{
height: 150px;
overflow-x: auto;
overflow-y: auto;
padding: 10px;
text-align: justify;
}

.texte_PA {
font-size: 30px;
color: #;
font-family: Learning Curve; }

.Partenaires
{
height: 127px;
width: 195px;
background-image: url("http://img44.xooimage.com/files/2/2/6/pa_04-21547dd.gif") ;
text-align center ;

}

.Vacants
{
height: 235px ;
width: 123px ;
background-image: url("http://img42.xooimage.com/files/c/3/4/pa_05-21547fb.gif") ;
overflow: auto;
}

Code de base de l'image :

Code:: <html>
<head>
<title>pa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="401" height="550" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td colspan="2">
      <img src="BrowserPreview_01.gif" width="165" height="49" alt=""></td>
   <td rowspan="2">
      <img src="BrowserPreview_02.gif" width="235" height="121" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="49" alt=""></td>
</tr>
<tr>
   <td rowspan="2">
      <img src="BrowserPreview_03.gif" width="38" height="195" alt=""></td>
   <td rowspan="2">
      <img src="BrowserPreview_04.gif" width="127" height="195" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="72" alt=""></td>
</tr>
<tr>
   <td>
      <img src="BrowserPreview_05.gif" width="235" height="123" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="123" alt=""></td>
</tr>
<tr>
   <td colspan="3">
      <img src="BrowserPreview_06.gif" width="400" height="306" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="306" alt=""></td>
</tr>
</table>

</body>
</html>

Merci d'avance x)

Créer une PA réactive / mapping

Créer une PA réactive / mapping

Sujets similaires

Sujets similaires

Partenaires Or