Problème de positionnement d'éléments de pa

Bonjour. ^^

Je viens vous exposer un petit souci que j'ai avec le code de cette page d'accueil : https://www.never-utopia.com/t56611-pa-couleur-claire-et-assez-simple#926355

Je l'ai utilisée sur mon forum test : http://fofotest72.forumactif.org/

Et en fait, les ronds des prédéfinis et les "rectangles" du staff se mettent un peu n'importe où. Je me suis rendue compte là, que en largeur ça dépend de la taille de mon navigateur, par contre je ne sais pas comment faire pour qu'ils soient à la bonne position. Et de même, ils sont trop hauts en affichage sur mon navigateur.

Du coup, si quelqu'un savait comment je peux faire pour remédier à ça. '-'

En screen ça donne ça :

En plein écran : https://i.servimg.com/u/f35/11/46/73/95/2016-012.png
Pas en plein écran : https://i.servimg.com/u/f35/11/46/73/95/2016-010.jpg


Le code du CSS (c'est la seule chose que j'ai modifiée par rapport au code donné)

Code:

/***    PA      ***/
.pa_centre {
    height: 620px;
    width: 840px;
    border: 2px solid #71838D;
    position: relative;
    margin: auto;
    border-radius: 40px;
    text-align: center;
    color: #97AEEF;
   
}
.pa_centre span{
    font: 25px 'Great Vibes';
}
.img_staff {
    height: 81px;
    width: 151px;
    border: 2px solid #71838D;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    position: absolute;
    left: 475px;
    background: #000000;
    overflow: hidden;
    text-align: center;
    z-index: 2;
}
.img_staff img{
    height: 81px;
    width: 151px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: 1.3s all;
}
.img_staff:hover img{
    top: 55px;
}
.img_staff span{
  color: #7FC4E2;
    font: 18px 'BenchNine';
}
.bloc_staff1 {
    top: 140px;
}
.bloc_staff2 {
    top: 231px;
}
.bloc_staff3 {
    top: 322px;
}
.bloc_staff4 {
    top: 413px;
}
.navig {
    height: 40px;
    width: 670px;
    border: 2px solid #71838D;
    margin: 20px auto 0;
    border-radius: 18px;
    font: 20px 'Amita';
    color: #97AEEF;
    padding-top: 10px;
}
.navig a, .navig a:link{
  color: #97AEEF; 
}
.cadre_contexte{
    height: 240px;
    width: 365px;
    border: 2px solid #71838D;
    margin-top: 15px;
    border-radius: 20px;
    font: 20px 'Amita';
    display: inline-block;
}
.titre_contexte{
    border-bottom: 1px solid #71838D;
    width: 255px;
    height: 32px;
    margin: auto;
}
.texte_contexte{
    height: 185px;
    width: 325px;
    overflow: auto;
    text-align: justify;
    font: 15px 'Time New Roman';
    color: #4B5A83;
    margin: auto;
    padding-top: 5px;
}
.cadre_nouv{
    height: 240px;
    width: 185px;
    border: 2px solid #71838D;
    border-radius: 20px;
    display: inline-block;
    font: 20px 'Amita';
    vertical-align: top;
    margin: 15px 0 0 15px;
}
.titre_nouv{
    border-bottom: 1px solid #71838D;
    width: 140px;
    height: 32px;
    margin: auto;
}
.texte_nouv{
    height: 185px;
    width: 170px;
    overflow: auto;
    text-align: center;
    font: 15px 'Time New Roman';
    color: #4B5A83;
    margin: auto;
    padding-top: 5px;
}
.cadre_topsite{
    height: 170px;
    width: 170px;
    border: 2px solid #71838D;
    display: inline-block;
    margin: 15px 0 0 50px;
    border-radius: 20px;
    font: 20px 'Amita';
    vertical-align: top;
}
.titre_topsite{
    border-bottom: 1px solid #71838D;
    width: 140px;
    height: 32px;
    margin: auto;
}
.cadre_parten{
    height: 170px;
    width: 300px;
    border: 2px solid #71838D;
    border-radius: 20px;
    display: inline-block;
    margin: 15px 0 0 10px;
    vertical-align: top;
    font: 20px 'Amita';
}
.titre_parten{
    border-bottom: 1px solid #71838D;
    width: 230px;
    height: 32px;
    margin: auto;
}
.cadre_credit{
    height: 170px;
    width: 170px;
    border: 2px solid #71838D;
    display: inline-block;
    margin: 15px 25px 0 10px;
    border-radius: 20px;
    font: 20px 'Amita';
}
.titre_credit{
    border-bottom: 1px solid #71838D;
    width: 100px;
    height: 32px;
    margin: auto;
}
.texte_credit{
    height: 130px;
    width: 150px;
    overflow: auto;
    text-align: justify;
    font: 15px 'Time New Roman';
    color: #4B5A83;
    margin: auto;
}
.bloc_predef {
    height: 98px;
    width: 98px;
    border: 2px solid #71838D;
    position: absolute;
    right: 475px;
    background: #000000;
    text-align: center;
    overflow: hidden;
    border-radius: 50px;
}
.bloc_predef img{
    position: absolute;
    transition: 2s;
    border-radius: 50px;
    top: 0;
    left: 0;
    z-index: 2;
}
.bloc_predef:hover img{
    opacity: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.bloc_predef span{
    display: block;
    color: #7FC4E2;
    font: 15px 'benchNine';
    padding-top: 30px;
    opacity: 0;
    transition: 2s;
    position: relative;
}
.bloc_predef:hover span{
    opacity: 1;
    z-index: 3;
}
.img_predef1 {
    top: 140px;
}
.img_predef2 {
    top: 255px;
}
.img_predef3 {
    top: 375px;
}

Et, je crois que c'est tout '-'
Voilou, merci d'avance à celui ou celle qui aura un peu de temps à m'accorder. :3

Coucou

C'est possible d'avoir ton code CSS en entier ? pour quoi si y a un ptit mélange entre les classes et/ou id de tes différents éléments codés ? Merci d'avance =)

Coucou ^^

Déjà, merci d'être passée !
Et ouip, sans le moindre souci. ^^

Code:

/********** DÉBUT FORUMS **********/
        /* Retire le bord du forumline */   
        .forumline {
          border: 0px solid;
        }

        /* Retire le padding du bodyline */   
        .bodyline {
          padding: 0px;
        }

        /* Met une marge à droite pour chaque catégories impaire (1, 3, 5, ...) */
        .un_forum:nth-child(odd) {
          margin-right: 25px;
        }

        /* Met une marge en bas aux deux derniers forums por qu'ils ne soient pas collés à la catéories suivante. */
        .un_forum:last-child, .un_forum:nth-last-child(2) {
          margin-bottom: 20px;
        }

        /* Mise en place d'un forum: taille, qu'il se mette à la suite, etc */
        .un_forum {
          /* Ne pas toucher */
          position: relative;
          display: inline-block;
          vetical-align: top;
          /* Largeur puis hauteur */
          width: 400px;
          height: 250px;
          /* Marge du haut */
          margin-top: 20px;
          /* Empêche que ce qui dépasse soit vu: ne pas toucher. */
          overflow: hidden;
          /* Applique un bord, puis une ombre */
          border: 3px solid white;
          border-radius: 5px;
          box-shadow: 0 1px 4px grey;
        }

        /* Mise en forme du titre de forum */
        .un_titre {
          position: relative;
          /* Largeur: prend toute la largeur, puis hauteur */
          width: auto;
          height: 40px;
          /* Dot être de la même taille que "height": centre le texte */
          line-height: 40px;
          padding: 10px;
          /* Taille de la police */
          font-size: 30px;
          overflow: hidden;
        }

        /* Met la police au titre de forum */
        .un_titre h3, .un_titre h2 {
          font-family: 'Amatic SC';
        }

        .un_titre .hierarchy {
          font-size: 30px;
        }

        /* Couleur du titre forum et effet au passage de la souris */
        .un_titre a, .un_titre a:link, .un_titre a:active, .un_titre a:visited {
          color:black;
          text-decoration: none !important;
          text-shadow: 1px 1px 5px white;
          letter-spacing: 5px;
          transition: all ease 1s;
        }

        /* Effet du titre au passage de la souris */
        .un_titre a:hover {
          color: white;
          text-decoration: none !important;
          text-shadow: 1px 1px 5px black;
          letter-spacing: 2px;
          transition: all ease 1s;
        }

        /* On met tout le reste en position absolue */
        .image_messages, .img_forum, .sous_titre, .dernier_message {
          position: absolute;
        }

        /* On place l'image au-dessus de tout */
        .img_forum{
          top: 0;
          left: 0;
          z-index: 1;
        }

        /*On place out le reste au-dessus */
        .un_titre, .image_messages, .sous_titre, .dernier_message, .sous_forums {
          z-index: 2;
        }

        /* On place l'image de new/nonew/etc en haut à droite */
        .image_messages {
          top: 0;
          right: 0;
        }

        /* Mise en forme du sous-titre du forum qui se trouve dans la description */
        .un_forum .sous_titre {
          /* Placement */
          top: 65px;
          left: 20px;
          padding: 5px 10px;
          /* Couleur de fond puis de texte */
          background: rgba(0, 0, 0, 0.8);
          color: white;
          /* Police, taille et mise en gras */
          font-family: 'Courgette';
          font-size: 15px;
          font-weight: bold;
          /* Largeur maximale du titre = la moitié de la taille - le padding */
          max-width: 180px;
          /* Visible si la souris n'est pas dessus */
          opacity: 1;
          transition: all ease 1s;
        }

        /* Effet sur le sous-titrE: il devient invisible au passage de la souris: */
        .un_forum:hover .sous_titre {
          opacity: 0;
          transition: all ease 1s;
        }

        /* Mise en forme de la description du sous-forums */
        .un_forum .description .contour_desciption {
          overflow: visible;
          position: relative;
          /* Taille. Width: il prend toute la largeur. */
          width: auto;
          height: 100px;
          padding: 10px;
          /* Couleur de fond */
          background: rgba(0, 0, 0, 0.8);
          /* Police, puis taille de police, puis couleur du texte */
          font-family: 'Courgette';
          font-size: 13px;
          color: white;
          /* On le met au-dessus de tout le reste */
          z-index: 3;
          /* Alignement du texte */
          text-align: justify;
          /* Effet de disparition */
          -webkit-transform: translateX(400px);
          transform: translateX(400px);
          transition: all ease 0.8s;
        }

        /* Effet d'apparition de la description du forum */
        .un_forum:hover .description .contour_desciption {
          -webkit-transform: translateX(0px);
          transform: translateX(0px);
          transition: all ease 0.8s;
        }

        /* Mise en forme du texte de description */
        .description .contour_desciption p {
          /* Fait apparaitre une barre de défilement */
          overflow: auto;
          position: relative;
          /* Prend toute la largeur et donne une certaine hauteur (= 80px à cause du padding) */
          width: auto;
          height: 60px;
          padding: 10px;
          text-align: justify;
          font-family: 'Courgette';
          font-size: 13px;
          color: white;
        }

        /* Mise en forme des liens vers les sous-froums */
        .un_forum .sous_forums {
          /* Placement */
          position: relative;
          top: -42px;
          /* Prennent toute la largeur et font 40 px de haut */
          width: auto;
          height: 20px;
          padding: 10px;
          /* PAr-dessus tout le reste */
          z-index: 3;
          /* S'il y en a trop une barre de défilement apparait */
          overflow: auto;
          /* N'apparaissent pas normalement */
          opacity: 0;
          transition: all ease 0.2s;
        }

        /* Effet d'apparition des liens vers les sous-forums */
        .un_forum:hover .sous_forums {
          opacity: 1;
          transition: all 0.8s ease 0.5s;
        }

        /* Mise en forme des leins de sous-forums */
        .sous_forums a, .sous_forums a:link, .sous_forums a:active, .sous_forums a:visited  {
          /* Taille, police, puis couleur */
          font-size: 15px;
          font-family: 'Amatic SC';
          color: white;
          /* On retire le sous-lignement */
          text-decoration: none !important;
          /* Effet sur le texte. */
          letter-spacing: 3px;
          transition: all ease 1s;
        }

        /* Effet sur les liens de sous-forums au passage de la souris */
        .sous_forums a:hover  {
          text-decoration: none !important;
          letter-spacing: 1px;
          transition: all ease 1s;
        }

        /* Mise en forme du dernier message */
        .un_forum .dernier_message {
          /* Poistionnement */
          bottom: 10px;
          /* Taille */
          width: 380px;
          height: 40px;
          /* S'il est trop long une barre de défilement apparait */
          overflow: auto;
          padding: 5px 10px;
          /* Mise en forme du texte: police, taille, couleur, ombre du texte */
          font-family: 'Courgette';
          font-size: 15px;
          color: white;
          text-shadow: 1px 1px 5px black;
          /* Effet de disparition */
          opacity: 0;
          transition: all ease 1s;
        }

        /* Effet d'apparition du denrier message */
        .un_forum:hover .dernier_message {
          opacity: 1;
          transition: all ease 1s;
        }

        /* Mise en forme du texte "message et sujets" */
        .dernier_message .mess_et_sujets {
          display: block;
          margin-bottom: 5px;
        }

        /* Mise en forme de la date du dernier message: taille */
        .dernier_message .liens_mess {
          font-size: 8px;
        }

        /* Mise en forme de tout le reste pour le dernier message: taille */
        .dernier_message .liens_mess a {
          font-size: 15px;
          text-decoration: none !important;
          color: white;
        }

/********** FIN FORUMS **********/

  /************************************************** QEEL **************************************************/
/*Fond du qeel*/
.qeel_box {
  margin-top: 20px;
  background: #90C7AC;
  border: 1px solid #3f2600;
  box-shadow: 0px 0px 10px #3f2600;
  border-radius: 25px;
  text-align: left;
}
/*Cellules du qeel*/
.qeel_box_td {
  background: #62968A;
  border: solid 1px #3f4511;
  border-radius: 15px;
  padding: 10px;
  font-size: 13px;
  font-family: Open Sans;
  color: #0b1906;
  text-align: left;
}
/*Ligne pointillée dans les membres connectés et les anniversaires*/
.qeel_line {
  border-top: 1px #3f4511 dashed;
  height: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/*Titre du qeel*/
.qeel_title a {
  display: inline-block;
  margin-left: 10px;
  font-size: 32px;
  font-family: Pacifico;
  color: #291900;
  letter-spacing: 0px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Titre du qeel au survol*/
.qeel_title a:hover {
  text-decoration: none!important;
  letter-spacing: 5px;
}

/*Bloc des membres connectés*/
.qeel_box2 {
  padding: 5px;
}
/*Bloc des membres connectés actuellement*/
#loggedlist {
  padding-right: 5px;
  max-height: 5em;
  overflow: auto;
  text-align: justify;
}
/*Les membres connectés récemment*/
#totalconn {
  padding-right: 5px;
  max-height: 5em;
  overflow: auto;
  text-align: justify;
}

/*Les anniversaires aujourdhui*/
#birthtoday {
  height: 133px;
  padding-right: 5px;
  overflow: auto;
  text-align: center;
}
/*Les anniversaires au cours des 7 prochains jours*/
#birthweek {
  height: 134px;
  padding-right: 5px;
  overflow: auto;
  text-align: center;
}

/*Image du milieu*/
.qeel_box4 img {
  width: 250px;
  height: 300px;
  border: solid 1px #3f4511;
  border-radius: 15px;
}

/*Bloc des groupes*/
.qeel_box5 {
  text-align: center;
}
/*Groupes*/
.groupes {
  height: 35px;
  text-align: center;
  text-shadow: 1px 1px 1px #3f4511;
}
/*Couleur du groupe 1*/
#groupe1 a, #groupe1 a:hover {
  color: #6c0000;
}
/*Couleur du groupe 2*/
#groupe2 a, #groupe2 a:hover {
  color: #0ba7b5;
}
/*Couleur du groupe 3*/
#groupe3 a, #groupe3 a:hover {
  color: #fc79f3;
}
/*Couleur du groupe 4*/
#groupe4 a, #groupe4 a:hover {
  color: #c7c0a3;
}
/*Description des groupes*/
.qeel_infobulles {
  height: 130px;
  overflow: auto;
  background: #90C7AC;
  border-radius: 10px;
  text-shadow: none;
  color: #0b1906;
  padding: 5px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Description des groupes sans survol*/
#qeel_infobulle1, #qeel_infobulle2, #qeel_infobulle3, #qeel_infobulle4 {
  position: relative;
  z-index: 1;
  margin-top: -140px;
  opacity: 0;
  filter: alpha(opacity=0);
  transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}
/*Apparition de la description des groupes*/
#groupe1:hover ~ #qeel_infobulle1, #groupe2:hover ~ #qeel_infobulle2, #groupe3:hover ~ #qeel_infobulle3, #groupe4:hover ~ #qeel_infobulle4 {
  opacity: 1;
  filter: alpha(opacity=100);
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

/*Liste des membres sur la CB*/
#chatters_stats {
  padding-right: 3px;
  max-height: 5em;
  overflow: auto;
  text-align: justify;
}

/*Écriture des aniversaires et des membres connectés récemment*/
#totalconn td.row1, #birthtoday td.row1 {
  background: transparent;
  padding: 0px;
  display: inline;
}
#totalconn td.row1 span.gensmall, #birthtoday td.row1 span.gensmall {
  font-size: 13px;
  padding: 0px;
  font-family: Open Sans;
  color: #0b1906;
}
/************************************************** FIN DU QEEL **************************************************/


/***    PA      ***/
.pa_centre {
    height: 620px;
    width: 840px;
    border: 2px solid #71838D;
    position: relative;
    margin: auto;
    border-radius: 40px;
    text-align: center;
    color: #97AEEF;
   
}
.pa_centre span{
    font: 25px 'Great Vibes';
}
.img_staff {
    height: 81px;
    width: 151px;
    border: 2px solid #71838D;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    position: absolute;
    left: 475px;
    background: #000000;
    overflow: hidden;
    text-align: center;
    z-index: 2;
}
.img_staff img{
    height: 81px;
    width: 151px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: 1.3s all;
}
.img_staff:hover img{
    top: 55px;
}
.img_staff span{
  color: #7FC4E2;
    font: 18px 'BenchNine';
}
.bloc_staff1 {
    top: 140px;
}
.bloc_staff2 {
    top: 231px;
}
.bloc_staff3 {
    top: 322px;
}
.bloc_staff4 {
    top: 413px;
}
.navig {
    height: 40px;
    width: 670px;
    border: 2px solid #71838D;
    margin: 20px auto 0;
    border-radius: 18px;
    font: 20px 'Amita';
    color: #97AEEF;
    padding-top: 10px;
}
.navig a, .navig a:link{
  color: #97AEEF; 
}
.cadre_contexte{
    height: 240px;
    width: 365px;
    border: 2px solid #71838D;
    margin-top: 15px;
    border-radius: 20px;
    font: 20px 'Amita';
    display: inline-block;
}
.titre_contexte{
    border-bottom: 1px solid #71838D;
    width: 255px;
    height: 32px;
    margin: auto;
}
.texte_contexte{
    height: 185px;
    width: 325px;
    overflow: auto;
    text-align: justify;
    font: 15px 'Time New Roman';
    color: #4B5A83;
    margin: auto;
    padding-top: 5px;
}
.cadre_nouv{
    height: 240px;
    width: 185px;
    border: 2px solid #71838D;
    border-radius: 20px;
    display: inline-block;
    font: 20px 'Amita';
    vertical-align: top;
    margin: 15px 0 0 15px;
}
.titre_nouv{
    border-bottom: 1px solid #71838D;
    width: 140px;
    height: 32px;
    margin: auto;
}
.texte_nouv{
    height: 185px;
    width: 170px;
    overflow: auto;
    text-align: center;
    font: 15px 'Time New Roman';
    color: #4B5A83;
    margin: auto;
    padding-top: 5px;
}
.cadre_topsite{
    height: 170px;
    width: 170px;
    border: 2px solid #71838D;
    display: inline-block;
    margin: 15px 0 0 50px;
    border-radius: 20px;
    font: 20px 'Amita';
    vertical-align: top;
}
.titre_topsite{
    border-bottom: 1px solid #71838D;
    width: 140px;
    height: 32px;
    margin: auto;
}
.cadre_parten{
    height: 170px;
    width: 300px;
    border: 2px solid #71838D;
    border-radius: 20px;
    display: inline-block;
    margin: 15px 0 0 10px;
    vertical-align: top;
    font: 20px 'Amita';
}
.titre_parten{
    border-bottom: 1px solid #71838D;
    width: 230px;
    height: 32px;
    margin: auto;
}
.cadre_credit{
    height: 170px;
    width: 170px;
    border: 2px solid #71838D;
    display: inline-block;
    margin: 15px 25px 0 10px;
    border-radius: 20px;
    font: 20px 'Amita';
}
.titre_credit{
    border-bottom: 1px solid #71838D;
    width: 100px;
    height: 32px;
    margin: auto;
}
.texte_credit{
    height: 130px;
    width: 150px;
    overflow: auto;
    text-align: justify;
    font: 15px 'Time New Roman';
    color: #4B5A83;
    margin: auto;
}
.bloc_predef {
    height: 98px;
    width: 98px;
    border: 2px solid #71838D;
    position: absolute;
    right: 475px;
    background: #000000;
    text-align: center;
    overflow: hidden;
    border-radius: 50px;
}
.bloc_predef img{
    position: absolute;
    transition: 2s;
    border-radius: 50px;
    top: 0;
    left: 0;
    z-index: 2;
}
.bloc_predef:hover img{
    opacity: 0;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.bloc_predef span{
    display: block;
    color: #7FC4E2;
    font: 15px 'benchNine';
    padding-top: 30px;
    opacity: 0;
    transition: 2s;
    position: relative;
}
.bloc_predef:hover span{
    opacity: 1;
    z-index: 3;
}
.img_predef1 {
    top: 140px;
}
.img_predef2 {
    top: 255px;
}
.img_predef3 {
    top: 375px;
}

Hey Miss ^^

Alors on va tester un ptit truc ^^ Mon inspecteur m'a donné un bon résultat donc on va voir si c'est pareil de ton côté =) Et si c'est pas ça bah je continuerais de chercher ^^

Première chose à faire, trouve moi ce passage :

Code:

/***    PA      ***/

Et  tu vas me rajouter ce bout de code juste en dessous. Attention de ne pas le mettre dans le code du dessous, donc tu mets bien un espace entre la ligne que je t'ai montré et ce qu'il y a en bas (donc le .pa_centre et le reste)

Le code à rajouter :

Code:



/* On place la PA sur un point fixe à partir de sa position initiale */
.pa_totale{
position: relative;

}


Ensuite tu vas faire deux petits changements.

Trouves cette partie du code :

Code:

.img_staff {
        height: 81px;
        width: 151px;
        border: 2px solid #71838D;
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
        position: absolute;
        left: 475px;
        background: #000000;
        overflow: hidden;
        text-align: center;
        z-index: 2;
    }

Et change le height à 475px pour mettre :

Code:

left: -77px;

Puis prend ce code là :

Code:

.bloc_predef {
        height: 98px;
        width: 98px;
        border: 2px solid #71838D;
        position: absolute;
        right: 475px;
        background: #000000;
        text-align: center;
        overflow: hidden;
        border-radius: 50px;
    }

Et comme pour l'autre, tu vas me changer cette fois le right à 475px comme ceci :

Code:

right: -46px;

Dis moi si ça va déjà mieux ^^ Si c'est le cas, je t'expliquerais. Dans le cas contraire, je continuerais à chercher. J'ai fait la manip deux fois par inspecteur pour être sûre de mon coup donc on verra bien si ça fonctionne pour toi .

Re - coucou !

C'est bien mieux oui *_* Merci beaucoup !
J'ai juste les "rectangles" pour le staff qui sont un peu trop à droite du coup, mais si je modifie leur positionnement ça devrait aller non ?

Hey très contente de voir que ça marche ^^

Alors pour le fonctionnement, (je ne sais pas si je vais bien expliquer), on a juste rajouté une position:relative sur l'ensemble de la PA.

Pourquoi ? Parce que certains éléments placés dedans sont en position:absolute comme nos fameux boutons qui se plaçaient naturellement en haut (la position absolute c'est quand l'élément se place tout en haut tout à gauche de son élément parent donc ici ça serait l'intégralité de sa PA).

Comme il n'y avait rien d'attribué comme position pour l'intégralité de la PA, les boutons se sont placés par rapport à l'élément du dessus qui est le corps du forum et c'est pour ça qu'ils entouraient la bannière.

Pour le placement, tu as juste fait une erreur de frappe, tu as mis x au lieu de px ^^

Je crois que j'ai compris !

En fait c'est pour que les éléments de la pa se lient à la pa et non à ce qu'il y a au dessus ?

Effectivement, j'avais fait une faute de frappe... je vais donc me cacher. xD

En tout cas, merci beaucoup. :3

Valà c'est pour les éléments qu'il y a dans la PA se positionnent par rapport à celle ci (puisqu'il y a des positions en absolute de certains éléments)

Mais nan les étourderies ça arrive Et tu peux toujours changer le chiffre du left ou du right si tu désires les déplacer un peu

Si ton sujet est résolu, n'oublie pas d'utiliser la petite icône de la boîte de conserve () avec la petite étoile verte pour clôturer ta demande afin qu'on puisse l'archiver =)

Alors j'ai tout compris ! Et du coup, c'est tout bon. ^^
Je te remercie pour ton aide. :3