Voici le résultat:

http://latortuedefelix.fr/ForumNinja/portal.php


Obtenue avec:

Les images en *.png sont ici: /www/ForumNinja/styles/IceBlue/theme/images

Avec cet ajout au overall_header.html:

Code: Tout sélectionner

            <!-- DEBUT - MENU PERSO -->
                <div id="menu_perso">
                <a class="img_menu_boutondiaporama" href="https://picasaweb.google.com/116506039227151459454/TortuesDeFelix#slideshow/5582423219173456178"></a>
                <a class="img_menu_boutonboutique" href="http://latortuedefelix.fr/forum/viewforum.php?f=88"></a>
               <a class="img_menu_boutoncharte" href="http://latortuedefelix.fr/forum/viewtopic.php?f=3&t=2"></a>
               <a class="img_menu_boutongps" href="http://latortuedefelix.fr/forum/viewforum.php?f=91"></a>
               <a class="img_menu_boutoninscrire" href="http://www.latortuedefelix.fr/forum/viewtopic.php?f=4&t=577"></a>
               <a class="img_menu_boutonliens" href="http://latortuedefelix.fr/forum/viewtopic.php?f=87&t=862"></a>
               <a class="img_menu_boutonportail" href="http://latortuedefelix.fr/Portail/"></a>
               <a class="img_menu_boutonforum" href="http://latortuedefelix.fr/forum/index.php"></a>
                </div>
            <!-- FIN - MENU PERSO -->



Et cet ajout au colours.css:

Code: Tout sélectionner

/* Positionnement du menu */   
    #menu_perso {
        width: 1048px;
        margin: 10px auto 0 auto;
        max-height: 40px; /* hauteur max du menu */
    }

/* Images de fond des boutons */
    a.img_menu_boutondiaporama {
        background:url("{T_THEME_PATH}/images/boutondiaporama.png") no-repeat;
    }

    a.img_menu_boutonboutique {
        background:url("{T_THEME_PATH}/images/boutonboutique.png") no-repeat;
    }

    a.img_menu_boutoncharte {
        background:url("{T_THEME_PATH}/images/boutoncharte.png") no-repeat;
    }

    a.img_menu_boutongps {
        background:url("{T_THEME_PATH}/images/boutongps.png") no-repeat;
    }

    a.img_menu_boutoninscrire {
        background:url("{T_THEME_PATH}/images/boutoninscrire.png") no-repeat;
    }

    a.img_menu_boutonliens {
        background:url("{T_THEME_PATH}/images/boutonliens.png") no-repeat;
    }

    a.img_menu_boutonportail {
        background:url("{T_THEME_PATH}/images/boutonportail.png") no-repeat;
    }
   a.img_menu_boutonforum {
        background:url("{T_THEME_PATH}/images/boutonforum.png") no-repeat;
    }

/* Taille des boutons + positionnement horizontal */
    a.img_menu_boutondiaporama, a.img_menu_boutonboutique, a.img_menu_boutoncharte, a.img_menu_boutongps, a.img_menu_boutoninscrire, a.img_menu_boutonliens, a.img_menu_boutonportail, a.img_menu_boutonforum  {
        width: 131px;
        height: 37px;
        display: block;
        float: left;
        margin-right: 125px;
    }

/* affichage de la partie cachee de l image au survol de la souris */
    a.img_menu_boutondiaporama:hover, a.img_menu_boutonboutique:hover, a.img_menu_boutoncharte:hover, a.img_menu_boutongps:hover, a.img_menu_boutoninscrire:hover, a.img_menu_boutonliens:hover, a.img_menu_boutonportail:hover, a.img_menu_boutonforum:hover {
        background-position: bottom center;
    }


• width: 1048px; = 8 x 131
• margin-right: 125px;

je suis passé progressivement de 80 à 125px


et cette modification du common.css: d'après ce tuto: http://forums.phpbb-fr.com/documentatio ... 28701.html

Code: Tout sélectionner

    #wrap {
       width: 900px;
       margin: 0 auto;
       padding: 0 20px;
    }



• width: 900px;

au lieu des 650 de base

Qu'en pensez vous

Je diminuerai quand même le 1048px car je trouve que ça fait trop un 1000px serai plus approprié sachant que la moyenne des internaute est de 1024 X 768 pour leur écran

tendance qui tende à augmenter d'ailleurs

Nouvel essais concluant avec les nouveaux boutons plus petits réalisés par Léa:

http://latortuedefelix.fr/ForumNinja/portal.php



Obtenue avec:

Les nouvelles images plus petites en *.png sont ici: /www/ForumNinja/styles/IceBlue/theme/images

Avec cet ajout au overall_header.html:

Code: Tout sélectionner

            <!-- DEBUT - MENU PERSO -->
                <div id="menu_perso">
                <a class="img_menu_boutondiaporama" href="https://picasaweb.google.com/116506039227151459454/TortuesDeFelix#slideshow/5582423219173456178"></a>
                <a class="img_menu_boutonboutique" href="http://latortuedefelix.fr/forum/viewforum.php?f=88"></a>
               <a class="img_menu_boutoncharte" href="http://latortuedefelix.fr/forum/viewtopic.php?f=3&t=2"></a>
               <a class="img_menu_boutongps" href="http://latortuedefelix.fr/forum/viewforum.php?f=91"></a>
               <a class="img_menu_boutoninscrire" href="http://www.latortuedefelix.fr/forum/viewtopic.php?f=4&t=577"></a>
               <a class="img_menu_boutonliens" href="http://latortuedefelix.fr/forum/viewtopic.php?f=87&t=862"></a>
               <a class="img_menu_boutonportail" href="http://latortuedefelix.fr/Portail/"></a>
            <a class="img_menu_boutonforum" href="http://latortuedefelix.fr/forum/index.php"></a>
                </div>
            <!-- FIN - MENU PERSO -->



Et cet ajout au colours.css:

Code: Tout sélectionner

/* Positionnement du menu */   
    #menu_perso {
        width: 1000px;
        margin: 10px auto 0 auto;
        max-height: 40px; /* hauteur max du menu */
    }

/* Images de fond des boutons */
    a.img_menu_boutondiaporama {
        background:url("{T_THEME_PATH}/images/boutondiaporama.png") no-repeat;
    }

    a.img_menu_boutonboutique {
        background:url("{T_THEME_PATH}/images/boutonboutique.png") no-repeat;
    }

    a.img_menu_boutoncharte {
        background:url("{T_THEME_PATH}/images/boutoncharte.png") no-repeat;
    }

    a.img_menu_boutongps {
        background:url("{T_THEME_PATH}/images/boutongps.png") no-repeat;
    }

    a.img_menu_boutoninscrire {
        background:url("{T_THEME_PATH}/images/boutoninscrire.png") no-repeat;
    }

    a.img_menu_boutonliens {
        background:url("{T_THEME_PATH}/images/boutonliens.png") no-repeat;
    }

    a.img_menu_boutonportail {
        background:url("{T_THEME_PATH}/images/boutonportail.png") no-repeat;
    }
   a.img_menu_boutonforum {
        background:url("{T_THEME_PATH}/images/boutonforum.png") no-repeat;
    }

/* Taille des boutons + positionnement horizontal */
    a.img_menu_boutondiaporama, a.img_menu_boutonboutique, a.img_menu_boutoncharte, a.img_menu_boutongps, a.img_menu_boutoninscrire, a.img_menu_boutonliens, a.img_menu_boutonportail, a.img_menu_boutonforum  {
        width: 95px;
        height: 37px;
        display: block;
        float: left;
        margin-right: 25px;
    }

/* affichage de la partie cachee de l image au survol de la souris */
    a.img_menu_boutondiaporama:hover, a.img_menu_boutonboutique:hover, a.img_menu_boutoncharte:hover, a.img_menu_boutongps:hover, a.img_menu_boutoninscrire:hover, a.img_menu_boutonliens:hover, a.img_menu_boutonportail:hover, a.img_menu_boutonforum:hover {
        background-position: bottom center;
    }
   


• width: 1000px; J'ai essayé à 760 = 8 x 95 ça ne marche pas cela fait deux lignes
• margin-right: 25px;

je suis passé progressivement de 5 à 25px

et cette modification faite par Janine au borders.css tout à la fin :

Code: Tout sélectionner

 
.outside {
       margin: 0 auto;
       width : 100%; /* Breite gesamt */ /*au lieu de 980px */
       padding: 0px;
       }


Je pense que l'on est proche de la solution hormis une erreur d'affichage avec ce 100% de width sur le border pour laquelle je vais ouvrir un autre post.

Plop,

est ce que le souci est réglé ?

Oui, merci le problème est réglé

Avec cette taille de bouton + l'affichage du forum à la largeur par défaut + modif du overall_header.html + colour.css + réglage du margin-right: 25px; (je suis passé progressivement de 5 à 25px) tout est OK dans cette configuration: http://latortuedefelix.fr/ForumNinja/index.php
Reste à passer sur le forum live http://latortuedefelix.fr/forum/index.php mais cela fera l'objet d'une autre demande si pbl

Merci