Salut tout le monde!
 
Alors voilà (comprenne qui pourra) je viens vers vous parce que franchement je bloque là...
 
Mise en situation :
J'ai une page (logique!) dans laquelle je fais apparaître une image sur laquelle se trouve un lien. Mais en fait je voudrais que l'image qui est affichée soit modifiable via ma CSS et donc sans intervennir dans le code html. Ce que je vois donc comme solution assez simple c'est de passer le lien en block, donc avec le code suivant par exemple :
 
html :

CSS :

 
Mais de fait mon lien n'est plus en inline et donc s'intégre très mal dans le paragraphe dans lequel il doit être affiché puisqu'il génére des retours à la ligne avant et après lui. Jusque là c'est toujours logique me direz vous et je suis bien d'accord.
 
La question que je me pose c'est comment résoudre justement ce problème? Comment faire pour que mon lien s'intégre bien dans le paragraphe?
 
J'ai bien essayé de le mettre en float:left; mais ça ne change rien au problème. J'ai également lu quelques truc à propos des run-in, compact et inline-block que j'ai tous essayé et qui ne m'apportent pas de solution....
 
Donc j'en suis rendu là. Mais peut être me suis-je orienté vers la mauvaise solution? Après tout je n'ai pas la prétention d'être le meilleur en html/css.
 
En vous remerciant!

bah tu enlève le display: block.
 
en fait j'ai pas compris le problème avec l'image, y'a pas moyen d'avoir un p'tit dessin qui va bien ?

En fait je veux que mon lien avec le code suivant

donc avec rien entres les balises ouvrantes et fermentes du lien affiche quand même une image.
 
Et c'est possible avec un block, puisqu'on peut lui donner des dimensions et une image de fond.

regarde 10 ligne + bas, le poste que Gatsu à fait aujourdui et que personne à répondu... ça va tinteresser....

ouaisd mais si tu ne mets pas de texte, comment le navigateur va savoir la taille que prend ton truc ?  
 
Tu peux faire une bidouille...tu mets un PNG transparent dans ton lien mais bon, il ne porte aucune information, normalement il ne devrait pas être là (mais tu arrivera au résultat que tu veux)

La seule méthode au point que je puisse connaitre actuellement c'est d'utiliser le display:inline-block (future valeur du display dans les CSS3), ca te permet de passer un élément en ligne mais avec le comportement d'un block. A l'heure actuelle les navigateurs qui gère ce display sont :  
Safari, IE5Mac, IEWin5.5+, Opera 8+
 
mais malheureusement et je ne sais pas pourquoi, Firefox ne comprend pas cela. j'ai réussi à isoler le problème en imbricant 2 éléments (<a><span></span></a> ) et en utilisant le display:inline-table sur le A et le display:table-cell sur le span
 

 
tu noteras que je n'utilise pas de Hack CSS pour mes display et pour une bonne raison.
Dans l'ordre des choses si je me mets à la place du navigateur ça donne ça :  
IE win/mac : je ne connais pas inline-table donc je le prend pas, mais je connais inline-block, donc je le prend
Safari/opera : je connais inline-table donc je le prend, mais je connais inline-block et comme il est arrivé en dernier je le prend
firefox : Je connais inline-table, tiens je ne connais pas inline-block, ben je garde inline-table.
 
idem pour le table-cell.
 
Voila ca ira comme explication .
A noter que j'ai justement mis au point un bouton qui se size en fonction de son contenu et qui se comporte inline en utilisant cette méthode :  
http://gatsu.ftp.free.fr/html/inli [...] utton.html

 
Même s'il ne porte aucune information on peut lui attribuer des dimensions à conditions qu'il soit en block.
 

 
Merveileux, merci ça marche très bien mais je suis quand même étonné qu'il n'existe pas d'autres solutions.
 

ben tu dois être assez bien placé pour savoir qu'un élément inline ca ne se dimensionne pas, sauf les élément inline de type remplacé (img, input..)
 
C'est pour ça que il y a la propriété display:inline-block qui permet de faire justement l'effet attendu, mais FF ne gère pas, ya le inline-table qui pourrai faire l'affaire, mais tu es obligé d'avoir un élément en display:table-cell à l'intérieure pour le faire fonctionner

Et oui je sais bien qu'un élément de type inline ne se dimensionne pas et qu'il occupe un espace minimum qui est fonction de son contenu.
 
Mais si on peut changer le display de certains éléments pour du inline sans encombre je me disais qu'on pouvais égalemet faire l'inverse sans encombre et donc simplement.
 
Et quelle ne fut pas ma joie en retrouvant le inline-block dans les bas fonds de ma mémoire! Mais ma tristesse fut encore plus grande quand je découvrais que FF, mon navigateurs favoris, n'en voulais pas et que IE, le pire parmis les pires selon moi, en voulais bien!

Ben c'est pour cela que le inline-table et table-cell font l'affaire pour le moment

Je n'avais pas pensé aux inline-table et table-cell qui sont en effet une solution, même si ça me parait un peu moins propre ça va m'aider. Parce que je ne vois franchement pas comment changer via CSS des images qui sont dans des paragraphes si ce n'est en utilisant cette méthode.
 
Encore merci  

Et tant que j'y suis, puisque je vais certainement devoir affronter le problème, pour une image sans lien qu'est ce que tu préconise? Imbrication de span?

heu as tu daigné faire un C/C du code HTML que j'ai posté, qui répond justement à tes besoin , et normalement c'est crossbrowser

Reprennons :
Ton code implique deux éléments, à savoir un a et un span imbriqué dans le a. Donc il lui faut un lien. J'ai fait un copier/coller de ton code qui fonctionne très bien dans mon cas avec une image+lien.
 
Mais je me disais... Sans lien? Donc sans a? dans quoi imbriquer le span?