centrer mes catégories

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu centrer mes catégories

Message par carousse le Sam 24 Juin 2017 - 12:47

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

avatar

carousse
*****

Messages : 844
Inscrit(e) le : 02/08/2008

http://rpg-vampire-knight.vampire-legend.com/
carousse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mes catégories

Message par carousse le Dim 25 Juin 2017 - 17:48

up
avatar

carousse
*****

Messages : 844
Inscrit(e) le : 02/08/2008

http://rpg-vampire-knight.vampire-legend.com/
carousse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mes catégories

Message par MasDan le Dim 25 Juin 2017 - 23:15

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;
avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1104
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mes catégories

Message par carousse le Dim 25 Juin 2017 - 23:58

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é
avatar

carousse
*****

Messages : 844
Inscrit(e) le : 02/08/2008

http://rpg-vampire-knight.vampire-legend.com/
carousse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mes catégories

Message par MlleAlys le Lun 26 Juin 2017 - 0:35

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;
}
avatar

MlleAlys
Membre actif

Messages : 4624
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: centrer mes catégories

Message par carousse le Lun 26 Juin 2017 - 12:21

C'est parfait merci beaucoup tous les deux
avatar

carousse
*****

Messages : 844
Inscrit(e) le : 02/08/2008

http://rpg-vampire-knight.vampire-legend.com/
carousse a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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