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
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 » dim. 4 sept. 2011 20:50

Pas de souci il n'y a pas d'urgence :clin:


ancien Ninja

Re: Boutons alignés

Message par ancien Ninja » mer. 7 sept. 2011 15:53

Re, :clin:

Ma doublette Janine est un peu "charrette" en ce moment et j'ai avancé un peu sur le codage de la barre de menu "boutons" perso en m'inspirant du mini Tuto de Steph :suspect:

Pourriez vous me dire s'il n'y a pas d' anomalie importante SVP avant que je charge :fii:

Pour le 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>
    </div>
<!-- FIN - MENU PERSO -->

Pour le colour.css

Code : Tout sélectionner

/* Positionnement du menu */   
#menu_perso {
    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.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;
}

/* 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;
}
En sachant que je mettrais ce modèle de bouton:

Image Image au format *.gif aux dimensions: L = 95 H = 20 dans le fichier images du thème du style IceBlue

Qu'en pensez vous :?:

Bien sûr ces boutons ne sont qu'un "brouillon" en attendant que Janine nous fasse quelque chose de bien et si c'est trop complexe demander un support graphique pour la réalisation de ces boutons de liens

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 » jeu. 8 sept. 2011 09:38

Salut,

désolé de la réponse tardive .

Donc un petit coup d'oeil et je ne vois rien qui ne fonctionnerai pas.

Peut être juste changer le max-height: 40px; par max-height: 20px; qui dois correspondre à la hauteur du bouton, à faire si tu as un souci d'affichage.

Peut être qu'en enlevant carrément cette ligne cela fonctionne aussi, faut tester et si ça fonctionne supprime la complétement comme ça tu n'auras pas de problème plus tard si tu change tes boutons


ancien Ninja

Re: Boutons alignés

Message par ancien Ninja » jeu. 8 sept. 2011 09:55

Bonjour :clin:
Steph a écrit : désolé de la réponse tardive .
Y'a vraiment pas de quoi :grataillou:

Merci j'essayes cet après midi je pense :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 » jeu. 8 sept. 2011 09:59

Ok tiens nous au jus mais y a pas de raison tu as bien géré la chose.


ancien Ninja

Re: Boutons alignés

Message par ancien Ninja » jeu. 8 sept. 2011 17:53

:clin:

Voici ce que ça donne:

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

Les liens sont valides et fonctionnels mais le positionnement de la ligne et l'écartement des boutons... :ptdr:

Comment centrer cette ligne sur la page :?:

Comment "écarter" les boutons les uns des autres :?:

Merci :tayoo:

[EDIT]: Janine est passée par là et a tout effacé :ptdr: :ptdr: :ptdr:

Pas grave :meuh:

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. 8 sept. 2011 19:48

Pou centrer le menu tu peux essayer de rajouter text-align : center; a l'id #menu_perso

Et pour l'écartement des boutons il faut ajouter margin-right : 5px; à la partie avec le a.nom_de_ton_bouton, etc .... et jouer sur la valeur du margin en plus ou en moins.

Désolé je peux pas etre plus précis car je suis au boulot et du phone je peux pas mieux faire


ancien Ninja

Re: Boutons alignés

Message par ancien Ninja » jeu. 8 sept. 2011 23:19

Re, :clin:

Comme vous pouvez le constater c'est un peu mieux

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

Janine a fait du ménage dans le overall_hearder.html et a conservé le code inspiré de l'exemple de Steph:

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>
        </div>
    <!-- FIN - MENU PERSO -->
J'ai inclue les modif du Colours.css à ma première proposition avec margin-right à 35px pour espacer les boutons c'est qui va le mieux

Code : Tout sélectionner

/* Positionnement du menu */   
    #menu_perso {
		text-align: center
        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: 35px;
    }

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

Par contre j'ai ajouté

text-align: center

Code : Tout sélectionner

/* Positionnement du menu */   
    #menu_perso {
		text-align: center
        margin: 10px auto 0 auto;
        max-height: 20px; /* hauteur max du menu */
Et comme vous pouvez le constater ça marche pas :suspect:

Merci pour l'aide :vivepa:

[EDIT] Une idée si je met

Code : Tout sélectionner

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

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. 8 sept. 2011 23:21

Il manque un ; apres center


ancien Ninja

Re: Boutons alignés

Message par ancien Ninja » ven. 9 sept. 2011 07:59

Bonjour à tous, bonjour Steph :clin:

:meuh: Désolé mais ça le fait pas :chialance:

Par contre c'est tout de même positif, car la ligne de bouton est du coup un peu plus en dessous et "décollée" du Navbar :vivepa:

Malheureusement la ligne reste cadrée sur la gauche :roo1:

Merci pour l'aide

:vivepa:

Verrouillé

Retourner vers « Support Styles phpBB3 »