Problème d'affichage de tableau

[emc2]

Bonjour,

Je suis confronté à un soucis d'affichage. J'ai configuré un tableau sur mon forum. Mais selon les membres, il n'apparaît pas de la même manière. Et pour certains, ce n'est pas utilisable. Leurs onglets se chevauchent.

Voilà ce que j'ai:

Voilà ce que certains membres ont:Ou bien ...

Voilà le code HTML que j'utilise:

Code:

<div class="systab sbottom sslide shover">
  <div>
    <span style="background:red">Citoyen</span>
    <span style="color:red">
      <strong>Comment obtenir le statut de citoyen</strong>
      <ul><li> - Etre inscrit depuis au moins 15 jours</li>
            <li> - Avoir posté au moins 100 mesages</li>
            <li> - Avoir signé la charte du forum</li>
            <li> - Coalisez d'autres citoyens autour de vos idées</li></ul>
    </span>
  </div>
  <div>
    <span style="background:blue">Député</span>
    <span style="color:blue">
      <strong>Comment devenir député</strong>
      <ul><li> - Etre citoyen</li>
            <li> - Avoir moins de 6 points sur le casier judiciaire</li>
            <li> - Etre élu aux élections législatives</li>
            <li> - Etre assidu aux débats et votations de l'assemblée</li></ul>
    </span>
  </div>
  <div>
    <span style="background:green">Pt du tribunal</span>
    <span style="color:green">
      <strong>Comment devenir président du tribunal</strong>
      <ul><li> - Etre citoyen</li>
            <li> - Avoir zéro point sur son casier judiciare</li>
            <li> - Etre nommé par le président du forum</li>
            <li> - Savoir se dessaisir en cas de conflit d'intérêt</li></ul>
    </span>
  </div><div>
    <span style="background:orange">Ministre</span>
    <span style="color:orange">
      <strong>Comment devenir ministre</strong>
      <ul><li> - Etre citoyen</li>
            <li> - Avoir été nommé par le président du forum</li>
            <li> - Ne pas être président du tribunal</li>
            <li> - Appliquer la feuille de route du Président du forum</li></ul>
    </span>
  </div><div>
    <span style="background:indigo">Sénateur</span>
    <span style="color:indigo">
      <strong>Comment devenir sénateur</strong>
      <ul><li> - Etre citoyen</li>
            <li> - Avoir été élu président du forum par le passé</li>
            <li> - Ne pas avoir de point sur le casier judiciaire</li>
            <li> - Connaitre correctement la constitution du forum</li></ul>
    </span>
  </div><div>
    <span style="background:grey">Prisonnier</span>
    <span style="color:black">
      <strong>Quest-ce qu'un prisonnier ?</strong>
      <ul><li> - C'est une condamnation du tribunal suite à une faute</li>
            <li> - C'est l'impossibilité technique de poster ailleurs qu'en prison</li>
            <li> - C'est ne dialoguer qu'avec son avocat et quelques visiteurs</li>
            <li> - Possibilité d'une remise de peine pour bonne conduite</li></ul>
    </span>
  </div><div>
    <span style="background:darkred">Pt du forum</span>
    <span style="color:darkred">
      <strong>Comment devenir président du forum</strong>
      <ul><li> - Etre citoyen</li>
            <li> - Ne pas détenir de mandat ou démissionner de ceux-ci</li>
            <li> - Etre élu à l'élection présidentielle qui a lieu 1 fois/trimestre</li>
            <li> - Appliquer le programme que cous avez proposer</li></ul>
    </span>
  </div><div>
    <span style="background:olive">Avocat</span>
    <span style="color:olive">
      <strong>Comment devenir avocat</strong>
      <ul><li> - Etre citoyen</li>
            <li> - Demander son inscription à l'ordre, au bâtonnier</li>
            <li> - Ne pas avoir de point sur son casier judiciaire</li>
            <li> - Savoir se dessaisir en cas de conflit d'intérêt</li></ul>
    </span>
  </div><div>
    <span style="background:violet">Juré</span>
    <span style="color:violet">
      <strong>Comment devenir juge</strong>
      <ul><li> - Etre citoyen</li>
            <li> - Etre tiré au sort pour les besoins d'un procés</li>
            <li> - Ne pas avoir de point sur son casier judiciaire</li>
            <li> - Savoir se dessaisir en cas de conflit d'intérêt</li></ul>
    </span>
  </div>
</div>

Comment puis-je aider les membres qui ont ce problème d'affichage sur leur écran ? Merci d'avance.

[Dr. Karlos]

Bonjour,

Pouvez-vous nous passer l'adresse de votre forum?

Les prises d'écran démontrent que le cadre du forum est rapetissé, ce laisse croire que vos membres ont une résolution d'écran plus petite que la vôtre.

Avez-vous demandé à vos membres d'essayer sous une autre résolution d'écran ou en appuyant sur CTRL et en déroulant avec la souris? Vous pourriez toujours placer les onglets sur deux lignes au lieu d'une.


Cordialement.

[emc2]

Voici l'adresse du forum. (le lien vous mène directement sur la section concernée.)
http://politique.forum-actif.net/f1-fonctionnement-du-forum
Je vais demander aux membres de modifier leur résolutions écran. Pour la manip CTRL et en déroulant la souris, je n'ai pas compris le principe et à quoi cela sert.
Et pour mettre les onglets sur deux lignes, je ne sais pas comment m'y prendre.

Merci à vous.

[Niko]

Salut

le problème est que la balise est inclus dans la description du forum (et dans ce cas, votre code) sont trop petite pour contenir tout le contenu affiché

Code:

<dd class="dterm">

Les solutions possibles sont :

• Élargir la « boîte » pour obtenir plus d'espace
  
• Redimensionner le code que vous souhaitez insérer

bye bye

[emc2]

Je n'ai pas compris l'explication. désolé. Est-il possible de me reformuler la solution niveau "pour un nul", je maitrise très mal le HTML. Merci d'avance.

[Dr. Karlos]

Bonsoir,

Comme mentionné par Niko!, vous pourriez redimensionner la taille de vos onglets afin d'éviter la déformation chez différentes résolutions d'écran ou agrandir la taille de la description des forums où se trouve votre code.

La solution la plus facile est l'agrandissement de la taille de la description des forums.

Insérez ces codes dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):

Code:

dd.posts, dd.topics {
width: 5%;
}

ul.topiclist dd.dterm{
width: 69%;
}

dd.posts, dd.topics permettent d'afficher le nombre de sujets et de messages dans le forum en question, le code permet de réduire la largeur de ces espaces. ul.topiclist dd.dterm permet l'affichage des descriptions de forums, le code permet d'agrandir cet espace afin d'éviter que votre code s'affiche mal.


Cordialement.

[emc2]

La mise en place des codes CSS semble fonctionner pour les membres ayant une petite définition, mais cela change complètement l'apparence du forum:

Le c/c en deux partie pour montrer la différence.


Je vais demander aux membres de modifier les paramétrages de leur affichage écran. Mais si vous avez une solution à ce problème, je suis preneur. Merci pour votre aide.

[Niko]

Si vous pouvez simplement essayer de changer cette partie :

Code:

<div class="tabs" style="
    margin-left: -19px;
"><span style="background:red" class="tab">Citoyen</span><span style="background:blue" class="tab">Député</span><span style="background:green" class="tab selected">Pt du tribunal</span><span style="background:orange" class="tab">Ministre</span><span style="background:indigo" class="tab">Sénateur</span><span style="background:grey" class="tab">Prisonnier</span><span style="background:darkred" class="tab">Pt du forum</span><span style="background:olive" class="tab">Avocat</span><span style="background:violet" class="tab">Juré</span></div>

dans ce cas :

Code:

<div class="tabs" style="
    margin-left: -19px;
"><span style="background:red" class="tab">Citoyen</span><span style="background:blue" class="tab">Député</span><span style="background:green" class="tab selected">Pt du tribunal</span><span style="background:orange" class="tab">Ministre</span><span style="background:indigo" class="tab">Sénateur</span><span style="background:grey" class="tab">Prisonnier</span><span style="background:darkred" class="tab">Pt du forum</span><span style="background:olive" class="tab">Avocat</span><span style="background:violet" class="tab">Juré</span></div>

bye

[Scoubifitz]

bonsoir,

le problème est que les "onglets" font un retour à la ligne pour les petites résolutions ?

si vous voulez tout garder sur une ligne , quitte à ce que cette ligne empiète sur le reste , rajoutez la ligne de code en vert dans le CSS :

.systab .tab {
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
white-space:nowrap;/* pas de retour à la ligne */
}

[emc2]

Merci Scoubifitz, je vais essayer ça.

Pour Browser, je n'ai pas saisi ce que je devais faire. Dois-je ajouter ce script au mien, ou le mettre à la place d'une partie du mien et la quelle ?

Merci à vous tous de prendre le temps de me répondre

[Niko]

Merci Scoubifitz, je vais essayer ça.

Pour Browser, je n'ai pas saisi ce que je devais faire. Dois-je ajouter ce script au mien, ou le mettre à la place d'une partie du mien et la quelle ?

Merci à vous tous de prendre le temps de me répondre

Il vous suffit de remplacer une section de code à un autre...

[emc2]

C'est parfait, les membres de mon forum semble satisfait comme ça. Merci à vous tous.