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

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

Re: Boutons alignés

Message par Steph »

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

ancien Ninja

Re: Boutons alignés

Message par ancien Ninja »

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:

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

Re: Boutons alignés

Message par Steph »

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 »

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:

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

Re: Boutons alignés

Message par Steph »

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 »

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

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

Re: Boutons alignés

Message par Steph »

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 »

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

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

Re: Boutons alignés

Message par Steph »

Il manque un ; apres center

ancien Ninja

Re: Boutons alignés

Message par ancien Ninja »

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 »