Bonjour

Je fais appel à vous parce que j'ai un petit problème avec le code d'effet zoom du tutoriel posté par Orange, ici. J'ai donc deux petits soucis:

- Même avec la correction dans le code donné, tout ce qui est en-dessous décale vers le bas au survol;
- Quand on survole, on dirait que l'image va à droite avant de revenir au milieu en grand...

Pour mieux comprendre, voici le lien du forum en question, en hide:


Et je vous donne le code de ma page d'accueil. C'est possible que ce soit pas très bien fait, c'est la première fois que je codais une PA un peu "complexe" comme ça ^^'

Les codes en question sont plutôt à la fin:


Puis le CSS qui va avec:
Voilà, merci d'avance si vous voulez bien m'aider, et n'hésitez pas si vous avez besoin d'informations supplémentaires .

Bonsoir,

Je n'ai pas de solution complète pour toi ce soir (trop crevé pour ça), mais la suite devrait permette à toi ou à un autre codeur d'avancer.

Ton code est assez étrange en soi... utiliser le positionnement relatif à outrance n'aide pas à se retrouver et engendre souvent des bugs ^^' Quoi qu'il en soit, le problème semble vernir de:

Code:

<div class="cssactif_tableaupartenaire"><div align="center"><div class="titrepa2">Top partenaires</div>

En retirant l'attribut align="center" de la div, tu résoudras le problème de retour et restera plus qu'à adapter la position du logo survolé en conséquence. Ceci n'est évidement pas idéal niveau affichage (positionnement relatif oblige), mais résout essentiellement le problème pour en créer un autre moins grave (procédons comme ça ^^)

Tu peux essayer de changer l'ordre de tes div de sorte à ce que la div cssactif_tableaupartenaire ne contienne que les logos (pas l'alignement ou le titre), par contre je n'ai pas testé cette dernière solution.

Voilà en espérant que ça ait pu t'aider toi ou un autre codeur qui viendra t'aider

Hello !

La méthode suggérée par Orange est la bonne x) En fait, il y a un problème dû au positionnement plus que douteux du contenu sur l'image de fond. A quoi ça servait de mettre un tableau si finalement tu positionnes tout après ? La première cellule est vide ! Les onglets sont dans la troisième cellule, mais en fait ils sont envoyés à perpète à l'opposé de l'affichage ! Le tableau des partenaires a été ajouté à la suite du code et remonté de force pour apparaitre visuellement dans la troisième cellule O_o Là, si on désactivait le CSS, l'affichage n'aurait aucun sens (très ennuyeux pour les malvoyants qui reposent sur des lecteurs d'écran et pas sur l'apparence).

Dans l'idéal il faudrait une image de fond, trois colonnes l'une après l'autre et un peu d'astuce et ça serait nettement mieux (et plus facile à maintenir également)

Bon, de toute façon, je ne vais pas refaire le code à ta place @_@ Penchons nous sur une résolution simple (mais barbare) de ton problème.

Le code contenant les partenaires est cette section :

Code:

<div class="cssactif_tableaupartenaire"><div align="center"><div class="titrepa2">Top partenaires</div><br><br><br><br>
<a href="http://thegreat-escape.ze.cx/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-796759affiliate10.jpg" /></a><a href="http://yellow-tricycle.forumactif.org/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-252306part1.png" /></a><br><a href="http://remember-austen.forumactif.com/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-640913austenlustrelien2.png" /></a><a href="http://berkeley-u.forum-actif.net/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-logo2-18a58d0.png" /></a><br><a href="http://www.yesyou-can.com/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-404926bouton2.png" /></a><a href="http://art-design.xooit.com/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-partenariat-2-1ec097b.png" /></a><br><a href="http://www.elegance-temptation.com/forum"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-ydmcv.png" /></a><a href="http://www.goldheartofficiel.com/forum"><img src="http://image.noelshack.com/fichiers/2012/39/1349029272-boutonpopheart.png" /></a><br><a href="http://communaute-admins.forumotion.com/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-logo-c10.png" /></a>

<br /><div class="textetops"><a href="http://www.help-in-design.com/t4-nos-partenaires">Plus?</a> - <a href="http://www.help-in-design.com/t6267-demande-de-partenariat">Vous?</a></div></div></div>

En sautant des lignes pour le rendre plus lisible, ce qui serait BEAUCOUP plus facile à maintenir (je suppose que vous êtes tous des masos en puissance à vouloir lire des trucs aussi illisibles), ça donne ça :

Code:

<div class="cssactif_tableaupartenaire">
   <div align="center">
      <div class="titrepa2">Top partenaires</div>
      
      <br />
      <br />
      <br />
      <br />
      
      <a href="http://thegreat-escape.ze.cx/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-796759affiliate10.jpg" /></a>
      <a href="http://yellow-tricycle.forumactif.org/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-252306part1.png" /></a>
      
      <br />

      <a href="http://remember-austen.forumactif.com/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-640913austenlustrelien2.png" /></a>
      <a href="http://berkeley-u.forum-actif.net/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-logo2-18a58d0.png" /></a>
      
      <br />

      <a href="http://www.yesyou-can.com/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-404926bouton2.png" /></a>
      <a href="http://art-design.xooit.com/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-partenariat-2-1ec097b.png" /></a>
      
      <br />

      <a href="http://www.elegance-temptation.com/forum"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-ydmcv.png" /></a>
      <a href="http://www.goldheartofficiel.com/forum"><img src="http://image.noelshack.com/fichiers/2012/39/1349029272-boutonpopheart.png" /></a>
      
      <br />

      <a href="http://communaute-admins.forumotion.com/"><img src="http://image.noelshack.com/fichiers/2012/39/1349029260-logo-c10.png" /></a>

      <br />
      <div class="textetops">
         <a href="http://www.help-in-design.com/t4-nos-partenaires">Plus?</a> - <a href="http://www.help-in-design.com/t6267-demande-de-partenariat">Vous?</a>
      </div>
   </div>
</div>

• Retire le <div align:center;> (et sa balise fermante également)
• Modifie la première div en remplaçant la classe par une autre classe de ton choix, genre .colonne3 et places-y les informations de positionnement, qui doivent être si je ne m'abuse :

Code:

.colonne3 {
   left: 603px;
    margin-bottom: -170px;
    position: relative;
    top: -396px;
    z-index: 5;
    width:208px;
}

• Vire les 4 sauts de ligne <br /> (oui, ça s'écrit avec un slash à la fin) qui ne servent à rien.
• Il faudra centrer le titre, par exemple ajouter margin: 0 auto 7px; dans la classe .titrepa2 (ce qui permet de centrer le bloc contenant le titre tout en gardant la marge de 7px que tu avais définie)
• Juste après le titre et les div qui l'encadrent, mets le code <div class="cssactif_tableaupartenaire"> (avant la liste des liens) et n'oublie pas de rajouter un </div> juste après le dernier lien.
• Corrige la classe .cssactif_tableaupartenaire en n'y mettant que le strict nécessaire, à savoir quelque chose comme ça :

Code:

.cssactif_tableaupartenaire {
   width: 120px; /* À adapter en fonction du nombre de colonnes désirées (typiquement: (NOMBRE_COLONNE * (2*MARGE)) + (4 * Largeur initiale) */
     line-height: 0px; /* À ne pas modifier */
     margin:auto; /* pour centrer le bloc à l'intérieur de son conteneur */
}

• Rectifier également le css de la classe .textetops comme pour le titre (ainsi que l'affichage des liens) pour que le texte s'affiche correctement.

Ca corrigera le problème (testé et validé avec firebug u_u')

Mon conseil serait évidemment que tu recommences du début pour faire un code propre, en t'aidant des tutoriels de CSSActif sur les bases du HTML et les techniques de codage, comme mon guide de conduite et l'article comment bien écrire son code de Nyo The Neko.

D'abord, j'ai édité ma réponse parce que j'étais peut-être un peu trop fatiguée/à fleur de peau au moment où j'ai vu ton message 'Christa et je me suis sentie un peu attaquée ^^', je tenais simplement à prévenir au cas.

Bref!
Pourquoi j'ai fait ça de cette façon:

• J'étais très serrée dans le temps donc j'ai fait comme j'ai pu sachant que je n'avais personne pour m'aider à ce moment-là :/
  
• J'ai carrément copié/collé le code pour les onglets du QEEL d'une ancienne version de mon forum, ce qui est sûrement à l'origine de la cellule vide et de la troisième colonne ramenée à gauche
  
• J'y ai ajouté des div parce que c'est la méthode qu'on m'a suggérée et qui semblait fonctionner; j'ai tenté de chercher des tutos pour coder du texte html sur une image mais sans succès (ou alors c'est moi qui les appliquais mal)
  
• Pour le mélange de table et de div, j'avais pensé faire ça en trois colonnes mais comme j'avais codé les onglets avant, rajouter une colonne pour le tableau des partenaires venait tout foirer ><

Après c'est pas le plus important; je vais tester ça et je vous reviens après, un grand merci à vous d'avoir bien voulu m'aider malgré ce code horrible ^^'

P.S. ça ne paraît peut-être pas dans ce post mais j'ai bien lu les deux topics suggérés ^^' et si j'avais le temps nécessaire, je recommencerais tout évidemment, mais ça ne sera sûrement pas possible :/.

Hello

Je rappelle que créer des forums est généralement un loisir (de même que mon poste actuel de codeuse est un loisir et non un devoir), si tu n'as pas le temps de le personnaliser, alors abstiens toi d'utiliser des codes que tu ne maîtrises pas J'ai pour principe que construire une maison à la va-vite avec du matériel de seconde main risque plus de faire du mal que du bien, c'est pareil en codage, tu perds 1000 fois plus de temps à rectifier les erreurs d'un code de mauvaise qualité que lorsque, dès le départ, tu conçois quelque chose de correct, ne serait-ce qu'en utilisant une structure de base toute faite mais propre.

Mes excuses si tu t'es sentie agressée, mais c'est au code et à la méthode que je m'en prenais, pas à toi personnellement (certes, tu es l'outil, mais j'imagine qu'en tant que débutante tu as fait tout ça un peu au hasard), mon objectif étant de te faire réfléchir sur ta façon de faire et d'essayer autant que faire se peut de réaliser un travail propre et cohérent. Sans vouloir faire des choses compliquées, le simple fait de prendre le temps de nettoyer un code de manière à ce qu'il soit lisible et relativement dépourvu de fautes de syntaxe/structure aiderait énormément au débuggage.

Enfin, et pour rappel, nous sommes ici non pour faire le travail à votre place, mais pour vous pousser à apprendre à le faire par vous même. Si tout ce que tu apprends ici c'est comment coller du scotch (virtuel) partout, tu ne vas guère progresser...

Coucou!
Je n'ai pas eu le temps d'essayer mais je voulais tout de même répondre ^^

Alors ce n'est pas un forum que j'ai créé mais un design complet + codage que je faisais pour un concours. Et j'ai été prise de court parce que je m'y attendais pas mais j'ai été prise comme graphiste sur un forum RPG qui a 5 forums en tout, donc j'ai été pas mal occupée de ce côté, en plus que la grève n'a pas repris chez moi ce qui fait que j'étais en même temps en pleine session d'examens, un peu la galère quoi xD.

Et comme j'ai dit rapidement, j'ai voulu trouver un tutoriel pour savoir le faire moi-même mais bon je n'ai pas pu, sinon je n'aime pas faire des copier-coller hein. (D'ailleurs je prends des cours sur un forum dans le but de pouvoir créer moi-même.) Mais bon je suis pas là pour vous faire une démonstration de ma personnalité xD donc j'édite quand j'aurai tenté.


Edit: Le souci des boutons qui vont à droite au survol est réglé, mais pas celui du léger décalement. Merci encore ♥