Sujets similaires

Bonsoir à tous,

J'ai découvert sur votre forum un super tuto que j'ai réussi à suivre jusqu'au bout et à installer sur un forum Xooit. Je suis vraiment fière d'être arrivée jusque là, MAIS si je viens vous voir, c'est bien parce qu'il y a un petit quelque chose qui cloche. =(

Donc le tuto que j'ai suivi est celui-ci : http://www.css-actif.com/t5597-realiser-une-pa-reactive-mapping

J'ai tout compris et je me débrouille assez bien dans la modification du CSS maintenant, je vous montre le résultat que j'obtiens :

http://dream-design.xooit.com/index.php

Il n'y a pas de séparation, tout est nickel mais je souhaiterais enfaite déplacer le texte que j'ai ajouté à la main, dans la petite case "News du moment" au-dessus des partenaires.

Et la partie concernant mon CSS se trouve dans le même template :

Code:

.News
{
height: 401px ;
width: 800px ;
background-image: url("http://imageshack.us/a/img195/8448/accueilgali01.gif") ;
text-align center ;
overflow: auto ;
}

Je voudrais savoir si avec un code CSS, je pourrais déplacer mon texte vers l'endroit citée plus haut, ou s'il n'est pas du tout possible de faire quelque chose ? Car quand j'utilise Padding ou Margin, tout mon bloc se sépare. =(

J'espère pouvoir trouver la solution grâce à vous et je vous remercie de tout coeur pour l'attention portée à ce message. 1000 merci. =)

Bonjour,

Je suis inquiète de ce que je lis dans ton template, pourquoi a-t-on l'intégralité des déclarations de fin et de début de document HTML (le doctype, les balises html, head et body) alors qu'un template est un "morceau" de document complet ? Dans ForumActif, les deux seuls templates contenant ces codes sont overall_header et overall_footer.

Si tu as placé ta page d'accueil dans le template overall_header, retire la immédiatement. Les forums Xooit ont un template fait expressément pour ça : welcome_message.tpl

Il te faut donc remettre ton template overall_header à zéro et aller éditer le template welcome_message pour y placer ton message d'accueil.

Il est possible de faire ce que tu demandes, mais pour ça, il va falloir que tu étudies les joies du positionnement relatif et absolu. Et que tu laisses tomber le mapping, qui n'est pas accessible pour un sou et extrêmement difficile à maintenir.

De surcroit, ce tutoriel est périmé (je vais d'ailleurs l'archiver) et non adapté.

Hello,

Je tiens à te remercier pour ta réponse et sa rapidité. =)
J'ai déplacé mon code dans la bonne partie, j'te remercie, je n'étais pas au courant de la spécificité d'une template pour la page d'accueil.

En ce qui concerne le positionnement relatif et absolu, aurais-tu un tuto, un lien qui pourrait m'aider à le comprendre, car je n'en ai jamais entendu parler. =(

Merci encore pour tes précisions, à bientôt. =)

J'ai une question:Ton forum n'est pas une palpable copie de art-design.xooit.fr ?

Ally > Dans la mesure où Art Design est non seulement indiqué dans son avatar, mais également dans le lien de son site, j'ose imaginer que le forum montré ici est une version de test.

Lora7 > J'ai un tutoriel sur le feu mais au rythme où j'avance il ne sortira pas avant longtemps. Tu pourrais te renseigner en allant lire les articles sur le positionnement du site du zéro et AlsaCréations.

ALLY DESIGN : Christa a tout juste, je suis l'administratrice du forum ART-DESIGN et ceci est mon forum de test pour les versions futurs. =)

CHRISTA : J'te remercie pour ta réponse. Je vais de ce pas lire les deux liens que tu m'as cité. Mais si j'ai une questions les concernant, est-ce que je dois poser ma question dans ce sujet ou en ouvrir un nouveau ?

Merci pour touuuuuut. =)

Bonsoir,

Vu que ça concerne un tutoriel ayant un rapport avec l'objectif de ce sujet, je ne pense pas qu'il soit nécessaire d'en ouvrir un nouveau. ^^

Grâce aux liens conseillé, j'ai pu obtenir ce que je recherchais, un grand merci pour ton aide Christa ! Mon problème est résolu !
Quelle efficacité. =) 1000 mercis.

Je sais pas si tu sais mais sur un grand écran ton texte s'affiche un peu n'importe où...

Ha bah non, ça je savais pas. =( ! J'me suis basée sur plusieurs navigateurs différents mais pas sur la taille des écrans. Est-ce que je peux te montrer mon template, pour voir si tu trouves une erreur, car là, je ne sais vraiment pas d'où ça peut venir... =( Ce serait vraiment gentil...
Moi qui croyais avoir tout compris...

Ça marcherait mieux si tu définissais ton message d'accueil (PA) comme étant en position relative, et que tu positionnais ton contenu par rapport à ce message d'accueil. En gros, si tu faisais quelque chose comme ça :

Code:: <div class="messageAccueil">

<div class="lesNews">

</div>
</div>

Et dans le CSS tu précises que la classe .messageAccueil a un positionnement relatif, et que la classe .lesNews a un positionnement absolu (et tu n'as besoin que de deux valeurs pour faire ce positionnement, une valeur verticale (top ou bottom) et une valeur horizontale (left ou right))

J'espère également que tu as pensé à retirer les doctype, head, html et body du code de ton message d'accueil Wink

Ohhh tu es super, merci de me guider comme ça !
J'ai fait les modifications que tu dis. Maintenant, c'est vrai que je ne saurais pas si ça marche sur des ordis plus grands.. =/

Voici ma template :

Code:

<br /><br />
<table width="100%" cellspacing="1" border="0" class="forumline">
<tr>
</tr>
<tr>


<marquee behavior="scroll" direction="{WDIR}" scrollamount="{WAMOUNT}" scrolldelay="{WSPEED}" height="{WHEIGHT}" style="height:{WHEIGHT}px" onmouseover="this.stop()" onmouseout="this.start()">

<span class="genmed">{WMESSAGE}</span>

</marquee>

</td>
</tr>
<div class="messageAccueil"><img src="http://img91.xooimage.com/files/7/e/9/page-d-accueil-gali-3aacdba.png" alt="react" usemap="#react" style="border: 0;"><div class="News"><marquee id="id1"direction="up" scrollamount="2" height="120" width="230"><span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"><b>1.</b> La version de ce mois a été réalisé par la talentueuse <a href="http://art-design.xooit.com/profile.php?mode=viewprofile&u=2233">Gali</a>.
<br><b>2.</b> N'oubliez pas de participer au challenge en cours, <a href="http://art-design.xooit.com/t14559-Challenge-82.htm">c'est par ici</a>.
<br><b>3.</b> Vous pouvez également participer au concours du mois <a href="http://art-design.xooit.com/t14467-Concours-n-30-D-cembre.htm">par ici</a> ou simplement voter pour votre création préférée en allant <a href="http://art-design.xooit.com/t14466-VOTES-Concours-n-29-Novembre.htm">ici</a>.
<br><b>4.</b> Si vous avez le moindre souci sur le forum, vous pouvez contacter une <a href="http://art-design.xooit.com/groupcp.php?g=486&rci=0d341cff12601a91cea41b5d888fb172">administratrice</a> par MP.
<br><br><b><center>BONNE VISITE SUR ART-DESIGN</center></b> </marquee><map name="react">

<AREA SHAPE="rect" ALT="10in20" COORDS="59,576,127,599" HREF="http://art-design.xooit.com/f195-Concours-10in20.htm">
<AREA SHAPE="rect" ALT="Cover Facebook" COORDS="143,571,288,594" HREF="http://art-design.xooit.com/f265-o-CONCOURS-font-color-e03303-FACEBOOK-font-o.htm">
<AREA SHAPE="rect" ALT="Concours du Mois" COORDS="303,566,472,588" HREF="http://art-design.xooit.com/f159-o-Concours-du-mois-o.htm">
<AREA SHAPE="rect" ALT="Challenges" COORDS="485,560,595,581" HREF="http://art-design.xooit.com/f82-Defis.htm">
<AREA SHAPE="rect" ALT="Cours Graphiques" COORDS="602,553,770,576" HREF="http://art-design.xooit.com/f210-o-COURS-GRAPHIQUES-o.htm">

<AREA SHAPE="rect" ALT="Help in Design" COORDS="498,456,542,476" HREF="http://help-in-design.1fr1.net">
<AREA SHAPE="rect" ALT="Les mystères de l'Amour" COORDS="538,427,579,448" HREF="http://les-mysteres-de-lamour.xooit.com">
<AREA SHAPE="rect" ALT="CréaMania" COORDS="572,456,611,475" HREF="http://creamania.superforum.fr">
<AREA SHAPE="rect" ALT="CandyArt" COORDS="606,429,648,449" HREF="http://candy-art.xooit.com">
<AREA SHAPE="rect" ALT="NeverUtopia" COORDS="640,457,678,477" HREF="http://www.never-utopia.com">
<AREA SHAPE="rect" ALT="SignAvat" COORDS="676,430,716,452" HREF="http://signavat.xooit.com">
<AREA SHAPE="rect" ALT="ArtSoul" COORDS="494,509,532,527" HREF="http://www.artsoul.fr">
<AREA SHAPE="rect" ALT="Berkeley U" COORDS="528,481,567,502" HREF="http://www.berkeley-u.com">
<AREA SHAPE="rect" ALT="HouseArrest" COORDS="562,508,602,529" HREF="http://housearrest.c.la/">
<AREA SHAPE="rect" ALT="Pretty Little Liars France" COORDS="602,480,640,502" HREF="http://prettylittleliars.forumactif.com/">
<AREA SHAPE="rect" ALT="CSS Actif" COORDS="631,506,670,530" HREF="http://www.css-actif.com/">
<AREA SHAPE="rect" ALT="Demande de partenariat" COORDS="666,484,710,501" HREF="http://art-design.xooit.com/f228-o-DEMANDES-IDEES-o.htm">

<AREA SHAPE="rect" ALT="Galerie coup de coeur" COORDS="215,430,433,541" HREF="http://art-design.xooit.com/t12754-One-direction.htm">

<AREA SHAPE="rect" ALT="Facebook" COORDS="73,499,132,552" HREF="http://www.facebook.com/artdesign.xooit"></div></div>

</table>

Ainsi que mon CSS :

Code:

.News
{
position : absolute;
text-align : justify ;
font-size : 12px;
overflow: auto ;
bottom: 250px;
right: 110px;
}

.messageAccueil
{
position : relative;
}

Est-ce que tu penses que j'ai tout de même besoin d'ajouter des valeurs pour Left et bottom (par exemple) pour ma partie messageAccueil qui se positionne juste sans rien faire ?

En tout cas, merci pour tout, j'aurais jamais pu trouver ça toute seule. =)

La propriété de positionnement relative permet juste de définir ton élément comme étant un élément "de référence" (tout ce qui sera en absolu à l'intérieur de l'élément sera positionné par rapport à lui), donc non, tu n'as pas besoin de rajouter top/left/right/bottom. Le positionnement relatif ne doit jamais être utilisé pour positionner un bloc (juste pour le décaler pour faire un effet particulier). Il te faut juste préciser la largeur et la hauteur de ton bloc News par contre... j'avais fait un schéma ya longtemps pour illustrer ça... Ah ! le voilà. Et également, fixer les dimensions du bloc .messageAccueil pour qu'elles soient identiques à celles de l'image.

Par contre ton code global est faux ^^'

Je t'invite à suivre quelques cours de HTML/CSS, la structure d'un tableau, par exemple, est obligatoirement la suivante :

Code:: <table>
<tr>
<td> ... </td>
</tr>
</table>

Une table contient des lignes (tr) qui contiennent des cellules (td). En l’occurrence ici il manque pas mal de balises...

De même, tu as oublié de fermer la balise map avec </map>, juste après la définition de toutes les zones cliquables !!

Grosso modo, tu devrais plutôt avoir un code de cette forme là (sans les tables ni rien) :

Code:: <div class="messageAccueil">
<img src="http://img91.xooimage.com/files/7/e/9/page-d-accueil-gali-3aacdba.png" alt="accueil" usemap="#react" />
<div class="News">

</div>
</div>


<map name="react">

</map>

En principe il fonctionnerait sans problème.

---

En fait, tu pourrais même remplacer toute la partie des news (les balises marquee et leur contenu) par ceci :

Code:: 
<marquee behavior="scroll" direction="{WDIR}" scrollamount="{WAMOUNT}" scrolldelay="{WSPEED}" height="{WHEIGHT}" style="height:{WHEIGHT}px" onmouseover="this.stop()" onmouseout="this.start()">

<span class="genmed">{WMESSAGE}</span>

</marquee>

Et normalement tu pourras ajouter tes news ainsi que les réglages de défilement dans la partie "message d'en-tête" de ton panneau admin, mais je peux pas tester vu que mon forum de test me fait un caprice (et puis bon, fondamentalement notre spécialité ici est le support ForumActif, Xooit n'est pas concerné)

Ou bien en gardant tes propres balises marquee (et donc ton propre réglage), tu n'as besoin que de {WMESSAGE} et comme ça tu peux mettre tes news à jour directement en passant par "message d'en-tête" dans ton panneau admin plutôt qu'en éditant les templates.

Enfin bref, voilà. Pas besoin de tableau, en principe.

Hello !
Je viens aux nouvelles : ton problème est-il toujours d'actualité ?
Si nous n'avons pas de réponse dans 4 jours, il sera considéré comme résolu !
Merci de ta compréhension Problème avec le tuto "Réaliser une PA réactive MAPPING" 926145

Problème avec le tuto "Réaliser une PA réactive MAPPING" 926145

Yop !
Le délai étant dépassé, je considère ce sujet comme résolu !
Merci de ta compréhension Problème avec le tuto "Réaliser une PA réactive MAPPING" 926145

Problème avec le tuto "Réaliser une PA réactive MAPPING"

Problème avec le tuto "Réaliser une PA réactive MAPPING"

Sujets similaires

Sujets similaires

Partenaires Or