Boutons alignés

Image Toutes les demandes de support touchant au style de votre forum.
Règles du forum
[Nom exact du style] Description de votre problème
Verrouillé
     

ancien Ninja

Re: Boutons alignés

Message par ancien Ninja » jeu. 22 sept. 2011 17:39

Voici le résultat: :meuh:

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

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 :?:

Avatar du membre

Steph
Administrateur phpBB Assistance
Administrateur phpBB Assistance
Messages : 10878
Enregistré le : avril 2010
Hébergeur(s) : monarobase
Localisation : Alsace (67)
Contact :

Re: Boutons alignés

Message par Steph » jeu. 22 sept. 2011 20:06

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

Re: Boutons alignés

Message par ancien Ninja » sam. 24 sept. 2011 14:07

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

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

Image

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.

:vivepa:

Avatar du membre

EnYgmA
Administrateur phpBB Assistance
Administrateur phpBB Assistance
Messages : 8648
Enregistré le : avril 2010
Hébergeur(s) : Monarobase
Localisation : Au soleil
Contact :

Re: Boutons alignés

Message par EnYgmA » mar. 27 déc. 2011 09:33

Plop,

est ce que le souci est réglé ? :clin:
Très absent en ce moment ...
Conditions générales de services - Conditions générales de support - C.G.U
Merci de mettre un titre de sujet explicite pour toutes vos demandes de support
Référencement gratuit - Forum informatique


ancien Ninja

Re: Boutons alignés

Message par ancien Ninja » mar. 1 mai 2012 09:06

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 :vivepa:

Verrouillé

Retourner vers « Support Styles phpBB3 »