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

ancien Ninja

Re: Boutons alignés

Message par ancien Ninja » ven. 9 sept. 2011 09:52

ninja a écrit : [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 :swom: ç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 :Peace:

Avatar du membre

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

Re: Boutons alignés

Message par Steph » ven. 9 sept. 2011 11:57

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

Re: Boutons alignés

Message par ancien Ninja » ven. 9 sept. 2011 12:14

Steph a écrit : 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 */
      }
:timidou: :stupid:

Merci :tayoo:

Avatar du membre

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

Re: Boutons alignés

Message par Steph » ven. 9 sept. 2011 12:43

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

Avatar du membre

zach
Support phpBB Assistance
Support phpBB Assistance
Messages : 1313
Enregistré le : décembre 2010

Re: Boutons alignés

Message par zach » ven. 9 sept. 2011 13:13

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: Boutons alignés

Message par ancien Ninja » ven. 9 sept. 2011 13:17

Re, :clin:

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

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

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

En tout cas Merci beaucoup :fleur:

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

:cawa: :vivepa:

Avatar du membre

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

Re: Boutons alignés

Message par Steph » ven. 9 sept. 2011 13:22

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


ancien Ninja

Re: Boutons alignés

Message par ancien Ninja » mer. 21 sept. 2011 23:39

Hé, hé :vivepa:

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

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

Ça marche pil poil :n°1:

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 :dansmesbras:
Et avec ces paramètres
  • width: 1048px; = 8 x 131
  • margin-right: 10px;
:vivepa:

Merci

Avatar du membre

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

Re: Boutons alignés

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

Salut,
ninja a écrit : 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

Re: Boutons alignés

Message par ancien Ninja » jeu. 22 sept. 2011 00:13

Oooops! Fausse joie trst2:

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

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

Verrouillé

Retourner vers « Support Styles phpBB3 »