Boutons alignés

[ancien Ninja]

[EDIT] Une idée si je met

Code : Tout sélectionner

width: 95px;
        height: 20px;
        display: block;
        float: center;
      margin-right: 35px;

Idiot

Re, j'ai essayé mais ça le fait pas non plus ça me met tous les boutons à gauche en rang d'oignon à la verticale

J'ai essayé d'augmenter aussi margin-right: 35px; à 36 puis 37 puis 38 px c'est bon mais à partir de 39px le dernier bouton de droite passe à la ligne en dessous

[Steph]

Je regarde dès que je rentre ce qui peut poser souci.

EDIT: Alors en fait pour centrer il faut simplement rajouter un width: 240px; à l'id #menu_perso, bien sur 240 est la valeur pour 2 boutons et c'est à modifié en fonction.

Pour l’explication c'est float: left; qui fait que les boutons sont à gauche et tu ne peux pas l'enlever car tu en a besoin pour qu'ils restent alignés sur une même ligne.

Dans ton exemple ci-dessus tu prends la valeur du width: 95px; de la class a.nom_de_ton_bouton et tu le multiplie par le nombre de bouton, ex : 2 boutons = 190, 3 = 285, etc .....

J'espère avoir été assez clair ?

[ancien Ninja]

EDIT: Alors en fait pour centrer il faut simplement rajouter un width: 240px; à l'id #menu_perso, bien sur 240 est la valeur pour 2 boutons et c'est à modifié en fonction.


Dans ton exemple ci-dessus tu prends la valeur du width: 95px; de la class a.nom_de_ton_bouton et tu le multiplie par le nombre de bouton, ex : 2 boutons = 190, 3 = 285, etc .....

J'espère avoir été assez clair ?

Donc dans mon cas de 7 boutons de 95px je dois ajouter: width: 665px; dans l'id #menu_perso

Code : Tout sélectionner

/* Positionnement du menu */   
    #menu_perso {
	text-align: center
        width: 665px;
        margin: 10px auto 0 auto;
        max-height: 20px; /* hauteur max du menu */
      }

Merci

[Steph]

oui le calcul est correct et cela devrai être centré

Et du coup le text-align: center ne sers plus à rien donc tu peux l'enlever

[zach]

Salut,

pas eu le tps de tester, mais ceci dit le display:block transforme les liens (éléments en ligne comme <a>) en elements block (qui retournent à la ligne), d'ou le float: left pour les remettre à coté

donc si le display block n'est pas nécessaire (à vérifier de votre coté ?), on supprime le float: left, et plus de prb avec l'alignement au centre

si le diplays block sert rapport a la zone de lien, pourquoi ne pas mettre les boutons en image plutôt qu'en background, surtout que de cette manière ils seront lu par les moteurs de recherche (alt) non pas comme un lien vide ...

a la base deja la structure des boutons est pas top je sais pas si ca viens du tuto, mais goggle lui il voit pas à quoi correspondent les liens sans ancre :

<a class="img_menu_boutondiaporama" href="https://picasaweb.google.com/1165060392 ... 9173456178">?</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/vie ... ?f=4&t=577">?</a>
<a class="img_menu_boutonliens" href="http://latortuedefelix.fr/forum/viewtop ... f=87&t=862">?</a>

au moins une balise "title" à minima, serait pas du luxe

[ancien Ninja]

Re,

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

Ça marche mais avec une margin-right de 0 px entre les boutons donc ils sont collés mais centrés

on verra avec les boutons du support graphique demandé par Janine http://www.phpbb-assistance.com/boutons ... tml#p12269

En tout cas Merci beaucoup

Voici l'ajout final au colours.css:

Code : Tout sélectionner

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

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

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

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

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

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

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

    a.img_menu_boutonportail {
        background:url("{T_THEME_PATH}/images/boutonportail.gif") 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 {
        width: 95px;
        height: 20px;
        display: block;
        float: left;
		margin-right: 0px;
    }

/* 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 {
        background-position: bottom center;
    }

Zach, Merci à toi aussi, je pense entre voire ce dont tu parles, je n'ai pas le temps présentement mais testerais ce soir sûrement

[Steph]

Oui bien sur le code est basé sur un affichage du bouton à la manière de celui pour répondre à un sujet d’où le display block mais à ce que je vois les boutons en place ne sont pas comme celui ci

Pour ce qui est de la structure du bouton en effet cela pourrai être bien mieux mais en attendant cela fonctionne d'après mes tests, si tu as plus respectueux n'hésite pas zach tes suggestions sont toujours bienvenues

[ancien Ninja]

Hé, hé

Avec les boutons réalisés par Léa: http://www.phpbb-assistance.com/boutons ... t1196.html

http://latortuedefelix.fr/ForumNinja/ :


Ça marche pil poil

avec ce header:

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: 10px;
    }

/* 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;
    }

Selon l'exemple de Steph
Et avec ces paramètres

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

Merci

[Steph]

Salut,

Et avec ces paramètres

• width: 1048px; = 8 x 131

Oui mais attention à ne pas aller trop en largeur car l'affichage du forum pour ceux qui ont une petite résolution en serai affecté

[ancien Ninja]

Oooops! Fausse joie trst2:

j'avais pas vidé le cache et il manquait le bouton Forum

Du coup il est apparue mais à la ligne en dessous, j'ai donc modifié

• margin-right: 10px;

en

• margin-right: 80px;

Ça les met sur 2 lignes, c'est pas trop mal

http://latortuedefelix.fr/ForumNinja/

Bon on verra ça demain