Alignement du sommaire des sous-forums/catégories

[Hirakyo152]

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://kaminoakuma-elsword.forumactif.org/

Description du problème

Bonjour,

J'aimerai savoir comment peut-on faire pour que "KamiNoAkuma", "Candidature de Recrutement" et "INFORMATIONS ESSENTIELLES - JEU" soient alignés ? Ça le fait aussi sur tous les autres sujets.

Merci d'avance =) (Si vous n'avez pas compris, n'hésitez pas à le dire.)

[Feuilla']

Bonjour,
essayez ce code CSS :

Code:

.nav {display: inline-block}

Bonne journée !

[Hirakyo152]

Je l'ai ajouté, mais... il y a eu aucun changement... :c

[Feuilla']

Re,
étrange, le code fonctionne bien dans l'outil de débogage, mais je ne le vois pas sur le forum (l'avez-vous supprimé ?).

Essayez de le remettre à nouveau pour voir.
Bonne journée !

[Hirakyo152]

Re,

Je viens de le remettre à nouveau, mais... ça ne fonctionne toujours pas :c

[Hirakyo152]

Code:

body {
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}

#chatbox .cb-avatar {
  height: 50px!important;
  width: 50px!important;
  overflow: hidden!important;
}

#chatbox .cb-avatar > img {
  height: 50px!important;
  width: 50px!important;
}
.chatbox_row_1,.chatbox_row_2,.chatbox_row_3 {font-size: 15px;}
.chatbox_row_2 {
    font-family: Ebrima;}

body.chatbox {
    background-image: url("http://moe.mabul.org/up/moe/2010/03/18/img-002550rou92.png");
}
 
#chatbox_header .cattitle:before { content: "Cliquez ici pour agrandir - "; }
#slide_avatar {
    width:150px;    /* largeur avatar */
    height:150px;    /* hauteur avatar */
    overflow:hidden;      /* ne pas toucher */
    position:relative;    /* ne pas toucher */
}
 
.glisse_avatar { 
    -webkit-transition:all 0.5s;    /* fait glisser l avatar */
    -moz-transition:all 0.5s;      /* fait glisser l avatar autre navigateur */
    -o-transition:all 0.5s;        /* fait glisser l avatar autre navigateur */
    -ms-transition:all 0.5s;      /* fait glisser l avatar autre navigateur */
    transition:all 0.5s;        /* fait glisser l avatar autre navigateur */
    top:0;                /* ne pas toucher */
    left:0;              /* ne pas toucher */
    width:100%;          /* ne pas toucher */
    height:100%;        /* ne pas toucher */
    position:absolute;    /* ne pas toucher */
    z-index:1;
}
 
#slide_avatar:hover > .glisse_avatar {
    margin-left:150px;      /* fait glisser l avatar a droite */
}
 
.infos_avatar {
    background-color:#333 !important;    /* fond infos */
    padding: 7px;
    top:0;                /* ne pas toucher */
    left:0;              /* ne pas toucher */
    width:100%;          /* ne pas toucher */
    height:100%;        /* ne pas toucher */
    z-index:0;
}

#fa_thanks_message img { vertical-align:middle }
#fa_thanks_message {
  color:#280;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  background-color:#DFD;
  border:1px solid #BDB;
  border-radius:6px;
  padding:6px;
  margin:6px;
}

blink {
          visibility: expression((function(){
          if (!window.IEBlink) {
          window.IEBlink = "visible";
          setInterval(function() {
          window.IEBlink = (window.IEBlink=="visible"?"hidden":"visible");
          var blinks = document.getElementsByTagName("blink");
          for (var i=0; i < blinks.length; i++) { blinks[i].style.visibility=window.IEBlink; }
          }, 700)
          }
          return "";
          })());
        }

a {
        -moz-transition:color 4s; /* Mozilla Firefox */
        -webkit-transition:color 4s; /* Safari et Google Chrome */
        -o-transition:color 4s; /* Opera */
        transition:color 4s;
    }
#navMP>a{
  display:inline-block;
  padding-left:10px;
  padding-right:10px;
  font-size:16px;
  line-height:16px;
  color:#eee;
  background:#BDC8D0;
  text-decoration:none !important;
  border:1px solid #aaa;
}
#navMP>a:hover{
  color:#fff;
  background:#CDD8E0;
  text-decoration:none !important;
}
#navMP-precedent{
  border-radius:8px 0 0 8px;
}
#navMP-suivant{
  float:right;
  border-radius:0 8px 8px 0;
}
 
#navMP-precedent::before{
  content:"Précédent"
}
#navMP-suivant::before{
  content:"Suivant"
}

#savec { position:relative; }
.save-bloc { color: #555!important; z-index: 999; padding: 5px;  border: 1px solid #BCBCBC; background: #efefef url(http://2img.net/i/fa/prosilver/bg_button.gif) repeat-x; display:none;top:20px;left:0px;position:absolute; white-space:nowrap; }
.save-bloc div:hover { color: #050505!important; }
.save-bloc div { cursor: pointer; }
.save-bloc select { background: #ccc; border: 1px solid #aaa; margin-bottom: 5px; }

#chatbox.recently-connected:after {
  font-family: "trebuchet ms", serif;
  font-size: 1.5em; line-height:1.5em; font-weight: bold; color: #8BC34A;
  box-shadow:0 0 5px #AED581; display:block; background: #F1F8E9; margin:auto;
  width:80%; margin:1.5% auto; padding:1%; white-space: pre;
  content: "Bienvenue sur la chatbox =D \a Si tu es seul, fait de la publicité.";
}

/* Ajoute Font Awesome aux polices de la textarea pour que les icônes soient visibles */
.sceditor-container textarea { font-family:Verdana, Arial, Helvetica, sans-serif, FontAwesome !important }
/* Image du bouton */
.sceditor-button-fontawesome div { background:url(http://i19.servimg.com/u/f19/19/06/98/92/fa-f10.png) !important }
 
/* Popup */
.sceditor-fontawesome {
  width:220px;
  height:250px;
  overflow-y:auto;
}
 
/* Icônes */
.sceditor-fontawesome i {
  color:#333;
  font-size:20px;
  text-align:center;
  cursor:pointer;
  padding:3px 0;
  width:25%;
}
.sceditor-fontawesome i:hover { color:#666 }
.doublepost { border-top: 1px solid #888888 }

/* style par défaut */
a.fa-mention {
  color:#333;
}
 
/* style au survol */
a.fa-mention:hover {
  color:#666;
}
/* image du bouton mentionner */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
 
/* menu déroulant du bouton mentionner */
#fa-mention {
  background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}
    #fa_thanks_message img { vertical-align:middle }
    #fa_thanks_message {
      color:#280;
      font-size:16px;
      font-weight:bold;
      text-align:center;
      background-color:#DFD;
      border:1px solid #BDB;
      border-radius:6px;
      padding:6px;
      margin:6px;
    }
    .hljs {
      display: inline-block;
      padding: 0.5em;
      color: #333;
      background: #f8f8f8;
    }
   
    .hljs-comment,
    .hljs-template_comment,
    .diff .hljs-header,
    .hljs-javadoc {
      color: #998;
      font-style: italic;
    }
   
    .hljs-keyword,
    .css .rule .hljs-keyword,
    .hljs-winutils,
    .javascript .hljs-title,
    .nginx .hljs-title,
    .hljs-subst,
    .hljs-request,
    .hljs-status {
      color: #333;
      font-weight: bold;
    }
   
    .hljs-number,
    .hljs-hexcolor,
    .ruby .hljs-constant {
      color: #099;
    }
   
    .hljs-string,
    .hljs-tag .hljs-value,
    .hljs-phpdoc,
    .tex .hljs-formula {
      color: #d14;
    }
   
    .hljs-title,
    .hljs-id,
    .coffeescript .hljs-params,
    .scss .hljs-preprocessor {
      color: #900;
      font-weight: bold;
    }
   
    .javascript .hljs-title,
    .lisp .hljs-title,
    .clojure .hljs-title,
    .hljs-subst {
      font-weight: normal;
    }
   
    .hljs-class .hljs-title,
    .haskell .hljs-type,
    .vhdl .hljs-literal,
    .tex .hljs-command {
      color: #458;
      font-weight: bold;
    }
   
    .hljs-tag,
    .hljs-tag .hljs-title,
    .hljs-rules .hljs-property,
    .django .hljs-tag .hljs-keyword {
      color: #000080;
      font-weight: normal;
    }
   
    .hljs-attribute,
    .hljs-variable,
    .lisp .hljs-body {
      color: #008080;
    }
   
    .hljs-regexp {
      color: #009926;
    }
   
    .hljs-symbol,
    .ruby .hljs-symbol .hljs-string,
    .lisp .hljs-keyword,
    .tex .hljs-special,
    .hljs-prompt {
      color: #990073;
    }
   
    .hljs-built_in,
    .lisp .hljs-title,
    .clojure .hljs-built_in {
      color: #0086b3;
    }
   
    .hljs-preprocessor,
    .hljs-pragma,
    .hljs-pi,
    .hljs-doctype,
    .hljs-shebang,
    .hljs-cdata {
      color: #999;
      font-weight: bold;
    }
   
    .hljs-deletion {
      background: #fdd;
    }
   
    .hljs-addition {
      background: #dfd;
    }
   
    .diff .hljs-change {
      background: #0086b3;
    }
   
    .hljs-chunk {
      color: #aaa;
    }
/* image du bouton hashtag */
.sceditor-button-hashtag div { background-image:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) !important }
 
/* menu déroulant des hashtags */
#fa-hashtag {
  background:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}
/* options du menu des hashtags */
.fa-hashtag-options {
  color:#666;
  font-size:11px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  line-height:14px;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:0 3px 6px rgba(0, 0, 0, 0.175);
  margin-top:20px;
  padding:3px;
  position:absolute;
  z-index:100;
}
 
/* options du titre */
.fa-hashtag-title {
  font-size:12px;
  border-bottom:1px solid #CCC;
  padding-bottom:3px;
  margin-bottom:3px;
}
 
/* options des liens */
.fa-hashtag-options a {
  color:#333;
  text-decoration:none;
  display:inline-block;
  padding:2px 6px 2px 0;
}
 
.fa-hashtag-options a:hover {
  color:#666;
  text-decoration:underline;
}
 
/* options des mots gras */
.fa-hashtag-options b {
  color:#333;
  padding-left:6px;
}
 
/* options des tags */
.fa-hashtag-tag {
  color:#000;
  font-weight:bold;
}
#fa_toolbar #fa_right #notif_list li.see_all { background:#FFF !important }
#fa_toolbar #fa_right #notif_list {
  border:none !important;
  border-right:2px solid #F00 !important;
}
#userlinks.not-connected { display:none }
.nav {display: inline-block}

Voici mon CSS tout entier. Dîtes-moi si tout est bon.

[Lixyr]

Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné. Je vous invite à lire : - Règles générales du forum - Charte de ce forum

Bonjour,

Vous avez une div qui force le retour à la ligne.

Essayez ça :

Code:

.nav a, .nav h1, .nav div {
  display: inline;
}

et si ça ne fonctionne pas :

Code:

.nav a, .nav h1, .nav div {
  display: inline !important;
}

[Hirakyo152]

Bonsoir,

J'ai fait la modification que vous m'avez dit de faire, mais ça ne fonctionne pas. J'ai essayé les deux codes, mais il y a eu aucun changement. Voici la liste du CSS actuelle : 

Code:

body {
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}

#chatbox .cb-avatar {
  height: 50px!important;
  width: 50px!important;
  overflow: hidden!important;
}

#chatbox .cb-avatar > img {
  height: 50px!important;
  width: 50px!important;
}
.chatbox_row_1,.chatbox_row_2,.chatbox_row_3 {font-size: 15px;}
.chatbox_row_2 {
    font-family: Ebrima;}

body.chatbox {
    background-image: url("http://moe.mabul.org/up/moe/2010/03/18/img-002550rou92.png");
}
 
#chatbox_header .cattitle:before { content: "Cliquez ici pour agrandir - "; }
#slide_avatar {
    width:150px;    /* largeur avatar */
    height:150px;    /* hauteur avatar */
    overflow:hidden;      /* ne pas toucher */
    position:relative;    /* ne pas toucher */
}
 
.glisse_avatar { 
    -webkit-transition:all 0.5s;    /* fait glisser l avatar */
    -moz-transition:all 0.5s;      /* fait glisser l avatar autre navigateur */
    -o-transition:all 0.5s;        /* fait glisser l avatar autre navigateur */
    -ms-transition:all 0.5s;      /* fait glisser l avatar autre navigateur */
    transition:all 0.5s;        /* fait glisser l avatar autre navigateur */
    top:0;                /* ne pas toucher */
    left:0;              /* ne pas toucher */
    width:100%;          /* ne pas toucher */
    height:100%;        /* ne pas toucher */
    position:absolute;    /* ne pas toucher */
    z-index:1;
}
 
#slide_avatar:hover > .glisse_avatar {
    margin-left:150px;      /* fait glisser l avatar a droite */
}
 
.infos_avatar {
    background-color:#333 !important;    /* fond infos */
    padding: 7px;
    top:0;                /* ne pas toucher */
    left:0;              /* ne pas toucher */
    width:100%;          /* ne pas toucher */
    height:100%;        /* ne pas toucher */
    z-index:0;
}

#fa_thanks_message img { vertical-align:middle }
#fa_thanks_message {
  color:#280;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  background-color:#DFD;
  border:1px solid #BDB;
  border-radius:6px;
  padding:6px;
  margin:6px;
}

blink {
          visibility: expression((function(){
          if (!window.IEBlink) {
          window.IEBlink = "visible";
          setInterval(function() {
          window.IEBlink = (window.IEBlink=="visible"?"hidden":"visible");
          var blinks = document.getElementsByTagName("blink");
          for (var i=0; i < blinks.length; i++) { blinks[i].style.visibility=window.IEBlink; }
          }, 700)
          }
          return "";
          })());
        }

a {
        -moz-transition:color 4s; /* Mozilla Firefox */
        -webkit-transition:color 4s; /* Safari et Google Chrome */
        -o-transition:color 4s; /* Opera */
        transition:color 4s;
    }
#navMP>a{
  display:inline-block;
  padding-left:10px;
  padding-right:10px;
  font-size:16px;
  line-height:16px;
  color:#eee;
  background:#BDC8D0;
  text-decoration:none !important;
  border:1px solid #aaa;
}
#navMP>a:hover{
  color:#fff;
  background:#CDD8E0;
  text-decoration:none !important;
}
#navMP-precedent{
  border-radius:8px 0 0 8px;
}
#navMP-suivant{
  float:right;
  border-radius:0 8px 8px 0;
}
 
#navMP-precedent::before{
  content:"Précédent"
}
#navMP-suivant::before{
  content:"Suivant"
}

#savec { position:relative; }
.save-bloc { color: #555!important; z-index: 999; padding: 5px;  border: 1px solid #BCBCBC; background: #efefef url(http://2img.net/i/fa/prosilver/bg_button.gif) repeat-x; display:none;top:20px;left:0px;position:absolute; white-space:nowrap; }
.save-bloc div:hover { color: #050505!important; }
.save-bloc div { cursor: pointer; }
.save-bloc select { background: #ccc; border: 1px solid #aaa; margin-bottom: 5px; }

#chatbox.recently-connected:after {
  font-family: "trebuchet ms", serif;
  font-size: 1.5em; line-height:1.5em; font-weight: bold; color: #8BC34A;
  box-shadow:0 0 5px #AED581; display:block; background: #F1F8E9; margin:auto;
  width:80%; margin:1.5% auto; padding:1%; white-space: pre;
  content: "Bienvenue sur la chatbox =D \a Si tu es seul, fait de la publicité.";
}

/* Ajoute Font Awesome aux polices de la textarea pour que les icônes soient visibles */
.sceditor-container textarea { font-family:Verdana, Arial, Helvetica, sans-serif, FontAwesome !important }
/* Image du bouton */
.sceditor-button-fontawesome div { background:url(http://i19.servimg.com/u/f19/19/06/98/92/fa-f10.png) !important }
 
/* Popup */
.sceditor-fontawesome {
  width:220px;
  height:250px;
  overflow-y:auto;
}
 
/* Icônes */
.sceditor-fontawesome i {
  color:#333;
  font-size:20px;
  text-align:center;
  cursor:pointer;
  padding:3px 0;
  width:25%;
}
.sceditor-fontawesome i:hover { color:#666 }
.doublepost { border-top: 1px solid #888888 }

/* style par défaut */
a.fa-mention {
  color:#333;
}
 
/* style au survol */
a.fa-mention:hover {
  color:#666;
}
/* image du bouton mentionner */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
 
/* menu déroulant du bouton mentionner */
#fa-mention {
  background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}
    #fa_thanks_message img { vertical-align:middle }
    #fa_thanks_message {
      color:#280;
      font-size:16px;
      font-weight:bold;
      text-align:center;
      background-color:#DFD;
      border:1px solid #BDB;
      border-radius:6px;
      padding:6px;
      margin:6px;
    }
    .hljs {
      display: inline-block;
      padding: 0.5em;
      color: #333;
      background: #f8f8f8;
    }
   
    .hljs-comment,
    .hljs-template_comment,
    .diff .hljs-header,
    .hljs-javadoc {
      color: #998;
      font-style: italic;
    }
   
    .hljs-keyword,
    .css .rule .hljs-keyword,
    .hljs-winutils,
    .javascript .hljs-title,
    .nginx .hljs-title,
    .hljs-subst,
    .hljs-request,
    .hljs-status {
      color: #333;
      font-weight: bold;
    }
   
    .hljs-number,
    .hljs-hexcolor,
    .ruby .hljs-constant {
      color: #099;
    }
   
    .hljs-string,
    .hljs-tag .hljs-value,
    .hljs-phpdoc,
    .tex .hljs-formula {
      color: #d14;
    }
   
    .hljs-title,
    .hljs-id,
    .coffeescript .hljs-params,
    .scss .hljs-preprocessor {
      color: #900;
      font-weight: bold;
    }
   
    .javascript .hljs-title,
    .lisp .hljs-title,
    .clojure .hljs-title,
    .hljs-subst {
      font-weight: normal;
    }
   
    .hljs-class .hljs-title,
    .haskell .hljs-type,
    .vhdl .hljs-literal,
    .tex .hljs-command {
      color: #458;
      font-weight: bold;
    }
   
    .hljs-tag,
    .hljs-tag .hljs-title,
    .hljs-rules .hljs-property,
    .django .hljs-tag .hljs-keyword {
      color: #000080;
      font-weight: normal;
    }
   
    .hljs-attribute,
    .hljs-variable,
    .lisp .hljs-body {
      color: #008080;
    }
   
    .hljs-regexp {
      color: #009926;
    }
   
    .hljs-symbol,
    .ruby .hljs-symbol .hljs-string,
    .lisp .hljs-keyword,
    .tex .hljs-special,
    .hljs-prompt {
      color: #990073;
    }
   
    .hljs-built_in,
    .lisp .hljs-title,
    .clojure .hljs-built_in {
      color: #0086b3;
    }
   
    .hljs-preprocessor,
    .hljs-pragma,
    .hljs-pi,
    .hljs-doctype,
    .hljs-shebang,
    .hljs-cdata {
      color: #999;
      font-weight: bold;
    }
   
    .hljs-deletion {
      background: #fdd;
    }
   
    .hljs-addition {
      background: #dfd;
    }
   
    .diff .hljs-change {
      background: #0086b3;
    }
   
    .hljs-chunk {
      color: #aaa;
    }
/* image du bouton hashtag */
.sceditor-button-hashtag div { background-image:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) !important }
 
/* menu déroulant des hashtags */
#fa-hashtag {
  background:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}
/* options du menu des hashtags */
.fa-hashtag-options {
  color:#666;
  font-size:11px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  line-height:14px;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:0 3px 6px rgba(0, 0, 0, 0.175);
  margin-top:20px;
  padding:3px;
  position:absolute;
  z-index:100;
}
 
/* options du titre */
.fa-hashtag-title {
  font-size:12px;
  border-bottom:1px solid #CCC;
  padding-bottom:3px;
  margin-bottom:3px;
}
 
/* options des liens */
.fa-hashtag-options a {
  color:#333;
  text-decoration:none;
  display:inline-block;
  padding:2px 6px 2px 0;
}
 
.fa-hashtag-options a:hover {
  color:#666;
  text-decoration:underline;
}
 
/* options des mots gras */
.fa-hashtag-options b {
  color:#333;
  padding-left:6px;
}
 
/* options des tags */
.fa-hashtag-tag {
  color:#000;
  font-weight:bold;
}
#fa_toolbar #fa_right #notif_list li.see_all { background:#FFF !important }
#fa_toolbar #fa_right #notif_list {
  border:none !important;
  border-right:2px solid #F00 !important;
}
#userlinks.not-connected { display:none }
.nav {display: inline-block}
.modactions img {
  vertical-align: middle;
}
body {
cursor: url("http://www.rw-designer.com/cursor-view/68874.png"), auto;
}
a {
cursor : url("http://www.rw-designer.com/cursor-view/68874.png"), auto;
}
.nav a, .nav h1, .nav div {
  display: inline !important;
}

[Neptunia]

Bonjour ^^

Il faudrait renommer vos sections qui, si mon flair est bon sont bourrés d'espaces dans leur nom. Si vous vouliez centrer vos en-têtes de section c'est raté parce que l'espace à droite et à gauche des titres dépendra de la largeur d'écran du visiteur.

Et utiliser un code CSS à la place pour centrer ces titres.
Code que je ne pourrais pas vous fournir puisque vous avez installé un javascript pour m'empêcher de vous aider.

[Hirakyo152]

Ah ! Merci énormément, Neptunia. 

Il y avait un script qui centrait "Informations essentielles - jeu & forum" et "La taverne KamiNoAkumienne", du coup ça mettait n'importe comment le sommaire des sous-forums et des catégories. Merci Feuilla' et Lixyr pour votre aide.

Je déclare donc ce sujet comme  !