28220 sujets

CSS et mise en forme, CSS3

Faire disparaitre un texte ?

Bonjour

je voudrais remplacer un texte, de la page html, par une image via la page CSS. Mais j'ai quelque problèmes ; le texte est dans une span et lorsque que je fais disparaitre la span, l'image disparait avec.

voici le code de la page html : 
<h2 class='chatbox'><span>Chatbox</span></h2>


et le CSS :
div#contenu h2 span
{
	display:none;
}

div#contenu h2.chatbox
{
	background:url(img/chatbox.gif) no-repeat left bottom;
}


merci d'avance ! Smiley smile
SirWam a écrit :

tu peux tout simplement faire un text-indent:1000px;


ben en fait ça m'aggrandi la div dans laquelle se trouve le text et il est toujours là... Smiley sweatdrop
Slt,

essaye avec un overflow:hidden;

++

EDIT : bien sur enlève ton <span> et applique ça au h2
Modifié par SirWam (04 Aug 2005 - 14:47)
c'est bon !

j'ai remplacé le display:none; par un visibility:hidden; et tout est rentré dans l'ordre !! Smiley smile

merci pour les réponses Smiley cligne Smiley smile
Bah non... il veut mettre une image en background CSS dans son <h2> à la place du span. Comme ça si quelqu'un désactive le CSS, il a le texte, mais pas l'image.

Enfin c'est ce que j'ai compris

Sinon tu peux mettre une image directement et simplement...
<h2><img src="img/chatbox.gif" alt="Chatbox" /></h2>

J'ignore quelle est la meilleure solution.
Modifié par 84mickael (04 Aug 2005 - 15:05)
En plus je ne suis pas sûr mais que je crois que google ignore les éléments cachés avec display et/ou visibility... à vérifier.
@ 84mickael,
Où as-tu vu du javascript ? (OK, tu as corrigé : CSS)
Google n'ignore pas display:none (jusqu'à présent Smiley cligne )

@SciFu,
Il te manquait juste un "height:..." de la hauteur de l'image dans div#contenu h2.chatbox Smiley lol (vu que tu n'avais rien hors du <span>) 

div#contenu h2 span
{
display:none;
}

div#contenu h2.chatbox
{
background:url(img/chatbox.gif) no-repeat left bottom;
heigth: [b]n[/b]px; /* hauteur de l'image chatbox.gif */
}

Modifié par g41687 (04 Aug 2005 - 15:15)
Entièrement d'accord pour l'usage de clip, bien que pour être compatible IE, et autres => 2 clip : un avec et un sans virgule => plus valide W3C Smiley decu
g41687 a écrit :
Entièrement d'accord pour l'usage de clip, bien que pour être compatible IE, et autres => 2 clip : un avec et un sans virgule => plus valide W3C Smiley decu
Ca c'est pas dramatique... mais c'est vrai que ça fait tâche ! Faut faire avec !

Sinon on peut faire une détection du navigateur et afficher avec ou sans virgule selon le cas. Ca me parait bien ça tiens !
Modifié par 84mickael (04 Aug 2005 - 15:35)
g41687 a écrit :
@ 84mickael,
@SciFu,
Il te manquait juste un "height:..." de la hauteur de l'image dans div#contenu h2.chatbox Smiley lol (vu que tu n'avais rien hors du <span>) 

div#contenu h2 span
{
display:none;
}

div#contenu h2.chatbox
{
background:url(img/chatbox.gif) no-repeat left bottom;
heigth: [b]n[/b]px; /* hauteur de l'image chatbox.gif */
}


ahhhhhhh thx !! Smiley lol
g41687 a écrit :
Entièrement d'accord pour l'usage de clip, bien que pour être compatible IE, et autres => 2 clip : un avec et un sans virgule => plus valide W3C Smiley decu


Si si, parfaitement valide W3C. Les deux syntaxes sont admises par CSS2.1, mais le validateur, sympathique mécanique toujours perfectible, n'est simplement pas au courant de cette mise à jour de CSS2 Smiley cligne
Sujet clos
Aller à