Petit up, il ne manque que ça pour ouvrir

Hey !

Amusant une demande de PA pour un forum qui dispense des cours de code Je prends néanmoins ! Par contre pour le staff, ce sont juste des images cliquables ? Et il serait bien que tu fournisses un fond vraiment vierge, sans les textes des liens utiles (par contre il faudrait nous donner la police, ou en faire des images individuelles) et sans les images du staff (là à voir, si c'est cliquable juste les détourer séparément, sinon les illustrations pour chaque uniquement). Car en fait il s'agit d'éléments individuels, l'ensemble sera placé manuellement, c'est pourquoi il faut un fond dépourvu des éléments interactifs (liens entre autre).

Bonne soirée =)

Hey! J'avoue ne pas trop comprendre , je dois fournir tout individuellement? Donc, l'image de fond n'aura aucune utilité?

Eh oui un forum qui donne des cours .. Nous reprenons templactif, mais on refait de zéro ...

Non pas tout. La base reste (comme pour le cadre "Breaking News", "Professeur dit" ...) mais pour pouvoir attribuer des liens aux images du staff par exemple il les faut à part. En revanche pour cet exemple le texte "Staff" reste. Le cadre des liens utiles reste aussi, mais il faut effacer ce qui est dedans pour l'ajouter manuellement. Le fond sert de fond à proprement parlé, et les éléments cliquables comme dit plus haut doivent être positionnés par dessus avec le lien qui correspond (ça c'est ma part du boulot), mais pour ça je dois les avoir séparément.

Pour le staff ce n'est pas forcément utile si tu ne veux aucun effet dessus (juste une image par exemple, et pas de lien).

J'essaie de te fournir ça des que je serai sur un ordi

Pas de soucis =3

Un mp a été envoyé à la créatrice :) j'attend le tout :)
Ps: pour le queel aussi :)

Voilà je dp avec ce que j'ai obtenu :) j'espère que ça ira :)

thild. a écrit:

Voila ce que ça donne www. Pour les partenaires je ne savais pas trop ce que tu voulais faire, donc j'ai mis quelque chose de simple. Pour le texte du "Professeur dit", je laisse le texte droit ou je l'incline ? J'ai passé la taille des images des plumes de 50px à 70px en revanche, sinon rien que le texte "pseudo" ne passait pas dans la bulle =/

Je termine le QEEL demain ^^

Pour le texte je dirais incliné :)

et pour les partenariats, je voyais plus tu sais comme dans le bas du forum où il est écris sélectionner un forum.. là où il y a une petite flèche et ou une liste de nom aparait? je le voyais comme ça :)

et merci beaucoup beaucoup :)

J'ai modifié l'inclinaison du texte. Par contre du coup je les place où les partenaires Oo Parce qu'au-dessus ça va faire sacrément vide, non ?

Juste les remonter un peu, ça va combler le vide un peu et comme ça ça arrivera juste au dessus du mots nos plumes partenaires quand on va cliquer sur la flèche.

oh et pour le queel la créatrice m'a redonner la même photo, mais avec fond transparent : https://nsa34.casimages.com/img/2014/07/15/140715095157647502.png

C'est modifié ^^

La pa est parfait merci beaucoup beaucoup beaucoup beaucoup :)

Je te passe les codes, dis-moi si tout fonctionne =3

CSS

Code:

/* -------------------------------- PA -------------------------------- */

/* Positionnement des liens utiles */
.liens_utiles {
  position: absolute;
  top: 14em;
  left: 3.5em;
  width: 100px;
  text-align: center;
}

/* Mise en forme des liens utiles */
.liens_utiles a {
  font-family: times new roman;
  color: #20040D !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  text-decoration: none !important;
}

/* Mise en forme des liens utiles au survol */
.liens_utiles a:hover {
  color: #856570 !important;
  text-decoration: none !important;
}

/* Positionnement des partenaires */
.partenaires_PA {
  position: absolute;
  top: 17em;
  left: 14.5em;
}

/* Positionnement des nouveautés */
.news_PA {
  position: absolute;
  top: 15.5em;
  left: 28em;
  width: 175px;
  height: 120px;
  overflow: auto;
  text-align: justify;
  font-family: times new roman;
  font-size: 11px;
}

/* Mise en forme des liens du bloc "Nouveautés" */
.news_PA a {
  color: #20040D !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  text-decoration: none !important;
}

/* Mise en forme des liens du bloc "Nouveautés" au survol */
.news_PA a:hover {
  color: #856570 !important;
  text-decoration: none !important;
}

/* Positionnement du bloc "Professeur dit" */
.professeurs {
  position: absolute;
  top: 19.5em;
  left: 49.5em;
  width: 230px;
  height: 190px;
  overflow: auto;
  text-align: justify;
  font-family: times new roman;
  font-size: 11px;
  transform: rotate(-5deg);
}

/* Positionnement et opacité de la première image du staff */
.staff_1 {
  position: absolute;
  top: 34em;
  left: 0em;
  opacity: 0.8;
}

/* Opacité de la première image du staff en hover */
.staff_1:hover {
  opacity: 1;
}

/* Positionnement et opacité de la seconde image du staff */
.staff_2 {
  position: absolute;
  top: 34em;
  left: 7em;
  opacity: 0.8;
}

/* Opacité de la seconde image du staff en hover */
.staff_2:hover {
  opacity: 1;
}

/* Positionnement et opacité de la troisième image du staff */
.staff_3 {
  position: absolute;
  top: 34em;
  left: 14em;
  opacity: 0.8;
}

/* Opacité de la troisième image du staff en hover */
.staff_3:hover {
  opacity: 1;
}

/* Info-bulle des plumes vedettes */
a.info{
  position: relative;
  z-index: 24;
  border-radius: 25px;
}
 
a.info:hover{
  z-index: 25;
}
 
a.info span{
  display: none;
  text-decoration: none !important;
}
 
a.info:hover span{
  display: block;
  position: absolute;
  top: -6em;
  left: 0em;
  width: 70px;
  height: 70px;
  border-radius: 50px;
  background-color: #20040D;
  color: #856570;
  text-align: center;
  font-weight: none;
  text-decoration: none !important;
}

/* Positionnement du contenu du bloc "Vedettes" */
.vedettes {
  position: absolute;
  top: 35em;
  left: 27.5em;
}
/* -------------------------------- FIN PA -------------------------------- */

PA

Code:

<div style="background-image: url('http://image.noelshack.com/fichiers/2014/29/1405340125-plumeartistiquepa.png'); width: 810px; height: 460px;">
   
   <div style="position: relative;">
      
      <div class="liens_utiles">
          <a href="http://plume-artistique.forumactif.org/t28-reglement-general#112">Règlement</a><br /><br /><a href="http://plume-artistique.forumactif.org/f17-presentation-de-l-artiste">Présentations</a><br /><br /><a href="http://plume-artistique.forumactif.org/c7-salons-des-groupes">Galerie</a><br /><br /><a href="http://plume-artistique.forumactif.org/f67-cours-de-graphisme">Cours <br />graphiques</a><br /><br /><a href="http://plume-artistique.forumactif.org/f68-cours-de-codage">Cours <br />codage</a>
      </div>
      
      <div class="partenaires_PA">
          <select onchange="location = this.value" style="background-color: #d3d3d3; width: 130px; color: #16161a"> <option>Nos amis</option> <option value="#">Lien</option> <option value="#">Lien 2</option> <option value="#">Lien 3</option> <option value="#">Lien 4</option> <option value="#">Lien 5</option></select>
      </div>
      
      <div class="news_PA">
          <span style="color: #856570 !important; font-size: 15px;">∞</span> Id ad ad elegerit eos mercenariae matrimonii est in illis diem incredibile apud. <a href="#">More ?</a><br /><br /><span style="color: #856570 !important; font-size: 15px;">∞</span> Id ad ad elegerit eos mercenariae matrimonii est in illis diem incredibile apud. <a href="#">More ?</a><br /><br /><span style="color: #856570 !important; font-size: 15px;">∞</span> Id ad ad elegerit eos mercenariae matrimonii est in illis diem incredibile apud. <a href="#">More ?</a><br /><br />
      </div>
      
      <div class="professeurs">
          Iura regenda parens Caesaribus patrimonii oppressas leges suis parens urbs cervices superbas efferatarum regenda oppressas superbas Caesaribus post retinacula permisit oppressas fundamenta libertatis oppressas retinacula iura superbas regenda velut et efferatarum retinacula velut dives gentium retinacula permisit velut latasque parens frugi velut et et libertatis iura liberis efferatarum urbs oppressas efferatarum latasque et velut velut venerabilis sempiterna prudens iura urbs oppressas post retinacula Caesaribus liberis prudens cervices tamquam gentium sempiterna libertatis dives permisit venerabilis et libertatis permisit cervices frugi permisit sempiterna et oppressas superbas cervices tamquam efferatarum et et superbas dives et gentium gentium retinacula permisit liberis prudens tamquam permisit. Iura regenda parens Caesaribus patrimonii oppressas leges suis parens urbs cervices superbas efferatarum regenda oppressas superbas Caesaribus post retinacula permisit oppressas fundamenta libertatis oppressas retinacula iura superbas regenda velut et efferatarum retinacula velut dives gentium retinacula permisit velut latasque parens frugi velut et et libertatis iura liberis efferatarum urbs oppressas efferatarum latasque et velut velut venerabilis sempiterna prudens iura urbs oppressas post retinacula Caesaribus liberis prudens cervices tamquam gentium sempiterna libertatis dives permisit venerabilis et libertatis permisit cervices frugi permisit sempiterna et oppressas superbas cervices tamquam efferatarum et et superbas dives et gentium gentium retinacula permisit liberis prudens tamquam permisit.
      </div>
       <img class="staff_1" src="http://image.noelshack.com/fichiers/2014/29/1405340105-plumeartistiqueliensstaff1.png" /> <img class="staff_2" src="http://image.noelshack.com/fichiers/2014/29/1405340105-plumeartistiqueliensstaff2.png" /> <img class="staff_3" src="http://image.noelshack.com/fichiers/2014/29/1405340105-plumeartistiqueliensstaff3.png" />
      <div class="vedettes">
          <a class="info"><img src="http://i39.servimg.com/u/f39/18/43/33/39/4910.png" style="width: 70px; border-radius: 50px;" /><span><br /><br />Pseudo</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/43/33/39/4910.png" style="width: 70px; border-radius: 50px;" /><span><br /><br />Pseudo</span></a>
      </div>
      
   </div>
   
</div>

Je crois qu'il y a un code dans mon css qui a un problème qui fait que les partenaires sont décalés regarde : http://plume-artistique.forumactif.org/ si non j'ai un print screen

Ca doit venir de la taille de ton forum. A toi de les positionner manuellement donc. Il faut jouer avec les valeurs "top" et "left" de :

Code:

/* Positionnement des partenaires */
.partenaires_PA {
  position: absolute;
  top: 17em;
  left: 14.5em;
}

Et de :

Code:

/* Positionnement du contenu du bloc "Vedettes" */
.vedettes {
  position: absolute;
  top: 35em;
  left: 27.5em;
}

Si tu actualise c'est mieux non?

http://plume-artistique.forumactif.org/

Oui. Normalement ça s'adapte à chaque écran, mais comme les info-bulles sont en relative elles ne sont pas "bloquées" à leur place. Pour les partenaires ça doit être un cas particulier également.

ah :S

mais j'ai essayer de replacer le tout :)

Oui oui, j'explique juste le pourquoi du comment =3
Donc c'est bon, on peut clore ?

oui on peut :)

tu as pris l'image du queel que j'ai mis ici?

Oui oui. Penses à ajouter l'icône "terminé" au premier message

d'Accord merci merci beaucoup pour ton travail :)