28173 sujets

CSS et mise en forme, CSS3

[Mis de côté] Equivalent de IMG en css

Bonjour !

Je me demandais quel était l'équivalent CSS d'une balise IMG. Ce que je souhaite faire, c'est remplacer :

<img src="images/bla.png" title="coucou" />

Par :

<div id="fakeImg" title="coucou"></div>

Avec le CSS qui va bien (background-image: url(images/bla.png); width: 16px;)

En fait mon souci c'est que je ne peux pas utiliser width avec un élément inline (type span), et si j'utilise un span, je suis obligé de remplir avec des "&nbsp;", ce qui est laid au possible.
Et les éléments block (type div) ne sont pas non plus appropriés, même si je le passe en float.

Voilà, donc si quelqu'un a la réponse... Je serais vraiment ravi d'apprendre à le faire ! Smiley smile

(le but est de centraliser les noms de fichiers images dans le css et pas dans chaque fichier html, en gros).

D'ailleurs ptite question subsidiaire : niveau perf, c'est mieux de charger l'image dans le css ou dans le html ? Me souviens avoir lu un article là dessus disant que dans un des deux cas ça chargeait l'image à chaque fois, mais me rappelle plus quel cas Smiley smile

Merci à tous, bonne journée !

EDIT : ah et bien sûr j'ai testé le truc :

<img class="fakeImg" title="coucou" />

Mais ça ne fonctionne pas Smiley smile
Modifié par Lideln (01 Nov 2007 - 15:51)
Bonjour

Pour ce qui est de ton soucis avec width pour les balises span, je vois 2 solutions:

- utiliser un div
- modifier le comportement de ton span en mettant 
display: block


Lideln a écrit :

D'ailleurs ptite question subsidiaire : niveau perf, c'est mieux de charger l'image dans le css ou dans le html ?


la vrai question, à mon avis serais "à quoi sert mon image?". S'il s'agit d'une image apportant une information, il faut utiliser la balise <img />. Si au contraire, il s'agit d'une image purement décorative, il faut utiliser la propriété background du css.
Modifié par Francois44 (31 Oct 2007 - 14:54)
Merci pour la réponse François44 !

Cependant, pour le point 1 : le span, si je mets block, ça sera comme un div et du coup je perds l'aspect inline de la balise IMG. Or je souhaite simuler exactement cette balise IMG juste avec du css (je pensais que "inline-block" aurait pu convenir d'après son nom, mais en fait pas du tout).

Pour le point 2, je suis conscient de l'aspect contenu/décoration, je parlais simplement de la "technique" de chargement de l'image en css ou en html, est ce que ça diffère, si oui en quoi, s'il y en a un qui charge l'image une seule fois, etc. Je vais checker sur google en attendant Smiley smile

Merci !
UP Smiley smile

Je cherche toujours un moyen de faire en CSS (pur, avec un div par exemple) un équivalent de la balise IMG.

Merci à vous Smiley cligne
Lideln a écrit :
UP Smiley smile

Je cherche toujours un moyen de faire en CSS (pur, avec un div par exemple) un équivalent de la balise IMG.


Bonjour,

Pour ne pas laisser traîner les choses:

Compte-tenu des implémentations, une "balise IMG" a une fonction radicalement différente d'une image de background CSS. Il n'y a actuellement aucune équivalence possible, à aucun niveau, par quelque astuce que ce soit.

La réponse est donc: oublier cette idée.

Maintenant, pour entrer davantage dans les détails:
- les mésusages de CSS sont très à la mode, et de nombreuses techniques existent ici ou là, aussi fragiles et inappropriées soient-elles.
- si CSS2.1 et une zest de CSS3 étaient plus unanimement implémentées (IE n'est pas le principal coupable), on pourrait en effet envisager certaines choses de ce type, et commencer à réfléchir à leurs conséquences. Mais encore une fois: non, pas maintenant Smiley cligne
Modifié par Laurent Denis (01 Nov 2007 - 14:43)
Ok merci.

En fait mon but était de simuler une IMG (de type inline mais "block" enfin je m'exprime mal ^^), pour obtenir un résultat un peu comme les pseudo classes :before et :after (qui pourtant sont du pur CSS)

Alors désolé de sembler si "hérétique" mais je ne pensais pas que c'était une idée aussi saugrenue Smiley smile

J'oublie pour l'instant, mais il doit bien y avoir un moyen d'avoir une classe qui se comporte comme le :before, c'est a dire pouvoir mettre une image qui prenne de la place et décale le contenu, et reste inline.

Bref merci quand même Smiley smile
Voyons Laurent, ne soyons pas si intransigeant ... Smiley confus

Utiliser la propriété display avec block ou inline change non seulement le positionnement de l'élément, mais aussi ces propriétés... Donc, un div avec display:inline perd ses valeurs height et width et s'adapte plutôt à son contenu. Donc, pas bon pour une image en fond...
La solution est de conservé le div de block (et tout ce qui va avec, width, height, ect...) et définir la propriété float, par exemple float:left. Et zou, on aligne les div comme des span (ou presque Smiley ravi )

A+R.
bon, j'ai écrit vite fait le précédent post.

En gros, la propriété "display" n'est pas nécessaire.

[code]
div {
float:left;
width:100px;
height:100px;
background-image:url(monimage.jpg);
}

A+R.
Merci,

Mais "float" fait sortir l'élément du flux, donc il se positionnera au tout début de son conteneur, et non à la suite de l'élément précédent, ou entre 2 textes par exemple... Si je ne m'abuse ?
Sujet clos
Aller à