Une BOITE vide avec des dimensions fixe qui n'apparaît pas

Voici mon code HTML:

<div id="container">du texte<a style="background-image:url(icon.gif)"></a>du texte</div>

et le code CSS:

#container {line-height:16px}
#container a {width:16px;height:16px;padding-left:16px;overflow:visible;display:inline;background-repeat: no-repeat;background-position:50% 50%}

Mon problème est que ma boite n'apparait pas sous IE et FF si je ne mets pas le padding-left:16px; et en hauteur sous FF je n'arrive pas à forcer la taille à 16px. Cela marche néanmoins sous IE6

Si qq1 voit la solution Merci !

Bonjour et bienvenu à toi...

D'après le code que tu fournis, il me semble assez normal que ta boîte n'apparaisse pas.
En effet, tu lui affectes bien une largeur et des marges ...
Mais tu spécifies également display:inline;
Cette déclaration a pour effet de donner à la balise concernée le comportement d'une balise inline (ce qui est le cas par défaut de la balise <a>).

Je te conseilles donc :
- De consulter ceci : La structure des balises : bloc et en-ligne
- Et de remplacer ta déclaration par un display:block;

Modifié par Cygnus (15 Jan 2007 - 13:10)

<a style="background-image:url(icon.gif)"></a>

Tiens, c'est bizarre cet affaire. C'est moi ou bien ce lien n'a pas de contenu, et ne pointe sur rien ?

Je suis tout à fait d'accord pour la propriété inline, mais comme j'ai besoin d'afficher mon image au milieu de mon texte je ne peux pas mettre du display:block. Une solution serait peut-être d'imbriquer un display:block dans un display:inline avec deux div par exemple. Mais ça rajoute des balises et je tente de faire un code extrèmement simple pour ne pas charger en balises.

Sinon actuellement je m'en sors en jouant sur les paddings qui me permettent de faire apparaître l'image. J'ai rajouté de plus du no-repeat et du 50% 50% pour le fond en CSS afin de gérer l'agrandissement éventuel de ligne.
Ca marche mais j'aurai espéré pouvoir trouver une solution plus simple, si qq1 en voit une !

P.S.: Pour la balise <a> sans lien c'est normal je l'utilise à la place de DIV comme ça je perds quatre caractères.
Modifié par MacFr (16 Jan 2007 - 19:38)

MacFr a écrit :
Pour la balise <a> sans lien c'est normal je l'utilise à la place de DIV comme ça je perds quatre caractères.

... et ça, c'est normal ?!

Ca peut sembler bizarre, mais je cours à l'économie de code pour faire des pages les plus légères possibles. Mis bout à bout on arrive à des trucs pas mal.

LOL,

cela dit je rigole mais c'est un peu le raisonnement qu'on trouve dans les nifty corners sauf que dans ce cas l'auteur utilise <b> et qu'il s'agit de code généré en JS. Et <b> est, au moins, une balise qui n'a réellement aucune signification.

Mais bon tout cela n'est vraiment pas sérieux, pour rester gentil.

Ca marche pareil en DIV et en A pourquoi donc ne pas perdre quatre caractères, à la fin c'est kif kif.

MacFr a écrit :
Ca marche pareil en DIV et en A pourquoi donc ne pas perdre quatre caractères, à la fin c'est kif kif.

Bah oui après tout, c'est vrai ça! Et puis, pourquoi s'embêter avec des h1, h2, h3, strong et autres listes, mettons des divs partout partout! (ah non, des a, c'est encore mieux...)

Un peu de lecture:
Respecter la sémantique XHTML

MacFr a écrit :
Ca marche pareil en DIV et en A pourquoi donc ne pas perdre quatre caractères, à la fin c'est kif kif.

Une petite suggestion : n'utilise que des noms de fichiers à une lettre, tu gagneras pas mal de bande passante et à la fin ce sera kif kif.

MacFr a écrit :
Ca marche pareil en DIV et en A pourquoi donc ne pas perdre quatre caractères, à la fin c'est kif kif.

La seule chose dont je peux t'assurer c'est que pour toi ça va vraiment vers du kif kif : 0=0

Une question quand même, tu es très débutant naïf et un peu cossard ?

Ou est ce que tu te fiches carrément du monde sur ce coup là ?

J'avoue que mon pragramatisme est peut-être un peu poussé pour certain pour remplacer du DIV par du A, maisl le fait est que je fais une course au code minimal. C'est quelque chose d'important pour moi sur ce projet et je compte sur des noms de classes courtes, des héritages CSS pour éviter d'en créer des nouvelles des noms de fonctions JS (pour AJX notament) courts aussi, et à la fin je compte nettoyer mon code pour la version en ligne en mettant tout sans saut de lignes et sans commentaires, sans espaces inutiles etc.

Le DIV transformé en A n'est qu'une étape parmi toutes celles-ci. J'utilise le A pour des codes simples sans texte à l'intérieur où le style générique de A (défini dans mon CSS) n'ai alors pas à redéfinir, ainsi A est traité comme une boîte normal par IE et FF.
Si l'affichage final est nickel sous FF 1.5 2.0, IE 6.0 7.0, pourquoi se priver de tout cela.

Après je vous avoue qu'ici les standards sont foutus à la poubelle, mais je pense pas que cela changera la vision de mes futurs internautes.
Modifié par MacFr (18 Jan 2007 - 11:09)

MacFr a écrit :

Après je vous avoue qu'ici les standards sont foutus à la poubelle, mais je pense pas que cela changera la vision de mes futurs internautes.

Bonjour,

Tu n'as donc rien de plus à attendre de la communauté Alsacréations avec une approche de type de conception.

Je ferme ce sujet. Si tu souhaites adopter à l'avenir un autre mode de conception respectueux des standards, en adoptant de bonnes pratiques tu seras évidement le bienvenue.