Bonjour,
J'ai un problème avec un menu qui est codé sous la forme d'une liste (ul, li).
J'utilise la police Trebuchet MS pour ce menu (sachant qu'elle est présente sur plus de 98% des MACs, de Windows et iOS). Sous Android, ça passe avec la police par défaut.
Et bien entendu sous Linux mon menu part en cacahuètes car la police n'est pas présente sur le système et la police par défaut a un espacement entre caractères supérieurs.
Voici ma liste :
Et voici mon code CSS :
J'ai donc un div avec mon logo en fond à gauche et ma liste qui commence à 362px
Voici ce que donne le menu en image (sans la partie logo) :
http://imageshack.us/scaled/landing/132/menudw.png
J'ai essayé différentes choses sans succès. A part transformer mon texte en image, je ne vois pas comment m'en sortir mais c'est une chose que je souhaiterais éviter.
Tous mes éléments de liste on un padding de 26px à gauche et 26px à droite afin d'avoir le même espace entre chaque élément.
Avec Trebuchet MS, mon menu réparti uniformément entre la gauche et la droite. C'est une chose que je souhaite conserver. Je ne souhaite pas que le menu s'arrête aux 3/4 du bloc parent.
Si quelqu'un a une idée, je suis preneur
Merci par avance
Modifié par benjaming (23 Feb 2013 - 12:41)
J'ai un problème avec un menu qui est codé sous la forme d'une liste (ul, li).
J'utilise la police Trebuchet MS pour ce menu (sachant qu'elle est présente sur plus de 98% des MACs, de Windows et iOS). Sous Android, ça passe avec la police par défaut.
Et bien entendu sous Linux mon menu part en cacahuètes car la police n'est pas présente sur le système et la police par défaut a un espacement entre caractères supérieurs.
Voici ma liste :
<div id="menu_logo">
<nav>
<ul id="menu">
<li><a href="index.php?p=accueil"<?php if ($page == 'accueil') echo ' class="current"' ?>>Accueil</a></li>
<li><a href="index.php?p=univers"<?php if ($page == 'univers') echo ' class="current"' ?>>Notre univers</a></li>
<li><a href="index.php?p=realisations"<?php if ($page == 'realisations') echo ' class="current"' ?>>Réalisations</a></li>
<li><a href="index.php?p=acces"<?php if ($page == 'acces') echo ' class="current"' ?>>Accès</a></li>
<li><a href="index.php?p=contact"<?php if ($page == 'contact') echo ' class="current"' ?>>Contact</a></li>
</ul>
</nav>
</div>Et voici mon code CSS :
div#menu_logo
{
height: 145px;
background: url(../images/interface/logo.png) no-repeat 20px 20px;
}
ul#menu
{
height: 135px;
margin-left: 362px;
margin-right: 20px;
padding-left: 9px;
list-style-type: none;
font-size: 0.8em;
font-weight: bold;
border-bottom: 6px solid #F97207;
}
ul#menu li
{
padding: 105px 26px 0px 26px;
float: left;
display: inline;
text-transform: uppercase;
text-align: center;
}
ul#menu li a
{
height: 30px;
display: block;
color: #000;
text-decoration: none;
}
ul#menu li a.current
{
border-bottom: 6px solid #A44626;
}
ul#menu li a:hover
{
color: #707070;
border-bottom: 6px solid #A44626;
}
J'ai donc un div avec mon logo en fond à gauche et ma liste qui commence à 362px
Voici ce que donne le menu en image (sans la partie logo) :
http://imageshack.us/scaled/landing/132/menudw.png
J'ai essayé différentes choses sans succès. A part transformer mon texte en image, je ne vois pas comment m'en sortir mais c'est une chose que je souhaiterais éviter.
Tous mes éléments de liste on un padding de 26px à gauche et 26px à droite afin d'avoir le même espace entre chaque élément.
Avec Trebuchet MS, mon menu réparti uniformément entre la gauche et la droite. C'est une chose que je souhaite conserver. Je ne souhaite pas que le menu s'arrête aux 3/4 du bloc parent.
Si quelqu'un a une idée, je suis preneur
Merci par avance
Modifié par benjaming (23 Feb 2013 - 12:41)
.
).
