[Résolu] Interprétation display:block avec font-variant.

Bonjour la communauté.

Je suis sur un menu vertical à partir d'une liste ordonnée.

<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">L'equipe</a></li>
<li><a href="#">Accueil</a></li>
<li><a href="#">Accueil</a></li>
<li><a href="#">Accueil</a></li>
<li><a href="#">Accueil</a></li>
</ul>

Je recherche à appliquer un arrière plan de couleur au survol du lien avec un picto positionné en background aussi.

Or, pour la couleur il me faut dimensionner la balise A et comme je ne souhaite pas lui imposer de hauteur, j'interviens via le padding après avoir display A en block.

ul {
list-style-type:none;
font:bold 0.90em arial,sans-serif;
font-variant:small-caps;
}

li a {
margin:0;
display:block;
padding:4px 0 4px 20px;
color:#999;
text-decoration:none;
width:140px;
border-top:1px solid #ccc;
background:url(img/picto_menu_off.gif) 3% 50% no-repeat;
}

li a:hover {
background:url(img/picto_menu_on.gif) 3% 50% no-repeat;
background-color:#D5D5D5;
}

Or Il semble que si je ne pose pas de "width" sur le A (et non sur UL ou LI), je me retrouve avec une marge interne importante sous chacun de mes A (apparement à cause de la présence du font-variant:small-caps).

Je ne comprends pas pourquoi, quelqu'un aurait une doc ou une explication ?

Merci à vous et bon week end
Modifié par Philos (13 Jan 2007 - 16:23)

Philos a écrit :
Or Il semble que si je ne pose pas de "width" sur le A (et non sur UL ou LI), je me retrouve avec une marge interne importante sous chacun de mes A (apparement à cause de la présence du font-variant:small-caps).

Voilà qui est étonnant. À priori, tu devrais avoir un espace vide interne qui devrait faire dans les 7-8px (4px de padding, plus l'espace réservé sous le texte pour les lettres ayant des jambages). Qu'appelles-tu une « marge interne importante » ?

Aurais-tu un exemple en ligne pour que l'on puisse constater cela ?

Bonjour Florent et merci

Non, rien en ligne, mais si tu copies colles mon code et retires le width:140px tu verras au survol que l'arrière plan coloré (qui représente la surface que je cherche à obtenir) ne couvre pas l'ensemble, et qu'il y a une marge (interne ou externe, mais plutôt interne selon moi) sous le texte.

Le voir est plus simple que l'expliquer.

Je vais mettre la page en ligne et revenir ajouter un lien ici

Le lien ici


Ce souci ne s'applique que sous IE (version 6), je n'avais pas testé sous Firefox mais ce dernier affiche parfaitement le menu.
Modifié par Philos (13 Jan 2007 - 14:53)

Philos a écrit :
Ce souci ne s'applique que sous IE (version 6), je n'avais pas testé sous Firefox mais ce dernier affiche parfaitement le menu.

Lol, c'est le genre d'indication qu'il serait utile d'avoir dès le début.

Dans ce cas, et au vu du rendu dans les deux navigateurs cités, je pense que le dernier point de l'article suivant devrait t'être utile. Tant qu'à faire, autant lire tout l'article, ça sera toujours ça de pris.

C'est exactement ça, merci de ton aide et de la doc.

J'utilise Html-Kit pour le code et je pensais que son aperçu intégré était aligné sur un moteur Gecko et là je comprends que non, du coup j'étais convaincu que même sous Firefox cela ne s'affichait pas bien.

D'ailleurs, à titre de curiosité, qu'utilises tu pour ta part, comme éditeur de code ?

Merci encore et excellent week end.

a écrit :
D'ailleurs, à titre de curiosité, qu'utilises tu pour ta part, comme éditeur de code ?

Je ne sais pas ce que Florent utilise, mais as-tu remarqué le sujet dédié aux outils de développement dans le bar ?

Ha ben non

A ma décharge, j'ai connu Alsacreations il y a longtemps, lors de ses débuts, depuis il s'est tellement étoffé (blog, forum hyperactif) que je suis hélas à la ramasse

Je l'ai lu et mon choix ne semble pas des plus mauvais. Professionnellement j'enseigne DW en écoles/entreprises mais bon, plus ça va et plus il me rebute.

Merci encore.

Je ne connais pas html-kit, mais pour Dreamweaver, je l'ai testé et je n'utilisais de toutes façons que l'éditeur de code --> retour à Notepad++. Avec un serveur Wamp en local, Firefox & Filezilla, c'est suffisant pour la majorité des projets

Au fait, est-ce que ton problème est [Résolu] ?

Oui titre de sujet mis à jour.