Largeur du forum

[edenial]

Bonjour, bonsoir,

Je viens vers vous au sujet d'un problème de largeur sur un forum dont j'ai le design en charge.

http://vampire-diariesrpg.forumactif.org/

Je tiens vraiment à conserver les header alternatifs tels qu'ils sont. J'aimerais surtout réussir à réduire la taille des catégories la placer entre 75% et 50% en fonction du résultat que j'obtiendrais. J'ai tenté la manipulation via le panneau admin mais cela ne change rien même en notant 10% ou 10px ça n'a pas bougé d'un iota.

Je n'ai pas touché aux templates et voici mon css :

Code:

/*barre navigation*/
a.mainmenu
{font-family: Arial;
font-size: 14;
text-align: center;
padding-left: defaut;
color: #5B8C69;
font-variant: defaut;
background-repeat: no-repeat;
text-decoration: none;
-moz-border-radius:-2px;
-webkit-border-radius:-2px;
}

.message{ text-align: justify; height: 240px; font-family: arial; line-height: 12px; overflow:auto;  font-size: 12px; padding: 20px; }
.textestatistique{ text-align: justify; overflow:auto; font-family: arial; line-height: 12px; height:210px; padding: 25px; font-size: 12px; }



.class1pa {border:1px solid #685151; width:451px}
.class1pa:hover {border:1px solid #996B68;}

.class2pa {border:1px solid #685151; width:269px}
.class2pa:hover {border:1px solid #996B68;}

.class3pa {border:1px solid #685151; width:238px}
.class3pa:hover {border:1px solid #996B68;}

.classlair {border:1px solid #685151; width:520px}
.classlair:hover {border:1px solid #996B68;}

.classcat {border:1px solid #685151; width:500px}
.classcat:hover {border:1px solid #996B68;}

.name {
    font-size: 11px;
}

/*soulignement des liens*/
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none !important;}


/*titre catégorie et forum*/
a.forumlink:link, a.forumlink:visited {
font-family: Times New Roman;
text-transform : uppercase;
text-align: center;
font-size: 200%;
}
a.forumlink:hover, a.forumlink:hover:visited {
color: #5B8C69;
}

/*contour du forum*/
.bodyline{
background-color: #00000;
-moz-border-radius: 0px 0px 0px 0px ;
border: none;
}

/*pas d espace haut bas du forum*/
body{
margin-top: 0px;
margin-bottom: 0px;
background-size : 80%, auto;
}

/*contours des codes et spoilers*/
.quote, .code {
border:1px dotted #5B8C69;
}

.milieu {width: 100%; margin: 0px; border: 1px solid #222222;-moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 5px; background-color:#F9EAC7}


a{text-transform:uppercase;}

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

tr.post span.gensmall { display: none; }


.tableauqueel{
background-color : #180809 ;
border : solid 1px #180809;
-moz-border-radius : 2px 2px 2px 2px}

.partiedroite {
font-size : 12px ;
border-left : 5px dotted #ffffff ;
padding-left : 10px }


.groupes{
background-color:#ffffff ;
border: 1px color #ffffff  ;
-moz-border-radius : 2px 2px 2px 2px;
height:40px;
padding-right:12px;
padding-left:14px;
padding-bottom:3px;
font-size:14px
;font-weight: bold;
text-align:center;
font-color : #ffffff  ;
text-decoration: none !important;
}


.tuto_illy_profil
{
background-color: #1c1a25;
border: 1px solid #685151;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}

/* Profil Masqué */
.profilmasque
{
background-color: #685151;
border: 1px solid #685151;
font-family: century gothic;
font-size: 12px;
letter-spacing: 1px;
}


/* infobulles Karen */
a.info {
  position:relative;
}
a.info:hover {
  background: none;
  z-index: 999;
}
a.info span {display: none;}
a.info:hover span {
display: inline;
position: absolute;
width: 150px;
top:  1px;
left: 20px;
background: #000000;
text-align: justify;
  color: #996B68;
text-transform: none;
  padding: -15px;
text-shadow: none

border: 1px solid #685151;

-moz-border-radius-topleft: 0px; /*arrondir l'angle gauche du haut*/
-moz-border-radius-topright: 0px; /*arrondir l'angle droit du haut*/
-webkit-border-radius-topleft: 0px; /*arrondir l'angle gauche du haut*/
-webkit-border-radius-topright: 0px; /*arrondir l'angle droit du haut*/
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
}


.profildr
{-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:0px;
-webkit-radius-topright:0px;
-webkit-radius-bottomleft:0px;
-webkit-radius-bottomright:0px;
-webtit-radius-topleft:0px;
background: #ffffff;
border: 3px solid #685151;
-moz-box-shadow: 2px 1px 2px #000000;
-webkit-shadow: 2px 1px 2px #000000;
padding: 10px;
text-align: center;
}


.profilavatar
{-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:0px;
-webkit-radius-topright:0px;
-webkit-radius-bottomleft:0px;
-webkit-radius-bottomright:0px;
-webtit-radius-topleft:0px;
background: #ffffff;
border: 3px solid #685151;
-moz-box-shadow: 2px 1px 2px #000000;
-webkit-shadow: 2px 1px 2px #000000;
padding: 10px;
text-align: center;
margin: 10px;
}

.tstaff
{
font-size:1em;
}

.thumbnail
{
position: relative;
z-index: 0;
margin: 0px;
padding: 0px;
}

.thumbnail:hover
{

z-index: 50;
margin: 0px;
padding: 0px;
}

.thumbnail span
{
position: absolute;
background-color: #1b1313;
padding: 5px;
left: -1000px;
border: 1px solid #271d1d;
visibility: hidden;
color: #f1aeb3;
text-decoration: none;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-radius-topleft: 5px;
-webkit-radius-topright: 5px;
-webkit-radius-bottomleft: 5px;
-webkit-radius-bottomright: 5px;
}

.thumbnail span img
{
border: 0px groove;
padding: 2px;
}

.thumbnail:hover span
{
visibility: visible;
top: 25px;
left: 25px; /*position where enlarged image should offset horizontally */
width: 160px
}

#cache
{
height: auto;
text-decoration: none;
}

/* AVATAR */

.fondpa {
background-color: #AD6E66;
border-radius: 30px;
border-bottom: 2px double #ffffff;
border-top: 2px double #9AAD66;
-moz-border-radius: 10px ;
-webkit-radius: 10px ;
border-right: 4px solid #9AAD66;
-moz-border-radius: 10px ;
-webkit-radius: 10px ;
border-left: 4px solid #9AAD66;
 }

.titrepa {
font-family: Sylfaen;
font-size: 4em;
text-align: center;
letter-spacing: -2px; }

.fondpartie {
background-color: #AD6E66;
border-radius: 30px;
border-bottom: 2px double #ffffff;
border-top: 2px double #9AAD66;
-moz-border-radius: 10px ;
-webkit-radius: 10px ;
border-right: 4px solid #9AAD66;
-moz-border-radius: 10px ;
-webkit-radius: 10px ;
border-left: 4px solid #9AAD66;
padding: 10px;
}

.soustitrepa {
font-family: Sageo Print;
font-size: 20px;
font-style: italic;
text-align: center;
font-weight: bolder; }

.fondrank {
font-family: Georgia;
font-size: 13px;
font-style: italic;
text-align: center;
font-weight: square;
letter-spacing: -2px; }

.fondprofil {
font-family: Georgia;
font-size: 12px;
font-style: gras;
text-align: left;
font-weight: square;
letter-spacing: -1px;
color: #454545;
}

/* rotation des avatars */
.rotationavatar {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
  }

.rotationavatar:hover {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
  }

/*IMAGE OPACITE*/
a img{
opacity: 0.9;
}

a img:hover {
opacity: 1;
}

*CATEGORIE*

.derniers_sujets
{margin-top: -10px;
padding: 3px;
background-color: #FFFFE0;
border-radius: 30px;
border-bottom: 2px double #ffffff;
border-top: 2px double #9AAD66;
-moz-border-radius: 10px ;
-webkit-radius: 10px ;
border-right: 4px solid #9AAD66;
-moz-border-radius: 10px ;
-webkit-radius: 10px ;
border-left: 4px solid #9AAD66;
margin-top:-3px;
}

.sujets_messages
{margin-top: -10px;
padding: 3px;
background-color: #FFFFE0;
border-radius: 30px;
border-bottom: 2px double #ffffff;
border-top: 2px double #9AAD66;
-moz-border-radius: 10px ;
-webkit-radius: 10px ;
border-right: 4px solid #9AAD66;
-moz-border-radius: 10px ;
-webkit-radius: 10px ;
border-left: 4px solid #9AAD66;
font-size: 1em;
}

Je vous remercie d'avance pour le temps que vous m'accordez.

[Dr. Karlos]

Bonsoir,

Essayez d'insérer ce code dans votre CSS:

Code:

.bodylinewidth {
width: valeur%;
}

Si j'ai bien compris, vous désirez seulement réduire la largeur du forum? Ce code devrait réussir à le faire. Arrangez-vous pour que la valeur dans le panneau d'administration ET dans le CSS soient pareilles, même si le PA ne fonctionne pas.


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[edenial]

Merci d'avoir répondu si vite.

Je viens de le faire. J'ai noté votre code avec 75% et je l'ai aussi noté dans le panneau admin mais cela n'a rien changé.

En effet, je veux juste réduire la taille du forum, c'est à dire PA,CB,Catégorie,Forum,QEEL. En gardant le header de fond aussi large.

[Dr. Karlos]

Bonjour,

Ah, désolé! Essayez avec ceci:

Code:

.three-col{
  width: valeur%;
  margin-left:auto;
margin-right:auto;
}

Si vous n'avez pas de widgets, je vous conseille de garder le "margin-left" et "margin-right" car si vous baissez trop la valeur, le tout aura tendance à se décentrer.


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[edenial]

C'est parfait ^^'

Je n'ai pas de widget et je ne sais pas encore si je vais devoir en mettre en place ou non. Donc, je vais suivre votre conseil et conserver les margin-left, margin-right en auto.

Merci beaucoup pour votre aide.