« Une PA qui beugue, et une fille dans la galère. DD: »

Coucou. c:
Comment dire que je galère avec une PA ? Je galère avec une PA. Sisi

Breeef, j'ai emprunté une PA (en libre service) à Sunhae sur Pixel Paradise (elle est aussi en LS sur Libre Graph) et je l'ai modifiée, sauf que pour les ronds du staff et des concours, il y a deux petits problèmes.
L'un ; je ne peux mettre plus d'un mot sinon ça fait tout beuguer.
L'autre ; les textes à l'intérieur du rond sont tout en haut alors que je voudrais qu'ils soient au milieu, j'ai essayé avec des padding et des margin et ça ne marche pas.
Voici quelques screens pour vous éclairer :

Problème 1 :
Une PA qui beugue, et une fille dans la galère. DD: 1453805995-probleme-forum

Une PA qui beugue, et une fille dans la galère. DD: 1453805995-probleme-forum

Problème 2 :
Une PA qui beugue, et une fille dans la galère. DD: 1453805979-probleme-forum-2

Voici le CSS de la PA :

Code:: .nomfow{
font-size: 16px;
text-align: center;
color: #515569;
text-shadow: 1px 1px 0px #fff;
text-transform:uppercase;
letter-spacing: -2px;
}

.lienutil{
text-align: center;
color: #a18b7c!important;
text-shadow: 1px 1px 0px #E9E4D1;
text-transform:uppercase;
}

.titrep{

text-align: center;
width: auto;
height: 15px;
background-color: #515569;
color: #E8E8F7;
text-transform:uppercase;
text-shadow: 1px 1px 0px #fff;
}

.bloc1{
border: 1px solid #515569;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 150px;
height: 120px;
background-color: #E8E8F7;
overflow: auto;
}

.bloc2{
border: 1px solid #515569;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 300px;
height: 120px;
background-color: #E8E8F7;
overflow: hidden;
}

.bloc2texte{
width: 295px;
height: 105px;
overflow: auto;
padding: 3px;
}

.bloc2 img{
margin-top: -111px;
transition: transform 2s;
-moz-transition: -moz-transform 3s;
-o-transition: -o-transform 3s;
-webkit-transition: -webkit-transform 3s;
}

.bloc2:hover img{
transform: translateX(+338px);
-moz-transform: translateX(+338px);
-o-transform: translateX(+338px);
-webkit-transform: translateX(+338px);
}

.bloc3{
border: 1px solid #515569;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 220px;
height: 120px;
background-color: #E8E8F7;
overflow: auto;
}

.bloc4{
border: 1px solid #515569;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 300px;
height: 120px;
background-color: #E8E8F7;
overflow: auto;
}

.bloc4 img{
margin: 3px;
}

.staff{
margin: 3px;
border: 1px solid #515569;
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
border-radius: 125px;
width: 60px;
height: 60px;
background-color: #E8E8F7;
overflow: hidden;
text-align: center;
}

.staff img{
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
border-radius: 125px;
margin-top: -12px;
transition: transform 1s;
-moz-transition: -moz-transform 2s;
-o-transition: -o-transform 2s;
-webkit-transition: -webkit-transform 2s;
transform:rotate(-5deg); -webkit-transform:rotate(-5deg);
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
width: 60px;
height: 60px;
}

.staff:hover img{
opacity: 0;
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
border-radius: 125px;
transition: transform 1s;
-moz-transition: -moz-transform 2s;
-o-transition: -o-transform 2s;
-webkit-transition: -webkit-transform 2s;
transform:rotate(360deg); -webkit-transform:rotate(360deg);
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}

.concours img {
margin-top: -12px;
transition: transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
-webkit-transition: -webkit-transform 1s;
width: 50px;
height: 50px;
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
border-radius: 125px;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}

.concours:hover img{
opacity: 0;
transition: transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
-webkit-transition: -webkit-transform 1s;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}

.concours{
margin: 3px;
margin-left:8px;
border: 1px solid #515569;
width: 50px;
height: 50px;
text-align: center;
background-color: #E8E8F7;
overflow: hidden;
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
border-radius: 125px;
}

Et voici le HTML de la PA :

Code:: <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" />
<table cellspacing="10">

<tbody>

   <tr>

      <td colspan="3">

         <div class="nomfow">
               Olympe Graphique
         </div>

         <div class="lienutil">
               <a href="LIEN">Règlement</a> - <a href="LIEN">Questions</a> - <a href="LIEN">Partie Invités</a> - <a href="LIEN">Les points</a>
         </div>

      </td>

   </tr>

   <tr>

      <td>

         <div class="bloc1">

            <div class="titrep">
                  Crédits
            </div>
               Page d'Accueil (c) Sunhae de <a href="http://www.pixels-paradise.com/">Pixels Paradise</a> et modifiée par Eowyn. <br />Thème (c) Vix sur Cocktail Graph.
         </div>

      </td>

      <td>

         <div class="bloc2">

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

            <div class="bloc2texte">
                  L'Olympe Graphique est un forum de graphisme accueillant les débutants comme les graphistes confirmés, le tout dans une ambiance mythologique et divinement agréable. Avant toute chose, vous devez lire ce présent règlement et poster votre présentation (si cela n'est pas fait sous deux semaines, votre compte sera supprimé). Ensuite, nous vous invitons à aller poster votre examen de départ, pour que nous puissions vous donner un niveau.
            </div><img src="http://image.noelshack.com/fichiers/2016/04/1453741433-388321gaiaban2.png" />
         </div>

      </td>

      <td>

         <div class="bloc3">

            <div class="titrep">
                  Nouveautés
            </div>
               26.01.16 - Installation du nouveau thème (c) Vix sur Cocktail Graph. <br />24.01.16 - Installation de la nouvelle PA. <br /> 17.01.16 - Création du forum.
         </div>

      </td>

   </tr>

</tbody>
</table>

<table cellspacing="10">

<tbody>

   <tr>

      <td>

         <div class="bloc3">

            <div class="titrep">
                  Staff
            </div><br />
            <table>

               <tbody>

                  <tr>

                     <td>

                        <div class="staff">
                              EOWYN <img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="staff">
                              HERMES <img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="staff">
                              POSTULEZ<img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                  </tr>

               </tbody>

            </table>

         </div>

      </td>

      <td>

         <div class="bloc3">

            <div class="titrep">
                  Concours
            </div>

            <table>

               <tbody>

                  <tr>

                     <td>

                        <div class="concours">
                              SOTW<img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="concours">
                              HOTM<img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="concours">
                              AOTW<img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                  </tr>

                  <tr>

                     <td>

                        <div class="concours">
                              Thème (c) Vix<img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="concours">
                              CODAGE<img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="concours">
                              AUTRE<img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                  </tr>

               </tbody>

            </table>

         </div>

      </td>

      <td>

         <div class="bloc4">

            <div class="titrep">
                  Partenaires
            </div><br /><img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" /> <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" /> <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" /><br /><img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" /> <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" /> <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" />
         </div>

      </td>

   </tr>

</tbody>
</table>

Merci d'avance, et bon courage. x)

Méthode de barbare, tu mets des sauts de ligne pour baisser la place du texte. :D

J'approuve la méthode du barbare :')))

Sinon essaie de réduite un peu la taille du texte en plus. :p

Coucou ma Gaga <3
J'ai réglé ton problème:

J'ai ajouté quelques div et propriétés CSS pour que se soit bien plus facile à modifier o/

Code:: /* PA */

.nomfow{
  font-size: 16px;
  text-align: center;
  color: #515569;
  text-shadow: 1px 1px 0px #fff;
  text-transform:uppercase;
  letter-spacing: -2px;
}

.lienutil{
  text-align: center;
  color: #a18b7c!important;
  text-shadow: 1px 1px 0px #E9E4D1;
  text-transform:uppercase;
}

.titrep{

  text-align: center;
  width: auto;
  height: 15px;
  background-color: #515569;
  color: #E8E8F7;
  text-transform:uppercase;
  text-shadow: 1px 1px 0px #fff;
}

.bloc1{
  border: 1px solid #515569;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 150px;
  height: 120px;
  background-color: #E8E8F7;
  overflow: auto;
}

.bloc2{
  border: 1px solid #515569;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 300px;
  height: 120px;
  background-color: #E8E8F7;
  overflow: hidden;
}

.bloc2texte{
  width: 295px;
  height: 105px;
  overflow: auto;
  padding: 3px;
}

.bloc2 img{
  margin-top: -111px;
  transition: transform 2s;
  -moz-transition: -moz-transform 3s;
  -o-transition: -o-transform 3s;
  -webkit-transition: -webkit-transform 3s;
}

.bloc2:hover img{
  transform: translateX(+338px);
  -moz-transform: translateX(+338px);
  -o-transform: translateX(+338px);
  -webkit-transform: translateX(+338px);
}

.bloc3{
  border: 1px solid #515569;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 225px;
  height: 120px;
  background-color: #E8E8F7;
  overflow: auto;
}

.bloc4{
  border: 1px solid #515569;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 300px;
  height: 120px;
  background-color: #E8E8F7;
  overflow: auto;
}

.bloc4 img{
  margin: 3px;
}

.staff{
  margin: 9px;
  margin-left:1px;
  border: 1px solid #515569;
  -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
  width: 60px;
  height: 60px;
  background-color: #E8E8F7;
  overflow: hidden;
text-align: center;
}

.text_staff {
  text-align:center;
  margin-top:10px;
  font-size:10px;
}

.staff img{
  -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
  margin-top: -32px;
  transition: transform 1s;
  -moz-transition: -moz-transform 2s;
  -o-transition: -o-transform 2s;
  -webkit-transition: -webkit-transform 2s;
transform:rotate(-5deg); -webkit-transform:rotate(-5deg);
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
  width: 60px;
  height: 60px;
}

.staff:hover img{
  opacity: 0;
   -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
transition: transform 1s;
  -moz-transition: -moz-transform 2s;
  -o-transition: -o-transform 2s;
  -webkit-transition: -webkit-transform 2s;
transform:rotate(360deg); -webkit-transform:rotate(360deg);
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}

.concours img {
  margin-top: -21px;
  transition: transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  width: 50px;
  height: 50px;
   -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
  overflow:hidden;
}
.concours_text {
  font-size:8px;
  margin-top:10px;
  text-align:center;
}

.concours:hover img{
  opacity: 0;
transition: transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  -webkit-transition: -webkit-transform 1s;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}

.concours{
  margin: 3px;
  margin-left:8px;
  border: 1px solid #515569;
  width: 50px;
  height: 50px;
  text-align: center;
  background-color: #E8E8F7;
  overflow:hidden;
   -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
}

.concours_theme{
  margin: 3px;
  margin-left:8px;
  border: 1px solid #515569;
  width: 50px;
  height: 50px;
  text-align: center;
  background-color: #E8E8F7;
  overflow:hidden;
   -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
}

.concours_theme img {
  margin-top: -29px;
  transition: transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  width: 50px;
  height: 50px;
   -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
  overflow:hidden;
}

.concours_theme:hover img{
  opacity: 0;
transition: transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  -webkit-transition: -webkit-transform 1s;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}

Code:: <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<table cellspacing="10">

<tbody>

   <tr>

      <td colspan="3">

         <div class="nomfow">
            Olympe Graphique
         </div>

         <div class="lienutil">
            <a href="LIEN">Règlement</a> - <a href="LIEN">Questions</a> - <a href="LIEN">Partie Invités</a> - <a href="LIEN">Les points</a>
         </div>

      </td>

   </tr>

   <tr>

      <td>

         <div class="bloc1">

            <div class="titrep">
               Crédits
            </div>
            Page d'Accueil (c) Sunhae de <a href="http://www.pixels-paradise.com/">Pixels Paradise</a> et modifiée par Eowyn. <br />Thème (c) Vix sur Cocktail Graph.
         </div>

      </td>

      <td>

         <div class="bloc2">

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

            <div class="bloc2texte">
               L'Olympe Graphique est un forum de graphisme accueillant les débutants comme les graphistes confirmés, le tout dans une ambiance mythologique et divinement agréable. Avant toute chose, vous devez lire ce présent règlement et poster votre présentation (si cela n'est pas fait sous deux semaines, votre compte sera supprimé). Ensuite, nous vous invitons à aller poster votre examen de départ, pour que nous puissions vous donner un niveau.
            </div><img src="http://image.noelshack.com/fichiers/2016/04/1453741433-388321gaiaban2.png" />
         </div>

      </td>

      <td>

         <div class="bloc3">

            <div class="titrep">
               Nouveautés
            </div>
            26.01.16 - Installation du nouveau thème (c) Vix sur Cocktail Graph. <br />24.01.16 - Installation de la nouvelle PA. <br /> 17.01.16 - Création du forum.
         </div>

      </td>

   </tr>

</tbody>
</table>

<table cellspacing="10">

<tbody>

   <tr>

      <td>

         <div class="bloc3">

            <div class="titrep">
               Staff
            </div><br />
            <table>

               <tbody>

                  <tr>

                     <td>

                        <div class="staff">

                           <div class="text_staff">
                              EOWYN <br /> <span style="font-size: 8px;">MP - ADMIN </span>
                           </div>
                           <img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="staff">

                           <div class="text_staff">
                              HERMES <br /> <span style="font-size: 8px;">MP - ADMIN </span>
                           </div>
                           <img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="staff">

                           <div class="text_staff">
                              POSTULEZ <br /><span style="font-size: 8px;">MP -ADMIN </span>
                           </div><img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                  </tr>

               </tbody>

            </table>

         </div>

      </td>

      <td>

         <div class="bloc3">

            <div class="titrep">
               Concours
            </div>

            <table>

               <tbody>

                  <tr>

                     <td>

                        <div class="concours">

                           <div class="concours_text">
                              SOTW
                           </div><img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="concours">

                           <div class="concours_text">
                              HOTM
                           </div><img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="concours">

                           <div class="concours_text">
                              AOTW
                           </div><img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                  </tr>

                  <tr>

                     <td>

                        <div class="concours_theme">

                           <div class="concours_text">
                              Thème (c)Vix
                           </div><img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="concours">

                           <div class="concours_text">
                              CODAGE
                           </div><img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                     <td>

                        <div class="concours">

                           <div class="concours_text">
                              AUTRE
                           </div><img src="http://image.noelshack.com/fichiers/2016/04/1453805434-staff.png" />
                        </div>

                     </td>

                  </tr>

               </tbody>

            </table>

         </div>

      </td>

      <td>

         <div class="bloc4">

            <div class="titrep">
               Partenaires
            </div><br /><img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" /> <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" /> <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" /><br /><img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" /> <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" /> <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" />
         </div>

      </td>

   </tr>

</tbody>
</table>

J'up pour que tu vois le message de Yuuki, Gaïa ^^ Cela résout-il ton problème ?

Up ^^ Je laisse le topic pour que tu puisses voir, la modération pourra archiver dans une semaine

J'archive

» Luw et sa petite galère-rit
» La Potaoes est dans l'eau, je répète, elle est dans l'eau. Terminé.
» Présentation d'une fille de 12 ans~
» Le KFC de la fille de Darvador. [3/3]
» Fille a analyser

« Une PA qui beugue, et une fille dans la galère. DD: »

Une PA qui beugue, et une fille dans la galère. DD:

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Recherche avancée

Page 1 sur 1