Problème de marge et de centrage

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

Résolu Problème de marge et de centrage

Message par MissPhan le Dim 21 Déc 2014 - 19:39

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
Problème apparu depuis : Depuis l'installation du thème
Lien du forum : http://dailan.forumgratuit.org/

Description du problème

Bonjour,

Me voilà face à un problème dont j'ignore la cause ... après l'installation de mon thème, impossible de supprimer les marges à droite et à gauche du header, je souhaiterai que ce dernier colle de chaque coté.

Pour le centrage, il s'agit des catégories qui sont plus vers d'un coté que de l'autre :/

Voici mon index_box

Spoiler:
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
             <tr id="currenttr" onClick="i= 0; e=this.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR') e[i].style.display=(e[i].style.display=='none')?'':'none'; retour=(my_getcookie(this.id)=='true')?'false':'true'; my_setcookie(this.id,retour, 1, 0);"  style="cursor:ne-resize;">
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM}&nbsp;</th>
  </tr>
      
      
      <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      
                  <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

                  </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

et mon CSS

Spoiler:
Code:
.bodyline {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}

.forumline {
width: 725px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}


.bodylinewidth {
width: 730px;
margin: -10px auto -30px auto;
}

a.mainmenu img {
display:none;
}

.postbody {
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-align:justify;
}

A:link {text-decoration: none !important;}
A:visited {text-decoration: none !important;}
A:active {text-decoration: none !important;}
A:hover {text-decoration: none !important;}

.forumlink{
  font-family: times;
font-size: 15px;
font-style: italic;
font-weight: lighter;
letter-spacing: 2px;
padding-left: 5px;
text-transform: lowercase;}
.forumlink:hover{
  transition:0.8s;}

.maintitle{
margin-top:-30px;
 }

.mainmenu {
font-size:12px;
font-family:times new roman;
letter-spacing:-1px!important;
text-transform:uppercase;
text-shadow: 0px 0px 1px;
color:#FFF2AC;
}

.qeel_titre
{
  width: 730px;
  height: 100px;
  background: url(http://image.noelshack.com/fichiers/2014/47/1416329760-qeel.png);
}
.qeel
{
  width: 730px;
  height: 400px;
  background: url(http://image.noelshack.com/fichiers/2014/47/1416325221-paj.png);
}
.qeel_table
{
  width: 612px;
  margin: auto;
}
.colonne
{
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 300px;
  overflow: auto;
  margin-top: 0px;
  margin-left: 0px;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 0px 0px 0px #0d1418;
  -moz-box-shadow: 0px 0px 0px #0d1418;
  -o-box-shadow: 0px 0px 0px #0d1418;
  -htm-box-shadow: 0px 0px 0px #0d1418;
  -webkit-box-shadow: 0px 0px 0px #0d1418;
  font-size: 9px;
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(opacity=50);
  transition: 1s;
  -moz-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
}
.colonne:hover
{
  position: absolute;
  z-index: 99;
  width: 300px;
  height: 400px;
  margin-top: -50px;
  margin-left: -50px;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 0px 0px 5px #0d1418;
  -moz-box-shadow: 0px 0px 5px #0d1418;
  -o-box-shadow: 0px 0px 5px #0d1418;
  -htm-box-shadow: 0px 0px 5px #0d1418;
  -webkit-box-shadow: 0px 0px 5px #0d1418;
  font-size: 11px;
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  transition: 1s;
  -moz-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
}
.qeel_contenu
{
  display: block;
  text-align: justify;
  padding: 10px;
}

.selectCode { float:right; text-transform: uppercase; cursor:pointer; }

.code {
width: 400px;
-webkit-border-radius: 10px;
border-radius:10px;
background-color: #C9A37C;
padding:10px;
}

.spoiler {
-webkit-border-radius: 10px;
border-radius:10px;
background-color: #c5ced1;
padding:10px;
}

.quote {
-webkit-border-radius: 10px;
border-radius:10px;
background-color: #C9A37C;
padding:10px;
}

/*SCROLLBAR*/

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb { background-color: #fff2ac; }
/* FIN */

/* --------------------------------- PA --------------------------------- */

/* Fond de la PA */
.fond_PA {
  padding: 15px;
  width: 720px;
  border-radius: 25px 0px 25px 0px;
  top: -0.9em;
  position: relative;
}

/* Titre de la PA */
.titre_PA {
  font-size: 30px;
  font-family: 'Permanent Marker', cursive;
  color: #E2922E;
  padding-left: 35px;
  text-align: left;
}

/* Contexte */
.contexte_PA {
  background-color: #ffffff;
  opacity: 0.6;
  -moz-opacity: 0.6;
  width: 250px;
  height: 150px;
  padding: 15px;
  color: #030303;
  text-align: justify;
  overflow: auto;
  font-size: 12px;
  position: relative;
  top: -0.5em;
}

/* Titre du contexte */
.titre_PA2 {
  font-size: 25px;
  font-family: 'Lobster', cursive;
  color: #348796;
  padding-left: 35px;
}

/* Bloc staff */
.staff_PA {
  background-color: #ffffff;
  opacity: 0.7;
  -moz-opacity: 0.7;
  width: 250px;
  padding: 15px;
  color: #030303;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 18px;
}

/* Bloc de chaque personnage du staff */
.contenu_staff {
  color: #E2922E;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 18px;
}

/* Bloc informations */
.bloc_info_PA {
  width: 187px;
  height: 40px;
  padding: 10px;
  background-color: #ffffff;
  opacity: 0.5;
  -moz-opacity: 0.5;
}

/* Liens de navigation rapide */
.liens_PA {
  font-size: 14px;
  text-align: center;
  font-family: 'Archivo Narrow', sans-serif;
}

/* Nouveautés au survol de l'image */
.new_PA {
  width: 300px;
  height: 150px;
  overflow: hidden;
  background-color: #ffffff;
  opacity: 0.7;
  -moz-opacity: 0.7;
}

.new_PA_img {
  position: relative;
  z-index: 2;
  width: 300px;
  height: 150px;
  margin-left: 0px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.new_PA:hover .new_PA_img {
  margin-left: 400px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.new_PA_description {
  position: relative;
  z-index: 1;
  width: 280px;
  height: 110px;
  margin-top: -150px;
  text-align: justify;
  font-size: 11px;
  color: #030303;
  padding: 15px;
  overflow: auto;
}

/* Illustration "mouette" */
.img_PA {
  width: 80px;
}

/* --------------------------------- FIN PA --------------------------------- */

MissPhan
***

Féminin
Messages : 101
Inscrit(e) le : 24/09/2008

http://warmsdisctrict.forumactif.org
MissPhan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de marge et de centrage

Message par [Nihil] le Dim 21 Déc 2014 - 21:07

Hello Smile

Pour les bordures à droite à gauche de ta bannière, elles viennent de la largeur de la PA utilisée Smile

A cet endroit là de la PA, il faut réduire la valeur de width: 730px;. Par exemple 722px ^-^
Code:
<div style="background: url(http://image.noelshack.com/fichiers/2014/47/1416325221-paj.png); height: 400px; width: 730px; background-position:center center;">

Pour centrer tes catégories, dans ton CSS pour .forumline tu peux rajouter ceci :
Code:
margin: auto;

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de marge et de centrage

Message par MissPhan le Dim 21 Déc 2014 - 21:51

oh superbe, c'est parfait, merci beaucoup de ton aide =D

MissPhan
***

Féminin
Messages : 101
Inscrit(e) le : 24/09/2008

http://warmsdisctrict.forumactif.org
MissPhan 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