par
Cyrano » 29 juin 2007, 20:53
Si tu as un nombre de lien fixe, voici comment procéder. J'ai testé ça avec IE7, Firefox et Opera et dans les trois cas, ça fonctionne bien.
-1- Donner une dimension au bloc menu_haut (largeur de chaque lien x nombre de liens) et lui mettre un margin horizontal automatique;
-2- Supprimer toutes les marges (internes comme externes) des éléments contenus dans ce bloc.
J'ai en outre supprimé pas mal de superflu et ajouté quelques détails. Tu ajusteras la couleur d'arrière plan des liens au besoin selon ta charte graphique, mais même si tu as une image en arrière-plan, si tu mets une couleur en avant-plan, afin d'être strictement conforme, il faut une couleur d'arrière-plan, surtout si le lien devient blanc au survol : imagines que pour une raison quelconque l'image n'apparaisse pas, avec un fond de page en blanc, au survol, le lien disparait.
Ça donne ceci :
Code : Tout sélectionner
#menu_haut
{
margin-bottom: 20px;
height: 31px;
width: 880px;
background-image: url(../images/menu_entrebtn.gif);
background-repeat: repeat-x;
margin: auto;
}
#menu_haut * {
margin: 0px;
padding: 0px;
}
ul.menu_haut
{
height: 31px;
}
ul.menu_haut li {
list-style: none;
height: 31px;
width: 110px;
float: left;
}
a.menu_item
{
background-image: url(../images/bouton_off.gif);
background-position: 0 0;
background-repeat: no-repeat;
line-height: 31px;
text-align: center;
text-decoration: none;
display: block;
margin-left: 5px;
color: #7e7e7e;
background-color: #ccf;
}
a.menu_item:hover
{
background-image: url(../images/bouton_on.gif);
color: #fff;
background-color: #fcc;
}
J'ai noté que tu avais mis une image en arrière-plan du bloc : dans ce cas, elle devient inutile puisque invisible. Si tu veux garder un espace entre tes liens, alors ajoute leur une marge externe horizontale et adapte la largeur du bloc div, sinon, tu auras un retour de ligne pas très esthétique. Si tu veux garder une image en arrière-plan du menu qui couvre la largeur de la page, alors englobe le bloc de menu à l'intérieur d'un autre bloc et mets cette image en arrière-plan de ce contenant parent.
Si tu as un nombre de lien fixe, voici comment procéder. J'ai testé ça avec IE7, Firefox et Opera et dans les trois cas, ça fonctionne bien.
-1- Donner une dimension au bloc menu_haut (largeur de chaque lien x nombre de liens) et lui mettre un margin horizontal automatique;
-2- Supprimer toutes les marges (internes comme externes) des éléments contenus dans ce bloc.
J'ai en outre supprimé pas mal de superflu et ajouté quelques détails. Tu ajusteras la couleur d'arrière plan des liens au besoin selon ta charte graphique, mais même si tu as une image en arrière-plan, si tu mets une couleur en avant-plan, afin d'être strictement conforme, il faut une couleur d'arrière-plan, surtout si le lien devient blanc au survol : imagines que pour une raison quelconque l'image n'apparaisse pas, avec un fond de page en blanc, au survol, le lien disparait.
Ça donne ceci :
[code]#menu_haut
{
margin-bottom: 20px;
height: 31px;
width: 880px;
background-image: url(../images/menu_entrebtn.gif);
background-repeat: repeat-x;
margin: auto;
}
#menu_haut * {
margin: 0px;
padding: 0px;
}
ul.menu_haut
{
height: 31px;
}
ul.menu_haut li {
list-style: none;
height: 31px;
width: 110px;
float: left;
}
a.menu_item
{
background-image: url(../images/bouton_off.gif);
background-position: 0 0;
background-repeat: no-repeat;
line-height: 31px;
text-align: center;
text-decoration: none;
display: block;
margin-left: 5px;
color: #7e7e7e;
background-color: #ccf;
}
a.menu_item:hover
{
background-image: url(../images/bouton_on.gif);
color: #fff;
background-color: #fcc;
}[/code]
J'ai noté que tu avais mis une image en arrière-plan du bloc : dans ce cas, elle devient inutile puisque invisible. Si tu veux garder un espace entre tes liens, alors ajoute leur une marge externe horizontale et adapte la largeur du bloc div, sinon, tu auras un retour de ligne pas très esthétique. Si tu veux garder une image en arrière-plan du menu qui couvre la largeur de la page, alors englobe le bloc de menu à l'intérieur d'un autre bloc et mets cette image en arrière-plan de ce contenant parent.
