Je vais essayer de d’exprimé le problème du mieux que je peux mon français est laborieux en ce moment. Voila le lien du forum :

http://ganondorf.fra.co/

Mon problème est dans la barre de navigation comme l'indique le titre. Je ne savais pas qu'il y avait un problème jusqu'à ce que le fondateur du forum me dise qu'il y a un problème. En me disant ça il ma méchamment fait phasé.

Voici ce qu'il voit :

https://2img.net/r/hpimg15/pics/441269Sanstitre1.png

Et voici ce que je vois :

https://2img.net/r/hpimg15/pics/760293Sanstitre.png

La seule solution que j'ai trouvé c'est de baissé la police, padding, et compagnie mais après chez moi sa ferait très très petit. Je pense que chez d'autres aussi sa ferait très petit. Une solution ? Merci d'avance.

Vous ne devez pas avoir la même taille d'écran et la barre de navigation a été faîte en dur sans prendre en compte ce détail, ce qui explique ce résultat pour tous ceux qui viennent voir avec un netbook ou un smartphone (si tu as un petit ordi ou un téléphone sous la main, essaie d'aller voir).

Est-ce-que tu pourrais poster le code HTML et CSS correspondant à ta barre de navigation s'il te plait ?

Merci d'avoir répondu si vite. J'avoue ne pas avoir pris en compte la taille des écrans, même si je l'avais fait le résultat serait le même je ne vois pas du tout comment faire. XD Je pensais qu'un pixel était identique partout mais apparemment même la taille d'un pixel est relatif.

Voici le CSS :

Code:

/*------------------------- Barre Volante -------------------------*/

.Barrevolante {
position: fixed;
top: 0px;
left: 0px;
height: 27px;
min-width: 96%;
width: 98%;
padding: 5px 5px 5px 5px;
margin: 0px 0px 0px 20px;
}
.bodylinewidth, .sfbbwidth {
margin-top: 50px;
}

.Barrevolante {
background-color: #000;
border-bottom: 4px solid #b72c2c;
border-radius: 0px 0px 20px 20px;
}

Voici le code HTML :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
  <td class="Barrevolante" align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}
  </td>
</tr>
            </table>

Hmmmm, j'ai compris le soucis.

Normalement, ça ne devrait pas faire ça, quelque soit la taille de l'écran, pour la simple raison que si le bloc de texte retourne à la ligne, il est absurde qu'un bout reste en haut ainsi (du moins avec word-wrap: normal; ce qui est le cas par défaut).

J'ai donc compris pourquoi ça rendait ainsi : il y a une image (invisible en l'occurrence) avant le texte. Résultat, lorsque l'écran est trop petit pour contenir toute la barre, le texte retourne à la ligne (car il est enveloppé dans une balise de type inline par défaut : a), mais pas l'image car elle dispose encore d'assez de place, d'où ce rendu.


Je vois 2 solutions rapides à cela :

• Soit rajouter la propriété CSS display: inline-block; à l'élément a.mainmenu, ce qui permettra au menu de se comporter comme un block tout en restant inline (combinaison des deux avantages)
  
• Soit rajouter un très rapide script JS qui vient supprimer l'image invisible et modifier un chouïa le padding de a.mainmenu pour rendre l'effet tel que souhaité

La première méthode peut poser des soucis de compatibilité avec de vieux navigateurs. Cependant, on peut également rajouter certaines propriétés CSS pour que ça fonctionne, c'est pas trop complexe.
La seconde n'est pas très complexe, mais elle modifie le DOM (le squelette si tu veux) de ta page. Cela veut dire que si demain tu change ta barre de navigation et souhaite mettre des icones avant (via le Panneau d'Admin fait pour ça), il ne faudra pas oublier de désactiver le script !

A toi de voir donc

Oui il y a c'est surtout ces images a la noix qui me cause problème j'ai essayer de les virés. Pfrrrrr c'est une véritable infection.

J'avoue que la solution du Javascript me botterais bien pour enrichir ma notion de ce langage. Mais je ne pourrais pas le faire sans erreurs voir même complétement faux. C'est en forgeant qu'on devient forgeron donc je vais essayer de forgé l'excaliscript.
J'ai essayer faire ce bout de code grâce a un site ou il explique certaines fonction de la modification du squelette :

Code:

function supprime()
{
   var image = parent.CadreC.quelque chose.getElementsByTagName("img").removeChild;
   .getElementById("quelque chose") entre quelque chose et getElementsByTagName("img")[0];
}

Normalement là ou il y a "quelque chose" c'est la zone de suppression, mais je ne sais pas quoi désigner template, div, css, et cetera. Je hais danser la Java.


Sinon pour le CSS un display:none ça pourrait viré les images invisibles ? Pourquoi je pose la question je pourrais tout simplement tester. e_e

En fait, ça se fait en une simple ligne grâce à la puissance de jQuery (librairie javascript très puissante et rodée, importée nativement dans forumactif).

Du coup, il faut simplement penser au sélecteur qui va te permettre de pointer vers ton élément : il s'agit des images (donc img) qui se trouve dans les balises du menu, caractérisées par la classe mainmenu. Donc, tout comme en CSS, a.mainmenu > img devrait convenir.

Il ne nous reste plus qu'à l'appliquer en créant un nouveau script dans le module fait pour cela :

Code:

$(document).ready(function() {
    $("a.mainmenu > img").remove();
});

La première ligne permet de dire au script de ne s'exécuter qu'une fois le reste de la page (et donc le DOM) chargé (sinon il risque de ne pas trouver les éléments).
Ensuite, $('sélecteur') pointe les éléments que tu souhaites cibler, il ne reste plus qu'à leur appliquer la fonction... remove() ! Et le tour est joué !



Tu n'aura qu'à enlever (ou commenter) ce script lorsque tu voudra remettre des icônes plus tard si jamais c'est le cas.

Maaaaaaaaa j'en suis encore loin pour savoir danser la java. Merci pour la correction de mon pas de danse super foireux, de l'explication du vrai pas de danse, et de ta patience.

Yop'
Je vois que le problème est résolu, par conséquent je classe !
Merci de l'avoir signalé