Boutons alignés

[ancien Ninja]

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

[Steph]

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

[ancien Ninja]

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.

[EnYgmA]

Plop,

est ce que le souci est réglé ?

[ancien Ninja]

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