Width et height pour élément inline

alut tous le monde,

c'est une problème ardu, qui n'a probablement pas de solution... mais ça ne coute rien de poser la question

je me demande s'il est possible de créer un élément avec display:inline, mais qui aurait des dimmension.

C'est pour insérer des petites icônes en ligne dans du texte, et qui suivrait le flux comme si c'était des caractère spéciaux. Mais je voudrais le faire sans images au sens html, et j'aimerais le faire avec des div inline, auquel je donne une image de fond par un style css. Mais si je fais un div inline, alors je ne peux pas lui donner de dimmension. Si j'en fait un div float:left, alors ça modifie la position du paragraphe qui suit, s'il y en a un aprés, et que l'icone est à la fin d'un paragraphe.

Je me demande si c'est possible, je pense que non...

mais vous, vous en pensez quoi ?

oilà, merci

Bonsoir,
Bonne question, LA solution aurait été d'attribuer a ton div la déclaration
display: inline-block (ajouté à CSS2.1) qui a le même effet que les éléments en-ligne remplacés (images, input, select...). Celle-ci permet de donner des dimensions et des marges verticales à un élément, qui plus est ne génère de pas retour chariot.
Malheureusement les Mozilla et firefox n'ont pas implémenté la valeur inline-block et d'autres comme Netscape l'interprètent pas correctement.

La solution serait peut-être d'attribuer à cet élément la position:absolute qui dans le cas ou les top, right, left, bottom ne sont pas spécifiés (= valeur auto) permet de placer l'élement là ou il le serait s'il n'était pas positionné c-a-d dans le flux.

D'autant plus que la position absolute convertit la valeur du display d'un élément à block.
Ceci dit le texte qui entourera cet élément passera dessous, puisque ce dernier est retiré du flux.
il faudra donc lui attribuer une marge laréral d'au moins la largeur
de ton élément inséré.
Ceci dit il me semble que ça ne fonctionne bien que sur IE (exceptionnel!)

Une autre solution possible mais moins propre serait d'écrire par exemple

<span style="background: #666; padding: 0 10px; color: #666">.</span>

Les padding qui eux sont pris en compte par les élément inline permettent de donner d'une certine manière une taille au span qui doit contenir quelquechose.
Modifié par Hermann (01 Mar 2006 - 03:12)