
Boutons alignés
Règles du forum
[Nom exact du style] Description de votre problème
[Nom exact du style] Description de votre problème
Re: Boutons alignés
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:
Pour le colour.css
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

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


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

-
- Administrateur phpBB Assistance
- Messages : 12571
- Enregistré le : 19 avril 2010
- Hébergeur(s) : monarobase
- Localisation : Alsace (67)
- Contact :
Re: Boutons alignés
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
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
Re: Boutons alignés
Bonjour
Merci j'essayes cet après midi je pense

Y'a vraiment pas de quoiSteph a écrit : désolé de la réponse tardive .

Merci j'essayes cet après midi je pense

-
- Administrateur phpBB Assistance
- Messages : 12571
- Enregistré le : 19 avril 2010
- Hébergeur(s) : monarobase
- Localisation : Alsace (67)
- Contact :
Re: Boutons alignés
Ok tiens nous au jus mais y a pas de raison tu as bien géré la chose.
Re: Boutons alignés

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

-
- Administrateur phpBB Assistance
- Messages : 12571
- Enregistré le : 19 avril 2010
- Hébergeur(s) : monarobase
- Localisation : Alsace (67)
- Contact :
Re: Boutons alignés
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
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
Re: Boutons alignés
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:
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
Par contre j'ai ajouté
text-align: center
Et comme vous pouvez le constater ça marche pas
Merci pour l'aide
[EDIT] Une idée si je met
Idiot 

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

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;

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




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
