Problème avec le code de ma PA

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec le code de ma PA

Message par Shiyami le Mer 17 Mai 2017 - 14:04

Bonjour à tous !
Je me suis mise il y a peu au codage de ma page d'accueil, car je voulais passer une commande mais les forums d'entraide ont un système soit lent, soit basés sur un système de dépense et de gain de points, et je suis assez impatiente donc j'ai commencé à me lancer dans le codage toute seule.

1) Je me heurte à un problème (pas étonnant, je suis débutante) : le blocnews se retrouve sur mon blocstaff, or je voudrais qu'il se retrouve juste en dessous comme sur cette image :



Voici le code :

Code:
<style type="text/css">
    .blocprincipal {
        width:1019px;  /*largeur du bloc*/
        height: 474px;
        background-color:RGB(154,204,255);
        position: absolute;
        text-align: justify;
        font-family: Georgia;
        position:absolute;
    }
  
   .blocstaff {
  width:349px;
  height:114px;
  background-color:white;
  text-align: justify;
  font-family: Georgia;
  font-size: 12pt;
  margin-left: 10px;
  margin-bottom: -227px;
  position:absolute;
  }
  
  .blocnews {
  width:349px;
  height:111px;
  blackground-color:white;
  text-align: justify;
  font-size: 12pt;
  font-family: Georgia;
  margin-left: 10px;
  margin-bottom: -166px;
  position:absolute;
  overflow:auto;
  }
</style>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="fr" xml:lang="fr">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body><div class="blocprincipal"><img src="http://zupimages.net/up/17/20/m2hf.jpg" />
  <div class="blocstaff"><center><b><font size="18pt"; face="Arial"; color="lightblue">STAFF</font></b></center>
  </div><div class="blocnews">je suis là
</div></body>
</html>

2) Par ailleurs, j'aimerai savoir comment faire pour faire, au passage de la souris sur la PA ceci pour les images du staff, les images de l'intrigue et événement, et pour les images "v o t e s". De même, comment placer les images TOP PARTENAIRES ?

 
Normal


Au survol de la souris


3) Dernier soucis, je n'arrive pas à changer la taille de la police d'écriture de "STAFF", je n'arrive pas à la rétrécir...

Merci aux bonnes âmes qui voudront m'aider !


Dernière édition par Shiyami le Mar 23 Mai 2017 - 22:28, édité 1 fois
avatar

Shiyami
**

Messages : 81
Inscrit(e) le : 09/02/2017

http://institutespoir.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par IzumiRK le Jeu 18 Mai 2017 - 3:19

Je n'ai pas trop compris ce que tu essayais de faire avec ton bloc staff/news. A quoi ça ressemble, actuellement ?
Je pense que le problème doit venir de tes margin et de tes positions mais c'est à voir.

Sinon pour la case qui apparaît au survol de l'image je peux te proposer ce code :
Code:
<div class="pa_event"><img src="TON IMAGE" /><span>TEXTE</span></div>

Et le css :
Code:
.pa_event {
width:XXpx; /* largeur de ton bloc */
height:XXpx; /*hauteur de ton bloc */
}
.pa_event span{
display:block;
width:XXpx;/* largeur de ton bloc */
height:XXpx; /*hauteur de ton bloc */
background-color;#FFFFFF; /* couleur de fond */
position:relative; /* définit la position */
z-index:7; /* place le bloc par-dessus l'image */
opacity:0; /* rend le bloc invisible par défaut */
}
.pa_event span:hover{
opacity:1; /* fait apparaître le texte au survol */
}

Si ça ne fonctionne pas (par exemple le texte se décale) il faut rajouter des indicateurs de position dans le css. C'est le code que j'utilise sur ma propre pa donc en théorie ça devrait marcher.
avatar

IzumiRK
**

Messages : 99
Inscrit(e) le : 25/02/2015

http://indare-division.forumactif.com/
IzumiRK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par Shiyami le Jeu 18 Mai 2017 - 18:53

Merci d'avoir répondu Very Happy
Je vais tester ton code, puis j'éditerai pour prévenir si c'est bon Smile

Je vais essayer de mieux expliquer du coup...
En fait, j'aimerai que le bloc Staff (donc le bloc où il y aura les images du staff) soit pile poil au dessus du bloc des nouveautés (donc le bloc news, là où il y a les -- 00/00/00 : ...)
Le soucis, c'est que le bloc des nouveautés se trouvent juste en dessous du bloc staff (par "en dessous", je veux dire sous le bloc staff, de telle façon à ce qu'on ne puisse pas le voir)
En fait, ça donne ça : http://institutespoir.forumactif.com/h7-page-d-accueil
Comme vous pouvez le voir, le "je suis là" se trouve dans le bloc staff alors qu'il devrait être dans le bloc news, ou alors le il est dans le bloc news, mais comme le bloc staff et le bloc news se superposent...
J'espère être claire, désolée si ça ne l'est pas, je donnerai plus de précisions !

EDIT : J'ai essayé le code, voilà ce que ça fait : http://institutespoir.forumactif.com/h4-pa-en-cours Pas vraiment l'effet que j'aurai voulu x)
Et du coup, vu que j'aimerai en faire 2 à des endroits différents, dois-je faire le même code en nommant le "titre" du code différemment ? Et je le place dans un bloc ? ._.
avatar

Shiyami
**

Messages : 81
Inscrit(e) le : 09/02/2017

http://institutespoir.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par Riizbaie le Jeu 18 Mai 2017 - 22:09

Bonjour,

Alors je suis sur mon téléphone donc je ne sais pas te faire une grande explication. C'est un soucis avec position:absolute. Il ne faut pas utiliser des margins mais top left rigth bottom.

De base un position absolute se met automatiquement en top :0; left:0.

Donc pour ton bloc nouveauté met donc un rigth:0;

avatar

Riizbaie
Nouveau membre

Messages : 17
Inscrit(e) le : 27/09/2016

http://be-reckless.forumactif.org/
Riizbaie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par MlleAlys le Jeu 18 Mai 2017 - 23:09

Bonjour,
Commencez par la structure générale, ici je vous propose un tableau à trois colonnes, puis remplissez au fur et à mesure : les différents blocs globalement, puis le contenu des blocs, etc.
J'ai créé une classe pa-titre1 pour le type de titre "staff", "nouveautés", etc, le style est dans la partie head de la page html, que vous pouvez continuer à compléter au fur et à mesure :
Code:
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8"/>
 
    <style type="text/css">
     
      body {
  margin: 0;
  padding: 0;
  width: 1019px;
      }
   
      .pa-tableau {
  width: 1019px;
  background-color: rgb(154,204,255);
  border-spacing: 20px;
  box-sizing: border-box;
  text-align: left;
  font-family: Georgia;
  border: none;
  table-layout: fixed;
  margin: 0;
}
      .pa-titre1 {
  background: white;
  padding: 5px;
  font-family: arial;
  text-transform: uppercase;
  font-weight: bold;
  color: #9accff;
  font-size: 20px;
  text-align: center;
}
      .pa-staff, .pa-nouveau {
      background: white;
      padding: 5px;
      }
   
    </style>
 
  </head>
  <body>
 
    <img src="http://www.zupimages.net/up/17/20/m2hf.jpg" style="display:block;"/>
 
    <table class="pa-tableau">
      <tr>
        <td width="35%">
       
          <div class="pa-titre1">staff</div>
          <div class="pa-staff">
            Staff
          </div>
       
          <div class="pa-titre1">Nouveautés</div>
          <div class="pa-nouveau">
            nouveautés
          </div>
          <br/>
       
       
          <div class="pa-titre1">Nos top-partenaires</div>
          <div class="pa-partenaires">
            partenaires
          </div>
       
        </td>
        <td width="30%">
       
          <div>
            contexte
          </div>
       
          <div>
            liens
          </div>
       
        </td>
        <td width="35%">
       
          <div>
            intrigue
          </div>
       
          <div>
            votes
          </div>
       
          <div>
            évènement
          </div>
       
        </td>
      </tr>
    </table>
 
  </body>
</html>

Essayez de remplir un maximum avec les éléments simples avant de vous pencher sur les effets de survol, etc. ^^
Ne cherchez pas à préciser la hauteur des blocs ou du tableau, pour l'instant elle s'adaptera et on ne fixera la hauteur des éléments pour lesquels c'est strictement nécessaire.
Partez des blocs généraux avant de vous intéresser aux détails.
avatar

MlleAlys
Membre actif

Messages : 4598
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par Shiyami le Ven 19 Mai 2017 - 19:48

MlleAlys, merci beaucoup ! Pour l'instant, tout fonctionne parfaitement ! Je reviendrai vers vous pour plus de conseils (pour les images coulissantes d'intrigue et événement et bien sûr pour celles du staff Very Happy)
avatar

Shiyami
**

Messages : 81
Inscrit(e) le : 09/02/2017

http://institutespoir.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par MlleAlys le Ven 19 Mai 2017 - 20:53

Pas de soucis ^^
(pensez à poster dans le sujet au moins une fois par semaine si ça vous prend plus de tmeps, pour ne pas que celui-ci soit envoyé à la corbeille)
avatar

MlleAlys
Membre actif

Messages : 4598
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par Shiyami le Sam 20 Mai 2017 - 12:47

Rebonjour !
J'ai fait quelques modifications du code que je mets sous spoiler Smile
Spoiler:

Code:
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8"/>
 
    <style type="text/css">
     
      body {
  margin: 0;
  padding: 0;
  width: 1019px;
  height: 474px;
      }
   
      .pa-tableau {
  width: 1019px;
  background-color: rgb(154,204,255);
  border-spacing: 10px;
  box-sizing: border-box;
  text-align: left;
  font-family: Georgia;
  border: none;
  table-layout: fixed;
  margin: 0;
}
      .pa-titre1 {
  background: white;
  padding: 5px;
  font-family: arial;
  text-transform: uppercase;
  font-weight: bold;
  color: #9accff;
  font-size: 20px;
  text-align: center;
}
      .pa-nouveau {
      background: white;
      padding: 5px;
      height: 60px;
      overflow:auto;
      font-size: 12px;
      }
      
      .pa-staff {
      background: white;
      padding: 5px;
      }
      
      .pa-contexte {
      background: white;
      padding: 5px;
      font-family: Georgia;
      color: black;
      font-size: 13px;
      text-align: justify;
      overflow:auto;
      margin:0;
      height:200px;
      }
      
      .pa-lien {
      background:rgb(154,204,255);
      padding: 5px;
      font-family: arial;
      color: white;
      font-size: 15px;
      font-weight:bold;
      text-align: justify;
      margin:o;
      text-transform:uppercase;
      }
      
      .pa-eventint {
      background: white;
      padding: 5px;
      font-family: Georgia;
      color: black;
      font-size: 13px;
      text-align: justify;
      overflow:auto;
      margin:0;
      height:86px;
      }
      
      a:link 

 text-decoration:none; 

   
    </style>
 
  </head>
  <body>
 
    <img src="http://www.zupimages.net/up/17/20/m2hf.jpg" style="display:block;"/>
 
    <table class="pa-tableau">
      <tr>
        <td width="349px">
       
          <div class="pa-titre1">staff</div>
          <div class="pa-staff">
            <center><img src="http://zupimages.net/up/17/07/5psb.jpg" /> <img src="http://zupimages.net/up/17/07/d5ge.jpg" /> <img src="http://zupimages.net/up/17/07/opn0.jpg" />
            </center></div>
       
          <div class="pa-titre1">Nouveautés</div>
          <div class="pa-nouveau">
            <strong>♫ - le 08/02/17 :</strong> Création du forum<br />
            <strong>♫ - le 04/04/17 :</strong> Ajout de nouveaux smileys<br />
            <strong>♫ - le 18/04/17 :</strong> Inscriptions disponibles.<br />
            <strong>♫ - le 21/04/17 :</strong> <a target="_blank" href="http://institutespoir.forumactif.com/t30-les-nouveautes-du-20-04-17#44"> Les nouveautés</a><br />
            <strong>♫ - le 08/05/17 :</strong> <a target="_blank" href="http://institutespoir.forumactif.com/t58-evenement-1#203">Le premier événement est sorti !</a><br />
            <strong>♫ - le 00/00/00 :</strong> ...<br />
            <strong>♫ - le 00/00/00 :</strong> ...
          </div>
          <br/>
       
       
          <div class="pa-titre1">Nos top-partenaires</div>
          <div class="pa-partenaires">
            <br /><center>
            <a href="http://institutespoir.forumactif.com/" target="_blank"><img src="http://zupimages.net/up/17/16/annd.jpg" /></a>     
            <a href="http://institutespoir.forumactif.com/" target="_blank"><img src="http://zupimages.net/up/17/16/annd.jpg" /></a>       
            <a href="http://institutespoir.forumactif.com/" target="_blank"><img src="http://zupimages.net/up/17/16/annd.jpg" /></a>        
            <a href="http://institutespoir.forumactif.com/" target="_blank"><img src="http://zupimages.net/up/17/16/annd.jpg" /></a>         
            <a href="http://institutespoir.forumactif.com/" target="_blank"><img src="http://zupimages.net/up/17/16/annd.jpg" /></a>        
            <a href="http://institutespoir.forumactif.com/" target="_blank"><img src="http://zupimages.net/up/17/16/annd.jpg" /></a>    
            </center></div>
       
        </td>
        <td width="250px">
          
          <div class="pa-titre1">Contexte</div>
          <div class="pa-contexte">
            « Vous êtes parent et votre enfant ne semble pas à sa place dans la société ? Il est différent ? Trop pour réussir à s'intégrer et vous ne savez pas quoi faire pour lui venir en aide ? Nous sommes là pour vous. Notre Institut Espoir est prêt à les accueillir. Si votre enfant est plus intelligent, possède des capacités hors du commun, est porteur de quoi que ce soit de singulier, nous lui ouvrons nos portes. Ici, à l'Institut Espoir nous prendrons soin de votre enfant si particulier. Parce que l'Espoir fait vivre... <center><br/>Institut Espoir. »
            </center><br/><a href="http://institutespoir.forumactif.com/t10-le-contexte">suite du contexte ici...</a>
          </div> 
          <br />
          <div class="pa-titre1">liens</div>
          <div class="pa-lien"><a href="http://institutespoir.forumactif.com/t3-le-reglement-du-forum" target="_blank"><span style="color:#FFFFFF">règlement</span></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://institutespoir.forumactif.com/t13-les-differents-groupes" target="_blank"><span style="color:#FFFFFF">Groupes</span></a>
            <br/>
            <a href="http://institutespoir.forumactif.com/t1-guide-pour-debuter" target="_blank"><span style="color:#FFFFFF">Pour débuter</span></a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://institutespoir.forumactif.com/f8-f-a-q" target="_blank"><span style="color:#FFFFFF">F.A.Q.</span></a>
            <br/>
            <a href="http://institutespoir.forumactif.com/f42-personnages-predefinis" target="_blank"><span style="color:#FFFFFF">prédéfinis</span></a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://institutespoir.forumactif.com/f48-partenariats" target="_blank"><span style="color:#FFFFFF">partenariats</span></a>
          </div>
          
        </td>
        <td width="360px">
       
          <div class="pa-titre1">
            INTRIGUE
          </div>
          <div class="pa-eventint"><center><span style="color:#6699ff"><b>Le mystère du sous-sol</b></span></center>
<br/>
Comme vous le savez ; il nous est interdit à nous, bêtes en cage, de descendre au sous-sol. Cet endroit nous intrigue tous ; qu'est-ce qu'il peut bien y avoir en dessous ? Que mijotent les médecins là-bas ? Nous savons tous que nous ne sommes pas vraiment des patients, que nous sommes les sujets d'une étude dont nous ignorons le but, est-ce par rapport à cela ?
            <br/><br/> <a href="http://institutespoir.forumactif.com/t19-le-journal-clandestin#31">toutes les intrigues ici...</a></div>
       
          <div>
            <br/><center>
            <a href="http://www.root-top.com/topsite/callista/in.php?ID=1282" target="_blank"><img src="http://www.zupimages.net/up/17/20/jlu0.jpg" alt="" /></a>
            <a href="http://en.root-top.com/toplist/chenshen/in.php?ID=1413" target="_blank"><img src="http://zupimages.net/up/17/20/1lw2.jpg" alt="" /></a>
            <a href="http://www.root-top.com/topsite/cda2/in.php?ID=345" target="_blank"><img src="http://zupimages.net/up/17/20/slby.jpg" alt="" /></a>
            <a href="http://www.root-top.com/topsite/gilgamesh/in.php?ID=7901" target="_blank"><img src="http://zupimages.net/up/17/20/bxgg.jpg" alt="" /></a>
            <a href="http://www.root-top.com/topsite/psppassion/in.php?ID=113" target="_blank"><img src="http://zupimages.net/up/17/20/56d2.jpg" alt="" /></a>
            </center><br/>
          </div>
       
          <div class="pa-titre1">évènement</div>
          <div class="pa-eventint">Aujourd'hui, un patient est mort. Comme vous pouvez vous en douter, l'Institut a étouffé l'affaire et a fait en sorte que personne ne
pose de questions. L'Institut a, comme qui dirait, presque effacé son
existence, de telle sorte à ce que personne ne remonte jusqu'à elle.
Quelle qu'elle soit, cette personne, ce patient, a besoin de funérailles
digne de ce nom. Je vous retrouve, cette nuit, dans la foret, afin de
l'enterrer comme il se doit, même si le corps est introuvable, nous
devons envoyer son âme dans les cieux. J'espère pouvoir compter 
sur votre aide.
            <br/><br/> <a href="http://institutespoir.forumactif.com/t58-evenement-1#203" target="_blank">suite de l'événement ici...</a>
</div>
       
        </td>
      </tr>
    </table>
 
  </body>
</html>


et ce à quoi ressemble ma pa : [url=%09http://institutespoir.forumactif.com/h8-pa-mllealys] http://institutespoir.forumactif.com/h8-pa-mllealys[/url]
Au final, ça rend plutôt bien Very Happy
Du coup, comment faire avec les images ? Oo
avatar

Shiyami
**

Messages : 81
Inscrit(e) le : 09/02/2017

http://institutespoir.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par MlleAlys le Sam 20 Mai 2017 - 18:18

Beau travail, pour la suite, tout d'abord, souhaitez vous simplement que l'image disparaisse simplement au passage de la souris, ou bien qu'il y ait un effet de transition, type opacité qui diminue, ou décalage de l'image vers le haut/bas/gauche/droite, ou autre ?
avatar

MlleAlys
Membre actif

Messages : 4598
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par Shiyami le Sam 20 Mai 2017 - 18:28

Merci, mais c'est surtout grâce à vous que j'y suis arrivée ! Very Happy (Je vous mentionnerai dans les crédits of course !)
J'aimerai que pour l'image d'intrigue, l'image glisse vers le haut et que pour l'image de l’événement, elle glisse vers le bas.
Pour le staff, un style d'opacité noire qui donc fait apparaître le pseudo et le lien pour envoyer un mp Smile
Merci encore pour le temps que vous me consacrez Very Happy
avatar

Shiyami
**

Messages : 81
Inscrit(e) le : 09/02/2017

http://institutespoir.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par Shiyami le Dim 21 Mai 2017 - 16:23

up ♥
avatar

Shiyami
**

Messages : 81
Inscrit(e) le : 09/02/2017

http://institutespoir.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème avec le code de ma PA

Message par MlleAlys le Mar 23 Mai 2017 - 18:35

On va commencer par l'intrigue, le principe est le suivant :
- avoir l'image et un bloc avec le texte dans un cadre
- superposer l'image au dessus du texte grâce au css
- utiliser toujours le css pour modifier la position de l'image au survol du cadre, et ainsi voir le texte
- ajouter un effet de transition pour l'effet de glissement.


  1. On se trouve donc ici :
    Code:
    <div class="pa-titre1">INTRIGUE</div>
    <div class="pa-eventint">
      <center><span style="color:#6699ff"><b>Le mystère du sous-sol</b></span></center>
      <br/>
      Comme vous le savez ; il nous est interdit à nous, bêtes en cage, de descendre au sous-sol. Cet endroit nous intrigue tous ; qu'est-ce qu'il peut bien y avoir en dessous ? Que mijotent les médecins là-bas ? Nous savons tous que nous ne sommes pas vraiment des patients, que nous sommes les sujets d'une étude dont nous ignorons le but, est-ce par rapport à cela ?
      <br/>
      <br/> <a href="http://institutespoir.forumactif.com/t19-le-journal-clandestin#31">toutes les intrigues ici...</a>
    </div>
    Ceci est ce que j'ai appelé bloc texte, c'est à dire ce qui doit se trouver sous l'image.

  2. Je lui met un cadre, c'est à dire une div autour :
    Code:
    <div class="pa-glisse-cadre">
      <div class="pa-titre1">INTRIGUE</div>
      <div class="pa-eventint">
        <center><span style="color:#6699ff"><b>Le mystère du sous-sol</b></span></center>
        <br/>
        Comme vous le savez ; il nous est interdit à nous, bêtes en cage, de descendre au sous-sol. Cet endroit nous intrigue tous ; qu'est-ce qu'il peut bien y avoir en dessous ? Que mijotent les médecins là-bas ? Nous savons tous que nous ne sommes pas vraiment des patients, que nous sommes les sujets d'une étude dont nous ignorons le but, est-ce par rapport à cela ?
        <br/>
        <br/> <a href="http://institutespoir.forumactif.com/t19-le-journal-clandestin#31">toutes les intrigues ici...</a>
      </div>
    </div>
    Je l'ai appelée pa-glisse-cadre

  3. J'ajoute l'image (ici une image prise au hasard qu'il vous faudra remplacer par la bonne) dans le cadre :

    Code:
    <div class="pa-glisse-cadre">
      <img class="pa-glisse-img" src="http://lorempixel.com/output/animals-q-c-640-260-8.jpg"/>
      <div class="pa-titre1">INTRIGUE</div>
      <div class="pa-eventint">
        <center><span style="color:#6699ff"><b>Le mystère du sous-sol</b></span></center>
        <br/>
        Comme vous le savez ; il nous est interdit à nous, bêtes en cage, de descendre au sous-sol. Cet endroit nous intrigue tous ; qu'est-ce qu'il peut bien y avoir en dessous ? Que mijotent les médecins là-bas ? Nous savons tous que nous ne sommes pas vraiment des patients, que nous sommes les sujets d'une étude dont nous ignorons le but, est-ce par rapport à cela ?
        <br/>
        <br/> <a href="http://institutespoir.forumactif.com/t19-le-journal-clandestin#31">toutes les intrigues ici...</a>
      </div>
    </div>
    Je l'ai appelée pa-glisse-img.

  4. Pour placer l'image par dessus le texte, je vais utiliser un positionnement absolu par rapport au cadre (il faut donc mettre une position relative au cadre) :
    Code:
    .pa-glisse-cadre {
      position: relative;
    }
    .pa-glisse-img {
      position: absolute;
    }

  5. Je positionne plus précisément l'image par rapport au cadre : à 0px du bord haut du cadre, et à 0px du bord gauche du cadre. Et je précise sa taille pour qu'elle couvre parfaitement le cadre.
    Code:
    .pa-glisse-cadre {
      position: relative;
    }
    .pa-glisse-img {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
    }

  6. En css l'état "au survol" est indiqué par la pseudo-class :hover.
    Ainsi le sélecteur .pa-glisse-cadre:hover .pa-glisse-img peut se lire "les éléments de classe pa-flisse-img quand leur parent pa-glisse-cadre est survolé" et va nous permettre de modifier la position de l'image. je veux la déplacer vers le haut, donc je modifier au survol simplement la propriété top : Au lieu d'être à 0px du bord haut du cadre, je vais la mettre 100% au dessus (100% de la hauteur du cadre donc de l'image) :
    Code:
    .pa-glisse-cadre {
      position: relative;
    }
    .pa-glisse-img {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
    }
    .pa-glisse-cadre:hover .pa-glisse-img {
      top: -100%;
    }
    Au survol, l'image se retrouve au dessus du cadre et le texte en dessous est visible.

  7. Pour faire en sorte que l'image glisse, j'ajoute un propriété de transition à l'image, ici une transition d'une demi-seconde :
    Code:
    .pa-glisse-cadre {
      position: relative;
    }
    .pa-glisse-img {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      transition: top 0.5s ease-out;
    }
    .pa-glisse-cadre:hover .pa-glisse-img {
      top: -100%;
    }

  8. Enfin, pour que l'image disparaisse quand elle monte, on peut faire en sorte que tout ce qui dépasse du cadre ne soit pas visible avec la propriété overflow :
    Code:
    .pa-glisse-cadre {
      position: relative;
      overflow: hidden;
    }
    .pa-glisse-img {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      transition: top 0.5s ease-out;
    }
    .pa-glisse-cadre:hover .pa-glisse-img {
      top: -100%;
    }



Je vous laisse faire celle des évènements, sauf qu'il faudra déplacer l'image non pas de -100% (vers le haut) mais de 100% (vers le bas).
avatar

MlleAlys
Membre actif

Messages : 4598
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par Shiyami le Mar 23 Mai 2017 - 20:23

Merci, je vous tiens au courant ! Very Happy
(Par ailleurs, très bon tutoriel o_o)

EDIT : Ouah ! J'ai jamais vu quelque chose qui marchait dès le premier coup ! C'est tellement nickel, j'ai rien à y redire ! (Et en plus, j'apprends des choses *^*)
avatar

Shiyami
**

Messages : 81
Inscrit(e) le : 09/02/2017

http://institutespoir.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème avec le code de ma PA

Message par MlleAlys le Mar 23 Mai 2017 - 22:09

merci ^^

Pour le staff, on va passer par un autre fonctionnement : on va mettre l'image en fond du cadre, et modifier l'opacité du bloc texte au survol de la souris sur le cadre.

Remplacez la première image :
Code:
<img src="http://zupimages.net/up/17/07/5psb.jpg"/>
Par :
Code:
<div class="pa-fondu-cadre" style="background: url(http://zupimages.net/up/17/07/5psb.jpg);">
  <div class="pa-fondu-contenu">
    pseudo
    <a href="">MP</a>
  </div>
</div>

Et le css :
Code:
.pa-fondu-cadre {
  height: 85px;
  width: 85px;
  display: inline-block;
  vertical-align: top;
  margin: 3px;
}
.pa-fondu-contenu {
  height: 85px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 10px 5px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.pa-fondu-cadre:hover .pa-fondu-contenu {
  opacity: 1;
}
.pa-fondu-contenu a {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 100%;
  background: white;
  margin: 5px;
}

Je n'ai pas détaillé en "tutoriel" mais si vous avez une question concernant une partie du code, n'hésitez pas.
avatar

MlleAlys
Membre actif

Messages : 4598
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec le code de ma PA

Message par Shiyami le Mar 23 Mai 2017 - 22:27

Bah franchement, encore une fois, c'est nickel !
Je mets en résolu (et je mentionne dans les crédits quand même Very Happy)
Merci encore énormément pour l'aide !
avatar

Shiyami
**

Messages : 81
Inscrit(e) le : 09/02/2017

http://institutespoir.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum