centrer mes catégories

[carousse]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://testcaro.forumactif.com/

Description du problème

Bonjour,

J'ai pris un codage en libre service. Mais je souhaiterai que mes images soient centrer sur mon fond blanc, que l'endroit ou les traits son rouge soit égal enfaite.. Quel partie du code faudrait il que je change pour réussir cela?

Mon template

Code:

<!-- BEGIN catrow -->
<!-- BEGIN tablehead --><div class="categorie">{catrow.tablehead.L_FORUM}<!-- END tablehead -->
  <!-- BEGIN cathead -->
      <h{catrow.cathead.LEVEL} class="hierarchy">
                    {catrow.cathead.CAT_TITLE}
            </h{catrow.cathead.LEVEL}>
     
  <!-- END cathead -->
  <!-- BEGIN forumrow --><div class="forum">
        <div class="desc">
                          <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_DESC}</a>
        </div>
        <div class="encart">
                                <h{catrow.forumrow.LEVEL} class="titreForum">
                                        <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                                </h{catrow.forumrow.LEVEL}>
                                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="iconeForum" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
               
                                <div class="sousForums">
                                        {catrow.forumrow.LINKS}
                                </div>
                                <div class="stats">
                                      Il y a {catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages
                                </div>
               
                                <div class="dernierPoste">
                                        {catrow.forumrow.LAST_POST}
                                </div>
        </div>
     
  </div><!-- END forumrow -->
<!-- BEGIN tablefoot --></div><!-- END tablefoot -->
<!-- END catrow -->

Merci d'avance à vous

[carousse]

up

[MasDan]

Bonjour Carousse,

À votre code CSS, rechercher

Code:

.forum {
  float:left;
  margin:0 22px 40px;
  width:365px
}

et remplacer la ligne 3 par

Code:

margin: 0 0 40px 37px;

[carousse]

Bonsoir,

J'ai fait la modification, mais cela n'a pas résolue mon problème. Ca à bouger un petit mais pas au milieu.

Je vous met tout mon CSS si jamais quelques chose le fait buger, celui pour les catégorie se trouve tout en bas

Code:

/*fiche de Présentation*/
.img {
width: 200px;
  height: 320px;
  overflow: hidden;
  border: 1px solid #000000;
  padding: 3px;
}

.upper {
  height: 320px;
  width: 200px;
  text-align: center;
  color: #000000;
  transition: 1s;
  background-color: #E7E7E7;
  margin-top: -324px;
  overflow: auto;
  margin-left: -30px;
  opacity: 0;
  padding-top: 5px;
}

.upper:hover {
  transition: 1s;
  opacity: 0.7;
    margin-left: 4px;
}

/*fiche post vacant*/

.cadre {
    border: 1px solid #55472D;
    width: 700px;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    font-family: Georgia, "Times New Roman";
    box-shadow: 0px 0px 5px #000000;
    margin: 0px auto 0px auto;
}
.titre {
    position: absolute;
    margin-top: 70px;
    margin-left: 150px;
}
.textetitre {
    font-family: Pristina, Georgia, "Times New Roman";
    font-variant: small-caps;
    font-size: 50px;
    line-height: 0.6;
    letter-spacing: 1px;
    -moz-transition: all 700ms; /* Mozilla Firefox */
    -webkit-transition: all 700ms; /* Safari et Google Chrome */
    -o-transition: all 700ms; /* Opera */
    transition: all 700ms;
}
.textetitre:hover, .textesoustitre:hover {
    letter-spacing: 5px;
    -moz-transition: all 700ms; /* Mozilla Firefox */
    -webkit-transition: all 700ms; /* Safari et Google Chrome */
    -o-transition: all 700ms; /* Opera */
    transition: all 700ms;
}
.texte1 {
    display: block;
    padding-left: 20px;
    font-size: 15px;
}

/* francois*/

.img_cent {
    height: 100px;
    width: 100px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/210.jpg);
    position: absolute;
    margin: -50px auto 0px 50px;
    border-radius: 50%;
    border: 1px solid #55472D;
}
.img_cinq {
    height: 50px;
    width: 50px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/111.jpg);
    position: absolute;
    margin: -25px auto 0px 152px;
    border-radius: 50%;
    border: 1px solid #55472D;
}

/* mary*/

.img_cent1 {
    height: 100px;
    width: 100px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/112.jpg);
    position: absolute;
    margin: -50px auto 0px 50px;
    border-radius: 50%;
    border: 1px solid #55472D;
}
.img_cinq1 {
    height: 50px;
    width: 50px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/211.jpg);
    position: absolute;
    margin: -25px auto 0px 152px;
    border-radius: 50%;
    border: 1px solid #55472D;
}

/* Sebastien*/

.img_cent2 {
    height: 100px;
    width: 100px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/113.jpg);
    position: absolute;
    margin: -50px auto 0px 50px;
    border-radius: 50%;
    border: 1px solid #55472D;
}
.img_cinq2 {
    height: 50px;
    width: 50px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/212.jpg);
    position: absolute;
    margin: -25px auto 0px 152px;
    border-radius: 50%;
    border: 1px solid #55472D;
}

/*Claude*/

.img_cent4 {
    height: 100px;
    width: 100px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/114.jpg);
    position: absolute;
    margin: -50px auto 0px 50px;
    border-radius: 50%;
    border: 1px solid #55472D;
}
.img_cinq4 {
    height: 50px;
    width: 50px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/213.jpg);
    position: absolute;
    margin: -25px auto 0px 152px;
    border-radius: 50%;
    border: 1px solid #55472D;
}

/*Catherine*/

.img_cent3 {
    height: 100px;
    width: 100px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/115.jpg);
    position: absolute;
    margin: -50px auto 0px 50px;
    border-radius: 50%;
    border: 1px solid #55472D;
}
.img_cinq3 {
    height: 50px;
    width: 50px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/214.jpg);
    position: absolute;
    margin: -25px auto 0px 152px;
    border-radius: 50%;
    border: 1px solid #55472D;
}

/*lola*/

.img_cent5 {
    height: 100px;
    width: 100px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/116.jpg);
    position: absolute;
    margin: -50px auto 0px 50px;
    border-radius: 50%;
    border: 1px solid #55472D;
}
.img_cinq5 {
    height: 50px;
    width: 50px;
    background-image: url(https://servimg.com/view/12758648/2077);
    position: absolute;
    margin: -25px auto 0px 152px;
    border-radius: 50%;
    border: 1px solid #55472D;
}

/*Kenna*/

.img_cent6 {
    height: 100px;
    width: 100px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/117.jpg);
    position: absolute;
    margin: -50px auto 0px 50px;
    border-radius: 50%;
    border: 1px solid #55472D;
}
.img_cinq6 {
    height: 50px;
    width: 50px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/216.jpg);
    position: absolute;
    margin: -25px auto 0px 152px;
    border-radius: 50%;
    border: 1px solid #55472D;
}

/*greer*/

.img_cent7 {
    height: 100px;
    width: 100px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/118.jpg);
    position: absolute;
    margin: -50px auto 0px 50px;
    border-radius: 50%;
    border: 1px solid #55472D;
}
.img_cinq7 {
    height: 50px;
    width: 50px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/217.jpg);
    position: absolute;
    margin: -25px auto 0px 152px;
    border-radius: 50%;
    border: 1px solid #55472D;
}

/*Nostradamus*/

.img_cent8 {
    height: 100px;
    width: 100px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/119.jpg);
    position: absolute;
    margin: -50px auto 0px 50px;
    border-radius: 50%;
    border: 1px solid #55472D;
}
.img_cinq8 {
    height: 50px;
    width: 50px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/218.jpg);
    position: absolute;
    margin: -25px auto 0px 152px;
    border-radius: 50%;
    border: 1px solid #55472D;
}

/*leith*/

.img_cent9 {
    height: 100px;
    width: 100px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/120.jpg);
    position: absolute;
    margin: -50px auto 0px 50px;
    border-radius: 50%;
    border: 1px solid #55472D;
}
.img_cinq9 {
    height: 50px;
    width: 50px;
    background-image: url(https://i58.servimg.com/u/f58/12/75/86/48/219.jpg);
    position: absolute;
    margin: -25px auto 0px 152px;
    border-radius: 50%;
    border: 1px solid #55472D;
}

.img_titre {
    border-bottom: 2px solid #55472D;
    background-image: url(http://i18.servimg.com/u/f18/18/64/66/00/sans_t10.png);
    height: 150px;
}
.soustitre {
    margin-left: 100px;
}
.textesoustitre {
    font-variant: small-caps;
    font-size: 25px;
    letter-spacing: 1px;
    -moz-transition: all 700ms; /* Mozilla Firefox */
    -webkit-transition: all 700ms; /* Safari et Google Chrome */
    -o-transition: all 700ms; /* Opera */
    transition: all 700ms;
}
.trait {
    height: 28px;
    width: 209px;
    background-image: url(http://i18.servimg.com/u/f18/18/64/66/00/sans_t11.png);
}
.zonetexte {
    border-top: 2px solid #55472D;
    background-image: url(http://i18.servimg.com/u/f18/18/64/66/00/off_wh10.jpg);
    min-height: 75px;
}
.texte2 {
    padding: 0px 15px 5px 15px;
    text-align: justify;
    font-family:"Times New Roman";
}
.credits {
    display: block;
    font-size: 7pt;
    text-align: right;
    padding-right: 25px;
}

/*Page d'acceuil*/

#VAES {
    background: #FFFFFF !important;
}

/* categorie carré*/

.bodylinewidth{ /*définition de la largeur du cadre du forum*/
    width:850px;
}


.categorie{
  margin:50px auto;
}
.categorie>h2{
  font: italic normal Georgia 45px;
    color:#2DA6C4;
    text-shadow:2px 1px 0px #CADCEB;
    text-align:center;
    padding:0 0 15px 0;
    border-bottom:6px solid #CADCEB;
}
.categorie:after{
  content:" ";
    display:block;
    clear:both;
}
.forum {
  float:left;
  margin: 0 0 40px 37px;
  width:365px
}

.forum a{
  color:#977587;
}
.desc{
  position:relative;
    width:100%;
    overflow:hidden;
}
.desc>a{
  text-decoration:none;
}
.descTexte{
  position:absolute;
    height:200px;
    padding:33px 20px;
    overflow:auto;
    font: 12px Georgia;
    color:white;
    text-align:justify;
    background:rgba(0,0,0,0.6);
    left:0;
    top:-266px;
    transition:top 0.5s;
 }
.descTexte:first-letter{ /*effet lettrine*/
  font: 2.2em;
    float:left;
    margin-right:5px;
 
}
.descTexte:first-child{/*comportement de la description du forum quand il n'y a pas d'image*/
  position:static;
    height:60px;
    background:#d7d7d7;
    color:#8a8a8a;
   
}
.descTexte+br{ /*cache le br ajouté par automatiquement après la description*/
  display:none;
}
.desc:hover .descTexte{
  top:0;
}
.encart{
  background:white;
    position:relative;
    padding:10px 20px;
    height:85px;
}
.iconeForum{
  bottom: 79px;
  position: absolute;
  right: 7px;
}
.titreForum{
  margin:0;
}
.titreForum a{
  font:Georgia italic 26px;
    color:#acacac;
    text-decoration:none;
}
.dernierPoste{
  position:absolute;
    right:20px;
    bottom:15px;
    text-align:right;
    width:70px;
}
.dernierPoste span, .dernierPoste .gensmall{
  font:12px Georgia;
    color:#acacac ;
    text-align:center;
}
.sousForums{
  font-variant:small-caps;
    font-size:15px;
    color:#898688;
    width:250px;
} 
.stats{
    margin:10px 0 0 0;
  color:#898688;
    font:13px Georgia;
 
}

Merci encore pour votre réponse et le temps passé

[MlleAlys]

Bonjour,
Localisez le code css suivant :

Code:

.categorie {
  margin: 50px auto;
}

et modifiez en :

Code:

.categorie {
  margin: 50px auto;
  text-align: center;
}

Puis localisez le code suivant :

Code:

.forum {
  float: left;
  margin: 0 0 40px 37px;
  width: 365px;
}

et modifiez en :

Code:

.forum {
  display: inline-block;
  margin: 0 20px 40px 20px;
  width: 365px;
}

[carousse]

C'est parfait merci beaucoup tous les deux