Sujets similaires

Bonjour bonsoir,

Petit problème avec le code de la "page d'accueil" (ou plutôt message d'accueil) de mon forum que ma co-admin a fait. http://brotherhood.forumsactifs.com/forum
Des images qui sont censées se mettre en dessous du message "STAFF" viennent se mettre sur la bannière du forum, en haut de la page.
Autre phénomène étrange : ma co-admin a demandé de l'aide sur un autre forum où des personnes lui ont donné des codes qui marchaient très bien sur leurs forums test. Or, quand elle a essayé sur le notre, cela ne marche pas et pire encore, cela déforme complètement la page d'accueil.
Donc voici le code html de notre page d'accueil :

Code:: <center><div style="position:relative; width:800px; height:700px;"><map id="imgmap20121019185344" name="imgmap20121019185344"><area shape="rect" alt="" title="" coords="60,123,189,189" href="http://brotherhood.forumsactifs.com/t960-reglement" target="" /><area shape="rect" alt="" title="" coords="201,124,387,189" href="http://brotherhood.forumsactifs.com/f52-scenarii-du-forum" target="" /><area shape="rect" alt="" title="" coords="402,124,530,187" href="http://brotherhood.forumsactifs.com/t961-contexte" target="" /><area shape="rect" alt="" title="" coords="542,126,619,187" href="" target="" /><area shape="rect" alt="" title="" coords="628,125,715,189" href="" target="" /><area shape="rect" alt="" title="" coords="136,347,187,366" href="" target="" /><area shape="rect" alt="" title="" coords="274,323,365,340" href="" target="" /><area shape="rect" alt="" title="" coords="468,277,593,291" href="" target="" /><area shape="rect" alt="" title="" coords="586,294,655,308" href="" target="" /><area shape="rect" alt="" title="" coords="233,307,263,319" href="" target="" /></map>
<img width="800px" height="700px" border="0" usemap="#imgmap20121019185344" src="http://img11.hostingpics.net/pics/554418PAchange.png">

<marquee style="position: absolute;opacity: 0.6;top: 390px; left: 585px; width:170px; height:140px;" align="right" direction="down" scrollamount="3">

xx/xx : Ouverture du forum </br>
xx/xx : Texte </br>
xx/xx : Texte </br>
xx/xx : Texte </br>
xx/xx : Texte </br>
xx/xx : Texte </br>
</marquee>

<table style="position: absolute; top: 410px; left: 290px; border:0px;">

<tr><td><div class="infopa"><img src="http://img11.hostingpics.net/pics/780870gaspy.png"/>
<span><center> ★ Nathan Eatson
<img src="http://img11.hostingpics.net/pics/127767986.gif">
<font style="font-size:10px; font-family: Georgia; font-style:italic;">Administratrice</font></center></span></div></td>

<td><div class="infopa"><img src="http://img11.hostingpics.net/pics/567149evan.png"/>
<span><center> ★ Jessie Kriesel
<img src="http://img11.hostingpics.net/pics/834028462.gif">
<font style="font-size:10px; font-family: Georgia; font-style:italic;">Co-Administratrice</font></center></span></div></td>

<td><div class="infopa"><img src="http://img11.hostingpics.net/pics/474722daisy.png"/>
<span><center> ☆ Ellen Thursday
<img src="http://img11.hostingpics.net/pics/653162304.gif">
<font style="font-size:10px; font-family: Georgia; font-style:italic;">Modératrice</font></center></span></div></td>

<td><div class="infopa"><img src="http://img11.hostingpics.net/pics/161523alex.png"/>
<span><center> ☆ Chace Thompson
<img src="http://img11.hostingpics.net/pics/487113145.gif"/>
<font style="font-size:10px; font-family: Georgia; font-style:italic;">Modératrice</font></center></span></div></td>

<td><div class="infopa"><img src="http://img11.hostingpics.net/pics/979458jenn.png"/>
<span><center> ☆ Kate Ellison
<img src="http://img11.hostingpics.net/pics/189012351.gif">
<font style="font-size:10px; font-family: Georgia; font-style:italic;">Modératrice</font></center></span></div></td>

</table></div></center>

et le CSS

Code:: /* infobulles PA */
.infopa{
position: relative;
z-index: 0;}

.infopa:hover{
background-color: transparent;
z-index: 50;}

.infopa span{
position: absolute;
background-color: #a4dae5;
padding: 2px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infopa span img{
border: 1px;
padding: 1px;}

.infopa:hover span{
visibility: visible;
top: 90px;
left: 35px;
width: 200px ;
color: dodgerblue;
border: 1px solid white;
font-family: Georgia;
font-size: 10px;}

.infopa img{max-width: 160px;}
/* FIN */

Après, ce n'est pas moi qui ai codé cette partie, donc je sers de messager plus qu'autre chose mais ça me fera jamais de mal.
Si besoin, j'essaierai d'obtenir les codes "qui fonctionnent" qu'on a donné à ma co-admin.

Merci d'avance Element de la page d'accueil sur bannière du forum... 2931871781

Element de la page d'accueil sur bannière du forum... 2931871781

Bonjour !

Il serait peut être un peu plus utile de nous dire quel est le problème (avec un screen par exemple) et ce que tu as tenté toi même pour le corriger, parce que nous donner le code de quelqu'un d'autre en disant "ça marche pas" c'est pas super x)

Tu diras d'ailleurs au quelqu'un d'autre en question que son code est mauvais, et ce, malheureusement, dès la première ligne.

En attendant, je te conseille de lire Le guide de bonne conduite à l'usage des codeurs et Comment bien écrire son code pour pour :
- Rajouter des sauts de lignes et indentations pour aider à la lisibilité,
- De retirer TOUT le CSS éparpillé partout dans le HTML et de créer des classes pour respecter le principe de séparation du fond de la forme en HTML/CSS.
- Rajouter les balises de fermeture manquantes (le nettoyage plus haut ayant aidé à les repérer)

Une fois ce travail fait, redonnes nous le code nettoyé (si le problème ne s'est pas résolu simplement par ce simple nettoyage)

Bon courage Wink

Ah, oui, pour le problème des images du staff, c'est simplement à cause du positionnement absolu de la table x) Faut vraiment que je me décide à faire un tutoriel pour expliquer aux gens comment ça marche XD

Hummm... Merci ! Le screen n'aurait pas été très clair je pense, surtout que notre problème résultait surtout du fait que sur d'autres forums cela marchait et non sur le notre. Donc je ne me contentai pas de dire "ça ne marche pas" mais de demander d'où venait le problème pour que ça ne marche pas d'un forum à l'autre. Et si je ne fais que passer un code d'une autre personne, c'est parce qu'on préfère représenter le forum plutôt qu'elle s'inscrive et abandonne son compte sur CSS-Actif (non pas que CSS-Actif ne pourrait pas lui plaire mais je comprends qu'elle veuille pas faire un compte juste pour un problème Razz

)

BREEEF! J'ai fait un peu de nettoyage par moi-même pour lui rendre plus clair son code (car je sais que ma co-admin ne fait pas vraiment attention à remplir la feuille de CSS, peut-être par flemme ? Je sais pas mais c'est moi qui ai payé après Element de la page d'accueil sur bannière du forum... 174114

Element de la page d'accueil sur bannière du forum... 174114

) et je lui ai transmis ton message. Résultat : problème réglé sous tous les navigateurs sauf IE...

Code:: <center><div class="mappa">
<map id="imgmap20121019185344" name="imgmap20121019185344">

<area shape="rect" alt="" title="" coords="60,123,189,189" href="http://brotherhood.forumsactifs.com/t960-reglement" target="" />
<area shape="rect" alt="" title="" coords="201,124,387,189" href="http://brotherhood.forumsactifs.com/f52-scenarii-du-forum" target="" />
<area shape="rect" alt="" title="" coords="402,124,530,187" href="http://brotherhood.forumsactifs.com/t961-contexte" target="" />
<area shape="rect" alt="" title="" coords="542,126,619,187" href="" target="" />
<area shape="rect" alt="" title="" coords="628,125,715,189" href="" target="" />
<area shape="rect" alt="" title="" coords="136,347,187,366" href="" target="" />
<area shape="rect" alt="" title="" coords="274,323,365,340" href="" target="" />
<area shape="rect" alt="" title="" coords="468,277,593,291" href="" target="" />
<area shape="rect" alt="" title="" coords="586,294,655,308" href="" target="" />
<area shape="rect" alt="" title="" coords="233,307,263,319" href="" target="" />

</map>

<img class="fondpa" usemap="#imgmap20121019185344" src="http://img11.hostingpics.net/pics/554418PAchange.png">

<marquee class="newspa" direction="down" scrollamount="4">

xx/xx : Ouverture du forum </br>
xx/xx : Texte </br>
xx/xx : Texte </br>
xx/xx : Texte </br>
xx/xx : Texte </br>
xx/xx : Texte </br>
</marquee>

<table class="tablebullepa">

<tr>

<td><div class="infopa">
<img src="http://img11.hostingpics.net/pics/780870gaspy.png"/>
<span>
<center>
★ Nathan Eatson
<img src="http://img11.hostingpics.net/pics/127767986.gif">
<font class="staffpa">Administratrice</font>
</center>
</span>
</div>
</td>

<td><div class="infopa">
<img src="http://img11.hostingpics.net/pics/567149evan.png"/>
<span><center> ★ Jessie Kriesel
<img src="http://img11.hostingpics.net/pics/834028462.gif">
<font class="staffpa">Co-Administratrice</font>
</center>
</span>
</div>
</td>

<td><div class="infopa">
<img src="http://img11.hostingpics.net/pics/474722daisy.png"/>
<span><center> ☆ Ellen Thursday
<img src="http://img11.hostingpics.net/pics/653162304.gif">
<font class="staffpa">Modératrice</font>
</center>
</span>
</div>
</td>

<td><div class="infopa">
<img src="http://img11.hostingpics.net/pics/161523alex.png"/>
<span><center> ☆ Chace Thompson
<img src="http://img11.hostingpics.net/pics/487113145.gif"/>
<font class="staffpa">Modératrice</font>
</center>
</span>
</div>
</td>

<td><div class="infopa"><img src="http://img11.hostingpics.net/pics/979458jenn.png"/>
<span><center> ☆ Kate Ellison
<img src="http://img11.hostingpics.net/pics/189012351.gif">
<font class="staffpa">Modératrice</font>
</center>
</span>
</div>
</td>
</tr>
</table>
</div>
</center>

Code:: /* PA */

.mappa {
position:relative;
width:800px;
height:700px;
}

.fondpa {
width:800px;
height:700px;
border:0;
}

.newspa {
position: relative;
opacity: 0.6;
top: -300px;
left: 270px;
width:180px;
height:130px;
}

.tablebullepa {
position: relative;
top: -280px;
left: 290px;
border:0px;
}

.staffpa {
font-size:10px;
font-family: Georgia;
font-style:italic;
}

/* fin */

/* infobulles PA */
.infopa{
position: relative;
z-index: 0;}

.infopa:hover{
background-color: transparent;
z-index: 50;}

.infopa span{
position: absolute;
background-color: #a4dae5;
padding: 2px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infopa span img{
border: 1px;
padding: 1px;}

.infopa:hover span{
visibility: visible;
top: 90px;
left: 35px;
width: 200px ;
color: dodgerblue;
border: 1px solid white;
font-family: Georgia;
font-size: 10px;}

.infopa img{max-width: 160px;}
/* FIN */

Je ne sais pas si j'ai raté quelque chose dans le code à force de le relire ou si je ne connais pas une certaine propriété qui ne serait pas universelle à tous les navigateurs (ou que j'aurai oublié).
IE, toujours IE. Element de la page d'accueil sur bannière du forum... 523658

Element de la page d'accueil sur bannière du forum... 523658

EDIT: Screen plus utile cette fois-ci

Spoiler:

Alors un petit coup de HTMLTidy (DirtyMarkup --> Doctype :none, Default Output : XHTML, Output : Code Fragment, Indent with: tabs), ça nous donne ça, ce qui rend le code le code vachement plus lisible Wink

:

Code:: <div class="mappa">
<map id="imgmap20121019185344" name="imgmap20121019185344">
   <area alt="" coords="60,123,189,189" href="http://brotherhood.forumsactifs.com/t960-reglement" shape="rect" target="" title="" />
   <area alt="" coords="201,124,387,189" href="http://brotherhood.forumsactifs.com/f52-scenarii-du-forum" shape="rect" target="" title="" />
   <area alt="" coords="402,124,530,187" href="http://brotherhood.forumsactifs.com/t961-contexte" shape="rect" target="" title="" />
   <area alt="" coords="542,126,619,187" href="" shape="rect" target="" title="" />
   <area alt="" coords="628,125,715,189" href="" shape="rect" target="" title="" />
   <area alt="" coords="136,347,187,366" href="" shape="rect" target="" title="" />
   <area alt="" coords="274,323,365,340" href="" shape="rect" target="" title="" />
   <area alt="" coords="468,277,593,291" href="" shape="rect" target="" title="" />
   <area alt="" coords="586,294,655,308" href="" shape="rect" target="" title="" />
   <area alt="" coords="233,307,263,319" href="" shape="rect" target="" title="" />
   
</map>

<img class="fondpa" src="http://img11.hostingpics.net/pics/554418PAchange.png" usemap="#imgmap20121019185344" />

<marquee class="newspa" direction="down" scrollamount="4">
   xx/xx : Ouverture du forum<br />
   xx/xx : Texte<br />
   xx/xx : Texte<br />
   xx/xx : Texte<br />
   xx/xx : Texte<br />
   xx/xx : Texte<br />
</marquee>

<table class="tablebullepa">
   <tr>
      <td>
         <div class="infopa">
            <img src="http://img11.hostingpics.net/pics/780870gaspy.png" />
            <span>
               ★ Nathan Eatson
               <img src="http://img11.hostingpics.net/pics/127767986.gif" />
               Administratrice
            </span>
            <br />
         </div>
      </td>

      <td>
         <div class="infopa">
            <img src="http://img11.hostingpics.net/pics/567149evan.png" />
            <span>
               ★ Jessie Kriesel
               <img src="http://img11.hostingpics.net/pics/834028462.gif" />
               Co-Administratrice
            </span>
            <br />
         </div>
      </td>

      <td>
         <div class="infopa">
            <img src="http://img11.hostingpics.net/pics/474722daisy.png" />
            <span>
               ☆ Ellen Thursday
               <img src="http://img11.hostingpics.net/pics/653162304.gif" />
               Modératrice
            </span>
            <br />
         </div>
      </td>

      <td>
         <div class="infopa">
            <img src="http://img11.hostingpics.net/pics/161523alex.png" />
            <span>☆ Chace Thompson
               <img src="http://img11.hostingpics.net/pics/487113145.gif" />
               Modératrice
            </span>
            <br />
         </div>
      </td>

      <td>
         <div class="infopa">
            <img src="http://img11.hostingpics.net/pics/979458jenn.png" />
            <span>
               ☆ Kate Ellison
               <img src="http://img11.hostingpics.net/pics/189012351.gif" />
               Modératrice
            </span>
            <br />
         </div>
      </td>
   </tr>
</table>
</div><br />

Oui alors, le HTMLTidy a retiré quelques trucs, me diras-tu :
• Tous les <center> ont été virés, c'est normal puisqu'il s'agit d'une balise obsolète. Utilisez la propriété text-align:center pour centrer du texte, et margin:auto; pour centrer des blocs si nécessaire (dans le CSS bien entendu).
• Même chose également pour les balises <font> qui sont à ne surtout pas utiliser, là encore vous devez utiliser des propriétés CSS au bon endroit. Utilisez un span à la place (et là vous allez dire qu'il y a un bug dans l'infobulle si on y met un span, je répondrai que le code infobulles donné sur CSSActif est juste et prévoit ce cas de figure, contrairement à celui que vous avez utilisé x) ) ou bien donnez la mise en page que vous avez attribuée à .staffpa au span qui constitue votre infobulle.

Côté HTML, rien à signaler, le code nettoyé est correct.

Notre problème ici est que nous voulons positionner la table contenant la liste du staff sur l'image de fond @_@

Pour ça, il faut que l'image de fond en question soit positionnée en relatif... check.
Avec les dimensions de l'image ... check.
Les différents blocs (news, staff) destinés à être placés sur l'image de fond doivent être dans la <div> de classe .mappa ... check
Et ces blocs doivent également être positionnés en absolu, puisqu'ils seront positionnés par rapport à l'image de fond... . error found

Ah, nous avons trouvé le bug dans la matrice *.*

(J'en ai trouvé également un autre en allant sur ton forum : apparemment le div associé à la classe .mappa se ferme avant les blocs contenant les news et le staff. Il faudra vérifier ça.)

Le principe est assez proche de l'actuel, sauf qu'un positionnement relatif n'est pas conseillé dans le cas qui nous préoccupe.

La classe .mappa englobe tout le message d'accueil, puis les différents "sous blocs" (sauf l'image) seront à positionner par dessus à l'aide d'un positionnement absolu. Les propriétés top et left (ou bottom, ou right, bref les propriétés de positionnement) agiront alors [u]par rapport aux bords de la div de classe .mappa, ce qui correspond en principe aux bords de l'image.

Je te laisse tester sur la base de cette explication ou tu as besoin d'en savoir plus ?

J'ai expliqué (en vain) le principe du positionnement relatif et absolu dans ce sujet (normalement le lien pointe pile sur le message en question), n'hésite pas à aller lire les explications sur les étapes 1 et 2 pour voir ce qu'il en est.

Bonsoir,

La réponse de 'Christa est-elle satisfaisante ? Ton problème est-il toujours d'actualité ? Sans nouvelle de ta part sous cinq jours, ce sujet sera verrouillé.

Bonne soirée. Smile

Vu que les double-post, c'est vraiment pas terrible, je me suis permise de supprimer mon message précédent.

Alors, j'ai fait tout ce que tu m'as dit et hallelujah, ça marche, sous tous les navigateurs et sous les deux résolutions d'écran qui étaient à ma disposition et qui étaient largement différents.

Par contre, je n'ai pas trouvé l'erreur de div que tu signalais mais ça ne semble pas avoir posé de problème dans tous les cas.

Par contre, j'ai remarqué un nouveau bug ._. mon image principal est maintenant décentrée par rapport au reste du forum. J'avais déjà eu ce problème mais impossible de me rappeler comment j'avais réglé ça.

EDIT: ok, au temps pour moi, j'avais oublié de rajouter le margin:auto; ! Element de la page d'accueil sur bannière du forum... 3333627970

Element de la page d'accueil sur bannière du forum... 3333627970

*débile* Merci ! Je pense que le problème peut être considéré comme résolu

Héhé, ravie d'avoir pu t'aider (sans avoir touché une seule ligne de code de mon côté mouhahahahahaha !)

Pense à marquer ce sujet comme étant [Résolu] dans son titre pour aider le travail des modérateurs Wink

Et bien moi je dis : bravo Jusuchin.

Et j'archive.
Olé.

Element de la page d'accueil sur bannière du forum...

Element de la page d'accueil sur bannière du forum...

Sujets similaires

Sujets similaires

Partenaires Or