Mettre une marge dans les messages de mon forum

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

Résolu Mettre une marge dans les messages de mon forum

Message par Joker-Ayun le Mar 12 Fév 2013 - 9:37

Bonjour à tous ! =)

J'ai vu qu'il y avait un message similaire à mon problème, mais la solution ne marche malheureusement pas. Voilà, je voudrais ajouter une marge aux messages postés parce que l'arrondit "coupe" un peu les lettres. J'ai un problème similaire dans ma page d'accueil.
Spoiler:

(dans mes messages postés)

(page d'accueil)

> Mon forum marche sous PHBB3.
> Je suis fondatrice de mon forum.
> J'utilise Mozzilla Firefox, mais j'aimerai que le maximum de navigateurs soient concernés par ce changement.
> Je n'ai pas modifié de template. Mais voila mon CSS personalisé.
Spoiler:
Code:
body
{ background-attachment: scroll;
 background-repeat: no-repeat;
 background-position: top center;
}

.flotte {
float:left;
Clear : both;
}
    #wrap {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    padding: 10px;
    }

    .forabg, .forumbg {
    border: none;
    }

    div, table {
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    border: 0;
    }
ul.navlinks { border: none; }
#wrap {
background-attachment: scroll;
background-image: url("http://i62.servimg.com/u/f62/13/52/25/78/cadre_17.png");
background-repeat: no-repeat;
background-position: bottom right;
}
.topiclist dl.icon {
min-height: 30px;
background-position: 2px 50%;
}
* html .topiclist dl.icon {
height: 30px;
}
ul.topics dt,ul.topics dd.dterm {
padding-left: 30px;
}
ul.pmlist dt {
padding-left: 30px;
}
.forabg {
   margin-bottom: 4px;
   clear: both;
   background-color: #;
   background-image: url('http://i62.servimg.com/u/f62/13/52/25/78/pf214.jpg');
   background-repeat: repeat;
   background-position: 0 0;
   border: 2px solid #;
   padding: 0px 5px;
   }
.forumbg {
   background-color: #;
   background-image: url('http://i62.servimg.com/u/f62/13/52/25/78/pf214.jpg');
   background-repeat: repeat;
   background-position: 0 0;
   border: 2px solid #;
   padding: 5px 5px;
   margin-bottom: 4px;
   clear: both;
   }
.navbar span.corners-top { background-image: none; }
.navbar span.corners-top span { background-image: none; }
.navbar span.corners-bottom { background-image: none; }
.navbar span.corners-bottom span { background-image: none; }

.headerbar span.corners-top { background-image: none; }
.headerbar span.corners-top span { background-image: none; }
.headerbar span.corners-bottom { background-image: none; }
.headerbar span.corners-bottom span { background-image: none; }

a.button1, input.button1 {
   font-weight: bold;
   border: 1px solid #156389;
   }
a.button2, input.button2, button.button2 {
   border: 1px solid #156389;
   }
a.button1, input.button1, a.button2, input.button2, button.button2 {
background-image: url("http://i62.servimg.com/u/f62/13/52/25/78/pf112.jpg");
background-repeat: repeat;
background-position: top left;
}
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover {
background-image: url("http://i62.servimg.com/u/f62/13/52/25/78/pf212.jpg");
background-repeat: repeat;
background-position: top left;
}
et le code de ma PA :
Spoiler:
Code:
<script type="text/javascript">
  //<!--
  // La fonction Javascript va permettre de changer d'onglet lorsque l'on clique sans recharger la page.
  // Le principe est simple. Le cadre gérant le contenu que l'on souhaite voir reçoit la calver onglet_actif alors que les autres reçoivent onglet_inactif pour les cacher.
      function change_onglet(name)
      {
        document.getElementById('onglet_'+anc_onglet).className = 'onglet_inactif bloc_general_onglet';
        document.getElementById('onglet_'+name).className = 'onglet_actif bloc_general_onglet';
        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
        document.getElementById('contenu_onglet_'+name).style.display = 'block';
        anc_onglet = name;
      }
  //-->
  </script>
  <style type="text/css">

.parajustif {
  text-align:justify;
  font-size: 12px;
  padding: 1px;
}
  body
  {
      width:800px;
      margin:auto;
  }
  img
  {
      border:none;
  }
  .systeme_onglets
  {
      margin-top:5px;
      margin-left:5px;
      width:55%;
      float:left;
  }
  .bloc_general_onglet
  {
      display:inline-block;
      margin-left:3px;
      margin-right:3px;
      padding:3px;
      border:2px solid white;
      cursor:pointer;
  }
  .onglet_inactif
  {
    font-size: 12px;
      background:#a6c69a;
      border-bottom:2px solid white;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding: 2px;
  }
  .onglet_actif
  {
    font-size: 12px;
      background:#eeeeee;
      border-top:1px solid #eeeeee;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding: 2px;

  }
  .contenu_onglet
  {
      background : transparent;
      border:2px solid white;
      margin-top:1px;
      margin-left : 5px;
      margin-right : 2px;
      padding:5px;
      display:none;
      -moz-border-radius: 20px 20px 20px 20px ;
      height:200px;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      padding: 3px;
  }
  .titre
  {
      text-align:center;
      border:1px dotted;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding: 3px;
  }
 
  /* Le css suivant permet de mettre l'info bulle... */
 

  /* Rend visible tout notre bloc span et lui attribue une taille */
  a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle
  {
      top        :  auto;
      left      :  auto;
      height    :  auto;
      overflow  :  visible;
  }
  span.contenu
  {
      display    : block;
      padding    : 0 8px;
  } 

.infobulle:hover span
 {
  background : transparent;
  display: inline;
  white-space: nowrap;
  position: absolute;
  top: -140px; /* position de l'infobulle verticalement */
  left: -2px; /* position de l'infobulle horizontalement */
  width: 80px; /* largeur de l'infobulle */
  height: 150px; /* hauteur de l'infobulle */
  color:#000000; /* couleur du texte */
  border: 1px solid #000000; /* taille, style et couleur de la bordure */
  background:  #F4F4F3; /* couleur d'arrière-plan de l'infobulle */
  padding: 1px; /* espacement entre les bords et le texte */
}

/* NE PAS TOUCHER */

a.infobulle {
background : transparent;
position: relative;}
a.infobulle span {  display: none; }
a.infobulle:hover {  background: none;  z-index: 999;}

  </style>

      <div style="width:800px;margin:auto;height:250px;">
        <div class="systeme_onglets">

          <div class="contenu_onglets">
              <div class="contenu_onglet" id="contenu_onglet_premier">
                <div class="titre"><img src="http://nsa31.casimages.com/img/2013/02/11/130211030526860408.png" border="0" alt="" /></div>
<b>T</b>out le monde vous souhaite la bienvenue sur ce forum ! En espérant que vous vous y plaisez, voici une navigation rapide qui pourrait bien vous être utile ...<br><br>
<a href="http://lgdc.meilleurforum.com/t1813-reglement">Règlement</a> -
<a href="http://lgdc.meilleurforum.com/t1838-l-histoire">Contexte</a> -
<a href="http://lgdc.meilleurforum.com/f131-intrigues">Intrigues & Évènements.</a><br>
<a href="http://lgdc.meilleurforum.com/f3-presentation">Se Présenter</a> -
<a href="http://lgdc.meilleurforum.com/t1835-postes-importants-libres">Postes Libres.</a> -
<a href="http://lgdc.meilleurforum.com/f72-sujets">Trouver un RP.</a>
<br>
<a href="http://lgdc.meilleurforum.com/f30-recensement">Recensement</a> -
<a href="http://lgdc.meilleurforum.com/f44-questions-suggestions">Coin Invités</a> -
<a href= "http://lgdc.meilleurforum.com/t695-de-m-a-n-d-e-de-pa-r-t-e-n-a-r-i-a-t">Devenir notre Partenaire.</a>
                          </div>
           
           
              <div class="contenu_onglet" id="contenu_onglet_deuxieme">
              <div style="text-align:justify; height:200px;overflow:auto; "><div class="titre">Entre dans ce monde de félins, <i>{USER&amp;#8288;NAME}...></i></div><br />
<b>D</b>epuis la nuit des temps, quatre Clans se partagent les terres de Cerfblanc : Vent, Rivière, Tonnerre et Ombre. Suite à la destruction de la forêt, les chats sauvages ont été obligés de migrer dans une nouvelle, plus grande et giboyeuse. Toutefois, les dangers ne sont jamais très loin... Le Clan du Chaos, prétendant au titre de Clan originel, réapparaît et revendique son royaume, c'est à dire la soumission des Quatre Clans.
<br><br>
<b>Q</b>ue va-t-il arriver maintenant ? Si tu veux changer les choses et entrer dans la légende, pénètre dans la forêt et deviens un petit chaton plein d'avenir, un fier guerrier fidèle à son Clan, un solitaire sanguinaire ou un cruel membre de ce fameux Clan du Chaos..<br />
              </div></div>
            <div class="contenu_onglet" id="contenu_onglet_quatrieme">
              <div class="titre">Clans</div>
    <u>R E C H E R C H E S.</u>
<br><br>
<font color="#D19F47">Tonnerre</font>  : Guérisseur.<br>
<font color="#941F1F">Chaos</font> : Lieutenant.<br><br>

            </div><div class="contenu_onglet" id="contenu_onglet_cinquieme">
              <div class="titre"><u>Membre du mois !</u></div><br>
Joker ?
              <div class="titre"><u>RP du mois !</u></div><br>
 Lequel ?         

</div>
           
              <div class="contenu_onglet" id="contenu_onglet_troisieme">
              <div class="titre">News & Annonces</div> <br>
<b>></b> Un nouveau thème a été installé, et le forum a été ré-organisé. <br>
<b>></b> De Nouvelles fiches de PUB ont été faites et le règlement a changé.<br>
<b>></b> Plume Ténébreuse (alias <i>Fougy</i>) a été nommée Admin', et Pelage de Brume (alias <i>Hisha</i>) a été nommée modératrice officiellement ! Félicitation à elles deux !<br>
<b>></b> <i>Joker</i> est revenue d'entre les morts...<br>
<b>></b> Une intrigue est toujours en cours !

            </div></div>

          <div class="onglets" style="padding-left:8px;">
              <span class="onglet_inactif bloc_general_onglet" id="onglet_premier" onclick="javascript:change_onglet('premier');">Bienvenue</span>
              <span class="onglet_inactif bloc_general_onglet" id="onglet_deuxieme" onclick="javascript:change_onglet('deuxieme');">Contexte</span>
              <span class="onglet_inactif bloc_general_onglet" id="onglet_troisieme" onclick="javascript:change_onglet('troisieme');">News</span>
              <span class="onglet_inactif bloc_general_onglet" id="onglet_quatrieme" onclick="javascript:change_onglet('quatrieme');">Clans</span>
        <span class="onglet_inactif bloc_general_onglet" id="onglet_cinquieme" onclick="javascript:change_onglet('cinquieme');">Membre et RP du Mois</span>
            </div>
      </div>
      <script type="text/javascript">
      //<!--
        var anc_onglet = 'premier'; // Cette ligne informe qu'on va en premier voir l'onglet 1
        change_onglet(anc_onglet);
      //-->
      </script>
   
      <!-- Ci dessous le cadre du staff -->
        <div style="width:39%;float:right;border:2px solid white;height:200px;padding:5px;margin-right:5px;margin-top:5px;">
            <div class="titre"><b>Votre STAFF</b></div><div style="text-align:justify; height:180px;overflow:auto; ">

<a href="http://lgdc.meilleurforum.com/u508" target="_blank"><img src="http://i46.tinypic.com/zn7qz9.png" border="0" alt="Image and video hosting by TinyPic"></a> <b>Admin'</b> Dragibus. (Nuage de Fumée)<br> <a href="http://lgdc.meilleurforum.com/privmsg?mode=post&u=508">Le contacter ?</a><br><br></i><br>
<a href="http://lgdc.meilleurforum.com/u159" target="_blank"><img src="http://i47.tinypic.com/30a6ues.jpg" border="0" alt="Image and video hosting by TinyPic"></a><b> Admine'</b> Plumette dévoreuse de chocolat (aux yeux). (Plume Ténébreuse)<br><a href="http://lgdc.meilleurforum.com/privmsg?mode=post&u=159">La contacter ?<br><br>
<a href="http://lgdc.meilleurforum.com/u641" target="_blank"><img src="http://i47.tinypic.com/24b1aqg.jpg" border="0" alt="Image and video hosting by TinyPic"></a> <b>Modératrice</b> Hisha droguée au Nutella. (Pelage de Brume)<br> <a href="http://lgdc.meilleurforum.com/privmsg?mode=post&u=641">La contacter ?<br>

<br><center><a href="LIEN">Voir tout le Staff</a></center>
 
        </div>
      </div>
      <!-- Fin du cadre du staff -->
   
   
      <!-- Debut du cadre des infos importantes -->
      <div style="width:41%;border:2px solid white;height:137px;float:right;margin-top:25px;overflow:auto;">
        <div class="titre">Partenaires et Crédits</div><br>
 
<center><marquee class="html-marquee2" direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>
<a href="http://laguerredesclanss.forumactif.com/forum"><img src="http://i45.tinypic.com/vxgm6s.jpg"></a>
<a href=" http://lgdc-dawn.forumactif.fr/"><img src="http://i47.tinypic.com/2a0kinc.png/2llbztx.png"></a> <a href=" ..."><img src="http://img19.imageshack.us/img19/1989/sanstitre2ypu.png"></a> <a href=" ..."><img src="http://img19.imageshack.us/img19/1989/sanstitre2ypu.png"></a> <a href=" ..."><img src="http://img19.imageshack.us/img19/1989/sanstitre2ypu.png"></a> <a href=" ..."><img src="http://img19.imageshack.us/img19/1989/sanstitre2ypu.png"></a></marquee><br>
<br><small>Forum et thème créés par <i>Joker</i> d'après l’œuvre originale d'Erin Hunter.</small>
      </center>
      </div>
      <!-- Fin informations importantes -->


      <div style="width:55%;border:2px solid white;height:137px;float:left;margin-top: 5px;overflow:auto;">
<p class="flotte">
<img src="http://nsa31.casimages.com/img/2013/02/12/130212084026163581.png"border="0" alt="" /></p><p class="parajustif"><small>Les bourgeons éclosent, le vent redevient doux, les pluies cessent.. Partout, la nature sort de son hibernation. On voit la forêt devenir verte, la rivière reprendre un cours puissant, la lande se fleurir. Maintenant, la chaleur va revenir et les proies aussi. Bref, c’est le printemps !</small></p>

Merci de vos réponses !


Dernière édition par Joker-Ayun le Mar 12 Fév 2013 - 10:28, édité 5 fois

Joker-Ayun
Nouveau membre

Messages : 14
Inscrit(e) le : 12/02/2013

http://test-time.forumactif.org
Joker-Ayun a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une marge dans les messages de mon forum

Message par Matriochka le Mar 12 Fév 2013 - 10:05

Bonjour,
Bonjour,

Je rappelle qu'une seule question par sujet est autorisée, afin de favoriser les recherches ultérieures.

Je vous invite à lire :

A bientôt sur ForumActif Smile

Concernant le premier problème, il faut ajouter ceci dans ta feuille de styles :
Code:
.postbody div {padding:5px;}
En remplaçant évidemment la valeur de 5 pixels par celle de ton choix.

Pour ta page d’accueil, remplace cette partie :
Code:
<div style="text-align:justify; height:200px;overflow:auto; ">
Par :
Code:
<div style="text-align:justify; height:200px;overflow:auto;padding:5px;">
Donc là, même chose, remplace 5px par la valeur désirée.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Mettre une marge dans les messages de mon forum

Message par Joker-Ayun le Mar 12 Fév 2013 - 10:23

Merci beaucoup d'avoir répondu aussi vite !
Alors pour la marge dans les messages, c'est impeccable, mais au niveau de la page d'acceuil, ça me sort en dehors du cadre la dernière phrase.
Spoiler:

C'est pas grand chose, mais si ça peut être modifié, je prend ! =D

Joker-Ayun
Nouveau membre

Messages : 14
Inscrit(e) le : 12/02/2013

http://test-time.forumactif.org
Joker-Ayun a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une marge dans les messages de mon forum

Message par Matriochka le Mar 12 Fév 2013 - 10:24

Bien sûr que ça peut être modifié Smile

À ce moment, il faut alors réduire un peu la hauteur de ta div, ici :
Code:
<div style="text-align:justify; height:200px;overflow:auto;padding:5px;">
Mettre par exemple 190 à la place de 200 pixels.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Mettre une marge dans les messages de mon forum

Message par Joker-Ayun le Mar 12 Fév 2013 - 10:27

Je te vénère ! Bravo2
Merci beaucoup, ce problème est réglé !

Joker-Ayun
Nouveau membre

Messages : 14
Inscrit(e) le : 12/02/2013

http://test-time.forumactif.org
Joker-Ayun 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