Div dans un li le tout sur 1 ligne

hello,

Bon, ce doit etre l'heure mais la, je suis tombé sur un truc con et je cale.

j'ai un bout de code de ce genre :

<h3 class="spip">Postes propos&eacute;s</h3>
<ul id="listeOffres">
  <li>
    Cherche tourneur/fraiseur - <a href="#" >Voir l'offre</a>&nbsp;&nbsp;&nbsp;]
    <div class="postuler"><a href="#">Postuler</a></div>
  </li>
  <li>
    Cherche plombier/zingueur - <a href="#" >Voir l'offre</a>&nbsp;&nbsp;&nbsp;]
    <div class="postuler"><a href="#">Postuler</a></div>
  </li>
</ul> <!-- fin listeOffres -->

l'idée etait d'avoir un resultat qui ressemble a ca :

o Cherche tourneur/fraiseur - Voir l'offre Postuler
o Cherche plombier/zingueur - Voir l'offre Postuler

sachant que pour le lien 'postuler', j'ai mis un div pour pouvoir lui coller une image de fond (hauteur = 22px, largeur = 80px)

Le probleme , c'est que le div etant par defaut en mode block, il passe a la ligne. et si je le passe en display: inline, il s'affiche bien derriere 'voir l'offre' mais du fait du 'inline', je ne peux plus en specifier la hauteur et la largeur.

j'ai fait des 'bidouilles' en mettant des divs en float et ca marche presque si ce n'est qu'au final, je n'ai plus les puces.

merdoum. Je dois etre bigleux, je vois pas comment on edit son msg.

Bon, je finis ici.

================

Si qq1 a une idée, je suis preneur svp.

Merci d'avance.

Chag

Salut

Déjà je commencerais par mettre un peu d'ordre dans ton code XHTML :

<ul id="listeOffres">
     <li>
          <h4>Cherche tourneur/fraiseur</h4>
          <p>
               <a href="#">Voir l'offre</a>
               <a href="#" class="postuler">Postuler</a>
          </p>
     </li>
</ul>

Ensuite concernant cette image. Qu'est ce qu'elle représente exactement ? Comment doit-elle se positionner par rapport au texte ?

Si c'est une image décorative :

ul#listeOffres li h4,ul#listeOffres li p {
display:inline; }

ul#listeOffres li p a.postuler {
padding:10px 0; /* Si la hauteur de l'image est > à la hauteur du lien (dépend de la taille de police), ce padding [i]étirera[/i] le lien en hauteur pour afficher entièrement l'image   */
background:transparent url(img.jpg) no-repeat; }

Et plus précisément une puce alignée à gauche :

ul#listeOffres li p a.postuler {
[...]
padding-left:85px; /* Libère de l'espace à gauche pour éviter le chevauchement image / texte */
background:transparent url(img.jpg) no-repeat left center;

Et si tu as besoin d'aérer les éléments, laisse tomber les   et autres subterfuges, un padding ou un margin fera amplement l'affaire.

A bientôt
Modifié par BeliG (27 Jan 2009 - 11:12)

merci pour cette super reponse. je vais tester ca !

BeliG a écrit :

Ensuite concernant cette image. Qu'est ce qu'elle représente exactement ? Comment doit-elle se positionner par rapport au texte ?

l'image, c'est un bouton que je voudrais mettre en background du lien 'voir l'offre'. Elle fait 22px de haut pour 80px de large. Ca me permet de faire un bouton un peu sympa tout en n'etant pas obligé de le refaire si je change la langue du site.