Problème avec le code de ma PA

4 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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 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 :

Problème avec le code de ma PA Pa_sou10

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 ?

Problème avec le code de ma PA Pa_pas10 
Normal

Problème avec le code de ma PA Pa_sou10
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
Shiyami

Shiyami
***

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

http://the-owl.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 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.
IzumiRK

IzumiRK
****

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

http://indare.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 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 ? ._.
Shiyami

Shiyami
***

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

http://the-owl.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 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;

Riizbaie

Riizbaie
***

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

https://elastic-fantastic.forumsrpg.com/
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 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.
MlleAlys

MlleAlys
Membre actif

Messages : 5967
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 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)
Shiyami

Shiyami
***

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

http://the-owl.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 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)
MlleAlys

MlleAlys
Membre actif

Messages : 5967
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 Sam 20 Mai 2017 - 12:47

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

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
Shiyami

Shiyami
***

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

http://the-owl.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 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 ?
MlleAlys

MlleAlys
Membre actif

Messages : 5967
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 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
Shiyami

Shiyami
***

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

http://the-owl.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 Dim 21 Mai 2017 - 16:23

up ♥
Shiyami

Shiyami
***

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

http://the-owl.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 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).
MlleAlys

MlleAlys
Membre actif

Messages : 5967
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 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 *^*)
Shiyami

Shiyami
***

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

http://the-owl.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 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.
MlleAlys

MlleAlys
Membre actif

Messages : 5967
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 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 !
Shiyami

Shiyami
***

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

http://the-owl.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

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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