Personnalisation code pour PA

Bonjour à vous!

J'ai récemment installé la PA en libre service ici -> https://www.never-utopia.com/t50653p30-pa-casino sur mon forum. Cependant je ne parviens pas à aligner les blocs "contexte" et "staff". Il y a toujours un énorme décalage entre les deux.
Je tiens à préciser que je suis sous Maxthon en tant que navigateur. Et que sur IE, je n'ai pas ce problème...
Si possible, j'aimerais également mettre des titres à chaque blocs mais ne sachant pas comment m'y prendre... Enfin! Si le premier problème d'alignement est résolu, ça sera déjà parfait!
Voici le lien de mon forum: http://archipeldoragon.frbb.net/
Et les codes:
HTML:

Code:

<br />
<div id="PA_fond">
     
   <div class="PA_titre">
        Bienvenue à l'archipel Doragon, {USERNAME}  
   </div>
     
   <div class="pouah">
        
      <div class="bloc1 PA_contexte">
           Contexte  
      </div>
        
   </div>
       
   <div class="pouah">
        
      <div class="bloc1 PA_staff">
           
         <div class="staff">
              <img class="PA_img_staff" alt="" src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" />  
            <div class="staff_infobulle">
                 <img class="PA_img_staff2" src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" /><br />Profil - MP  
            </div>
              NOM DU STAFF  
         </div>
             
         <div class="staff">
              <img class="PA_img_staff" alt="" src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" />  
            <div class="staff_infobulle">
                 <img class="PA_img_staff2" src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" /><br />Profil - MP  
            </div>
              NOM DU STAFF  
         </div>
             
         <div class="staff">
              <img class="PA_img_staff" alt="" src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" />  
            <div class="staff_infobulle">
                 <img class="PA_img_staff2" src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" /><br />Profil - MP  
            </div>
              NOM DU STAFF  
         </div>
             
         <div class="staff">
              <img class="PA_img_staff" alt="" src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" />  
            <div class="staff_infobulle">
                 <img class="PA_img_staff2" src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" /><br />Profil - MP  
            </div>
              NOM DU STAFF  
         </div>
             
      </div>
        
   </div><br /><br />  
   <div class="pouah">
        
      <div class="bloc2 PA_image">
           
         <div style="margin-top:-10px; margin-left:-10px;" class="PA_img">
              
            <div class="PA_img2">
                 Texte derrière l'image.    
            </div><img alt="" src="http://img4.hostingpics.net/pics/824684PokerFace600368706.jpg" />  
         </div>
             
      </div>
        
   </div>
       
   <div class="pouah">
        
      <div class="bloc2 PA_predef">
           
         <marquee onmouseout="this.start();" onmouseover="this.stop();" scrollamount="4">
              <a href="LIEN ICI DU PREDEF"><img alt="" src="http://img11.hostingpics.net/pics/5065735050.png" /></a> <a href="LIEN ICI DU PREDEF"><img alt="" src="http://img11.hostingpics.net/pics/5065735050.png" /></a> <a href="LIEN ICI DU PREDEF"><img alt="" src="http://img11.hostingpics.net/pics/5065735050.png" /></a> <a href="LIEN ICI DU PREDEF"><img alt="" src="http://img11.hostingpics.net/pics/5065735050.png" /></a> <br /><br /><a href="LIEN ICI DU PREDEF"><img alt="" src="http://img11.hostingpics.net/pics/5065735050.png" /></a> <a href="LIEN ICI DU PREDEF"><img alt="" src="http://img11.hostingpics.net/pics/5065735050.png" /></a> <a href="LIEN ICI DU PREDEF"><img alt="" src="http://img11.hostingpics.net/pics/5065735050.png" /></a> <a href="LIEN ICI DU PREDEF"><img alt="" src="http://img11.hostingpics.net/pics/5065735050.png" /></a>  
         </marquee>
             
      </div>
        
   </div><br /><br />  
   <div class="pouah">
        
      <div class="bloc3 PA_partenaire">
          <a href="LIEN DU PARTENAIRE"><img alt="" src="http://img4.hostingpics.net/pics/6550819941.png" />  
            <!--   <a   --> </a><a href="LIEN DU PARTENAIRE"><img alt="" src="http://img4.hostingpics.net/pics/6550819941.png" />  
            <!--   <a   --> </a><a href="LIEN DU PARTENAIRE"><img alt="" src="http://img4.hostingpics.net/pics/6550819941.png" />  
            <!--   <a   --><br /></a><a href="LIEN DU SUJET">Devenir partenaire ?</a> - <a href="LIEN SU SUJET">Nos partenaires</a>  
      </div>
        
   </div>
       
   <div class="pouah">
        
      <div class="bloc3 PA_liens">
          <a href="LIEN ICI">Liens utiles</a><br /><a href="LIEN ICI">Liens utiles</a><br /><a href="LIEN ICI">Liens utiles</a><br /><a href="LIEN ICI">Liens utiles</a><br /><a href="LIEN ICI">Liens utiles</a><br />  
      </div>
        
   </div>
       
   <div class="pouah">
        
      <div class="bloc3 PA_crédit">
          <img alt="" src="http://img4.hostingpics.net/pics/6550819941.png" /><br />Crédits  
      </div>
        
   </div><br /><a style="text-decoration:none; font-size:11px; color:white; text-align:center; display:block;" href="http://www.never-utopia.com/">© A-Lice</a><br />
</div>

CSS:

Code:

/****PA***/
.pouah {
display:inline-block;
margin-right:30px;
}

.bloc1 {
height:150px;
padding:10px;
}

.bloc2 {
height:120px;
padding:10px;
}

.bloc3 {
height:55px;
padding:10px;
}

.staff {
position: relative;
height: 144px;
width: 60px;
overflow: visible;
display:inline-block;
background:white;
padding:3px;
font-size:11px;
color:#5A0D17;
}

.staff .staff_infobulle {
position: absolute;
top: 70px;
left: -60px;
width: 120px;
height: 200px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
font-size:16px;
}

.staff:hover .staff_infobulle {
opacity: 1;
visibility: visible;
z-index: 99;
}

div.PA_img {
width:300px;
height:140px;
overflow:hidden;
display:inline-block;
}
  
div.PA_img2 {
width:280px;
height:120px;
padding:10px;
overflow:auto;  
position:relative;
color:white;
text-align:justify;
}

.PA_img img {
    width:300px;
    height:140px;  
    position: relative;  
    bottom: 140px;
    transition: 0.5s;  
}
.PA_img:hover img {  
    bottom:280px;
    transition: 0.5s;  
}

#PA_fond {
background:#ADA1A1;
width:850px;
color:white;
}

.PA_titre {
font-size:30px;
text-align:center;
padding:10px;
color:#5A0D17;
}

.PA_contexte {
background:#1C644C;
width:320px;
overflow:auto;
text-align:justify;
}

.PA_staff {
background:#5A0D17;
width:280px;
position:inline-block;
top:-15px;
}

.PA_img_staff {
width:55px;
height:120px;
}

.PA_img_staff2 {
width:120px;
height:180px;
}

.PA_image {
background:#5A0D17;
width:280px;
}

.PA_predef {
background:#1C644C;
width:320px;
position:relative;
top:-10px;
}

.PA_partenaire {
background:#5A0D17;
width:320px;
font-size:11px;
text-align:center;
position:relative;
top:-12px;
}

.PA_liens {
background:#1C644C;
width:130px;
overflow:auto;
}

.PA_crédit {
background:#5A0D17;
width:110px;
position:relative;
top:-12px;
}
/**FIN PA******/

Merci beaucoup!

Nono-Chan a écrit:Cependant je ne parviens pas à aligner les blocs "contexte" et "staff". Il y a toujours un énorme décalage entre les deux.

Change ceci :

Code:

.PA_staff {
background:#5A0D17;
width:280px;
position:inline-block;
top:-15px;
}

Pour ceci :

Code:

.PA_staff {
background: #5A0D17;
width: 280px;
position: relative;
top: -13px;
}

Je ne connais pas le navigateur Maxthon, mais, sur Chrome, ça règle le problème. =)
(J'ai changé la position en "relative" (Afin que la div "bloc1 PA_staff" se positionne par rapport à la div "pouah" qui, elle, est en inline-block), puis j'ai modifié le positionnement vertical de 2 pixels (-13 au lieu de -15))

Pour les titres, je vais laisser quelqu'un d'autre voir ça. Je manque un peu de temps. ^^

Je te remercie pour ton aide!
Malheureusement sur Maxthon, le problème persiste...

EDIT: le problème semble finalement avoir disparu, merci en tout cas

Demande toujours d'actu pour les noms de catégories

Salut,
Tu veux que ces noms soient placés comment ? Tu aurais un exemple ?

Bonjour,

Je n'ai pas d'exemple actuellement ^^' Je pourrai en faire un dans deux semaines seulement. Je souhaiterais que les titres soient au dessus. Contexte, Staff, Prédef et infos au dessus de l'image qui cache le texte ^^ (je ne sais pas si c'est clair)

Coucou (^-^)

Je ne suis pas sûre d'avoir compris pour les titres, j'ai donc fait quelques essais :
Centré :


Aligné à gauche :


Avec un placement spécial :


Est ce que c'est de ça dont tu parlais ? Si oui, plutôt comment :p ?

Bonsoir, merci de t'intéresser à mon problème ^^
Oui pour les titres c'était cela dont je parlais! Pour le contexte je préfère centrer en tout cas!

Super si ça te va :)

On va commencer par le contexte, le html est actuellement celui ci :

Code:

<div class="pouah">
                  
 <div class="bloc1 PA_contexte">
             Epoque médiévale. Le roi Arthur Pendragon a accédé au trône et règne sur la citée de Camelot en Grande Bretagne. Lors d'un voyage pour le royaume de France, il découvre une île au large des côtes armoriquaines. Presque aussitôt, le souverain y fait construire une citadelle dans le plus grand secret et des hommes réputés pour s'intéresser à la science y sont envoyés pour de mystérieuses raisons. Lorsque le règne du dernier Pendragon prend fin, la citadelle et l'île furent abandonnées et disparurent des cartes de l'époque. Tout document portant la trace de ce lieu fut brûlé et son accès fut rendu presque impossible. L'île semblait n'avoir jamais existé. Ce n'est qu'au début des années 2000 qu'un individu, Dimitri J. Owen, s'intéresse à nouveau au roi Arthur. Etudiant fraichement diplômé de médecine, l'homme a toujours été fasciné par les légendes arthuriennes entourant ce mystique personnage. Ses études étant terminées, il décida donc de faire de plus amples recherches et découvrit dans un très vieil ouvrage une allusion à une étrange île ayant abritée les hommes du roi Pendragon. Intrigué, il entama alors une longue série de recherches visant à en apprendre davantage et à connaître l'emplacement de ce lieu énigmatique. Il fallut très exactement deux ans afin de collecter les données nécessaires et ce fut un jour de février que Dimitri se rendit sur l'archipel et en foula le sol. Et il n'était pas encore conscient qu'il allait y déterrer un secret capable de révolutionner la science et la face du monde.        
 </div>
                  
</div>

Pour rajouter le titre on remplace comme ça :

Code:

<div class="pouah">
        <div class="bloc1_titre">Contexte</div>
 <div class="bloc1 PA_contexte">
             Epoque médiévale. Le roi Arthur Pendragon a accédé au trône et règne sur la citée de Camelot en Grande Bretagne. Lors d'un voyage pour le royaume de France, il découvre une île au large des côtes armoriquaines. Presque aussitôt, le souverain y fait construire une citadelle dans le plus grand secret et des hommes réputés pour s'intéresser à la science y sont envoyés pour de mystérieuses raisons. Lorsque le règne du dernier Pendragon prend fin, la citadelle et l'île furent abandonnées et disparurent des cartes de l'époque. Tout document portant la trace de ce lieu fut brûlé et son accès fut rendu presque impossible. L'île semblait n'avoir jamais existé. Ce n'est qu'au début des années 2000 qu'un individu, Dimitri J. Owen, s'intéresse à nouveau au roi Arthur. Etudiant fraichement diplômé de médecine, l'homme a toujours été fasciné par les légendes arthuriennes entourant ce mystique personnage. Ses études étant terminées, il décida donc de faire de plus amples recherches et découvrit dans un très vieil ouvrage une allusion à une étrange île ayant abritée les hommes du roi Pendragon. Intrigué, il entama alors une longue série de recherches visant à en apprendre davantage et à connaître l'emplacement de ce lieu énigmatique. Il fallut très exactement deux ans afin de collecter les données nécessaires et ce fut un jour de février que Dimitri se rendit sur l'archipel et en foula le sol. Et il n'était pas encore conscient qu'il allait y déterrer un secret capable de révolutionner la science et la face du monde.        
 </div>
                  
</div>

Et ensuite tu vas dans ton CSS pour mettre ça :

Code:

/* titre PA */
.bloc1_titre {
    font-size: 24px;
}

Et ensuite on fait de même pour chaque bloc. C'est à dire qu'on rajoute le titre juste après :

Code:

<div class="pouah">

On met :

Code:

<div class="bloc1_titre">Contexte</div>

En changeant juste "Contexte" par autre chose ^^
Pour le CSS, pas besoin de rajouter quoi que ce soit ensuite

Il y a en a qui vont poser des petits problèmes comme ici :
On verra après comment régler ça, on commence par bien finir de mettre les titres partout où il faut ^-^

Bonsoir!

J'ai fais ce qu'il fallait et tout est mis en place. Comme tu le disais, il y a quelques catégories où le titre est trop bas. Sur les prédéfinis, le staff, les crédits et les partenaires. En tout cas merci tu m'aides vraiment beaucoup!

Top ♥

Maintenant on s'attaque aux décalages.

Il y a dans le CSS ceci :

Code:


.pouah {
    display: inline-block;
    margin-right: 30px;
}

On va rajouter :

Code:

vertical-align: top;

Et ensuite il y a plusieurs lignes dans le CSS à supprimer, il s'agit des "top: -12px" (ou 13px, ou 10px, ça dépend des endroits).

Voici les blocs que cela concerne (ceux qui avaient un problème justement) :

Code:

.PA_crédit {
background:#5A0D17;
width:110px;
position:relative;
top:-12px;
}

Code:

.PA_partenaire {
background:#5A0D17;
width:320px;
font-size:11px;
text-align:center;
position:relative;
top:-12px;
}

Code:

.PA_predef {
background:#1C644C;
width:320px;
position:relative;
top:-10px;
}

Code:

.PA_staff {
background:#5A0D17;
width:280px;
position:inline-block;
top:-15px;
}

Ouah c'est nickel ça marche super bien!

C'est beaucoup mieux dis donc. Hum et si par exemple je voudrais changer la police d'écriture? Enfin tu n'es pas obligée, c'est vraiment génial de m'avoir déjà apporté ton aide!

Contente que ça marche bien :)

Pour tout le style éventuel à mettre pour les titres, on le rajoute ici :

Code:

/* titre PA */
.bloc1_titre {
        font-size: 24px;
}

Ainsi, on pourrait avoir :

Code:

/* titre PA */
.bloc1_titre {
    font-size: 24px;
    font-family: "Dancing Script", cursive;
}

J'ai repris la même police pour les titres de tes forums, Dancing Script

Merci beaucoup!

Contente d'avoir pu t'aider, n'hésite pas à éditer ton premier message pour cocher l’icône "Terminé" ♥