alignement d'une image dans un menu

Le
Une Bévue
je ne parviens pas à aligner correctement verticalement une image dans
un menu :
<http://cjoint.com/12nv/BKnsRfJY4dm_12-11-13--18-40-11--screenshot_.png>
là, l'image fait 18x18 pixels^2, je peux hanger bien sûr.

le code html :
<body>
<ul id='menu'>
<li><a href='#'>Categories</a>
<ul>
<li><a href=''>A - B</a>

</li>
<li><a href='#'>Signets</a>
<li><a href='#'>Recherche</a>
<ul>
<li></li>
</ul>
</li>
<li>&nbsp;<img class='middle'
src='/global_css/recettes_img/blank_18x18.png' alt='' />&nbsp;</li>
<li>&nbsp;<img onclick='toggle_notes();'
src='/global_css/recettes_img/notes_18x18.png' alt='' />&nbsp;</li>
</ul>


le code css :
#menu ul li img {
/*
vertical-align:text-top;
*/
vertical-align:baseline;
}

j'ai essayé aussi avec vertical-align:middle;
bien sûr je voudrais un alignement avec les autres li comme :
<li><a href='#'>Signets</a>
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Une Bévue
Le #24961242
Le 13/11/2012 18:55, Une Bévue a écrit :
je ne parviens pas à aligner correctement verticalement une image dans
un menu :
là, l'image fait 18x18 pixels^2, je peux hanger bien sûr.

le code html :
<body>
<ul id='menu'>
<li><a href='#'>Categories</a>
<ul>
<li><a href=''>A - B</a>
...
</li>
<li><a href='#'>Signets</a>
<li><a href='#'>Recherche</a>
<ul>
</ul>
</li>
<li>&nbsp;<img class='middle'
src='/global_css/recettes_img/blank_18x18.png' alt='' />&nbsp;</li>
<li>&nbsp;<img onclick='toggle_notes();'
src='/global_css/recettes_img/notes_18x18.png' alt='' />&nbsp;</li>
</ul>


le code css :
#menu ul li img {
/*
vertical-align:text-top;
*/
vertical-align:baseline;
}

j'ai essayé aussi avec vertical-align:middle;
bien sûr je voudrais un alignement avec les autres li comme :
<li><a href='#'>Signets</a>






bon à la page :
on donne :
vertical-align:-14px;
le 14 est obtenu après tâtonnements...
SAM
Le #24970232
Le 14/11/12 06:25, Une Bévue a écrit :

le code css :
#menu ul li img {
/*
vertical-align:text-top;
*/
vertical-align:baseline;
}

j'ai essayé aussi avec vertical-align:middle;





à mon idée ça va aligner verticalement (environ à mi-hauteur de l'image)
les autres inlines de part et d’autre

<p>blabla
re blabla</p>

bien sûr je voudrais un alignement avec les autres li comme :
<li><a href='#'>Signets</a>





comme tu as pris garde à ce que les LI soient en inline
avec un peu de chance
ça va peut-être le faire

De prime abord j'en douterais un peu : ce LI n'est pas celui contenant
l'image, il n'y a aucune raison pour qu'il s'aligne sur le texte
entourant l'image dans l'autre LI

bon à la page :

on donne :
vertical-align:-14px;
le 14 est obtenu après tâtonnements...



Un coup de bol quoi ... du raccommodage de grande volée

Un autre bricolage constituerait à glisser une image (transparente) de
même style (align,height) dans chaque LI.
Un peu comme ce qui se faisait au siècle dernier lorsqu'on se servait de
tables pour la mise en forme, afin d'assurer largeurs de colonnes et
hauteurs de rangées.

--
Stéphane Moriaux avec/with iMac-intel
Une Bévue
Le #24970432
Le 18/11/12 00:44, SAM a écrit :
Un coup de bol quoi ... du raccommodage de grande volée



ouais, c'est ce que j'ai pensé aussi

Un autre bricolage constituerait à glisser une image (transparente) de
même style (align,height) dans chaque LI.
Un peu comme ce qui se faisait au siècle dernier lorsqu'on se servait de
tables pour la mise en forme, afin d'assurer largeurs de colonnes et
hauteurs de rangées.



oui, ou avoir une image qui prend toute la hauteur du li et jouer sur
des borders transparents pour l'aligner.

bon, je ne vais pas user le soleil là-dessus...
Publicité
Poster une réponse
Anonyme