Boutons alignés

[Steph]

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

[ancien Ninja]

Re,

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

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

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:

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

[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]

Bonjour

désolé de la réponse tardive .

Y'a vraiment pas de quoi

Merci j'essayes cet après midi je pense

[Steph]

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

[ancien Ninja]

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

Comment centrer cette ligne sur la page

Comment "écarter" les boutons les uns des autres

Merci

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

Pas grave

[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,

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

Merci pour l'aide

[EDIT] Une idée si je met

Code : Tout sélectionner

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

Idiot

[Steph]

Il manque un ; apres center

[ancien Ninja]

Bonjour à tous, bonjour Steph

Désolé mais ça le fait pas

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

Malheureusement la ligne reste cadrée sur la gauche

Merci pour l'aide