[CSS] Pseudo formats, ":before"

Probléme avec ... devinez qui ? IE ...

25 avril 2006 à 23:40:44

Bonjour les zéros ! (en supposant que tout le monde ici ai été un zéro un jour

)

Je suis un nouveau sur ce forum et j'ai un gros probléme de CSS.

J'ai suivi ce tuto et j'ai crée ce CSS :

.titlebar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px;
color: #0000CD;

}

.contenu {
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
color: #008080;
font-weight: bold;
}

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
color: #008000;
font-weight: bold;
text-decoration: none;
}

a:hover
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
color: #0000CD;
font-weight: bold;
text-decoration: underline;

}

b:before

{
content: url("images/attention.gif");
}

b
{
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
color: #ff0000;
font-weight: bold;

}

et ensuite ce code HTML (dans une page en php pour les includes, en voila un bout :

Voila ca sera tout, le site en version "alpha 0.1" restera en ligne à cette adresse, en attendant la sortie vous pouvez toujours mettre le lien en favoris ? 
 test gras
 test
 de l'attribut "gras"

Et ce qui me géne c'est que dans ma version en ligne ( http://rentabiliser.info ) les panneau "attention" ne s'affichent que pour Firefox, ma surprise à été grande lorsque j'ai vu que ce foutu IE (lui c'est un zéro de chez zéro ...) n'est même pas capable de m'afficher les images mais seulement le texte rouge o_O

(c'est déja ca ...)

Et la je me pose une question philosophique à 23h43 du soir (si si !

) :

Comment faire pour que cet imbéc*** de IE 6 lise ma page comme firefox, j'ai vu que ce site passait sur IE aussi avec les panneaux et tout et tout (

exemple

)
Mais chez moi non ?
Pouquoi ? :'(

Donc si quelqu'un me trouve la réponse je lui serait éternellement reconaissant et j'érigerait une statue à sa gloire en or massif

Merci d'avance.

Mobman02

25 avril 2006 à 23:52:11

Hum :before ça marche que sur :

* Windows : Testé avec succès sur Firefox; Opera 7.51, 7.60 ++; Mozilla 1.6; Epiphany; Netscape 6 PR1 et 7.02; Konqueror 3.2.0 (petit décalage de la ligne sous le menu).
* Mac : Testé avec succès sur Firefox 1.0 Mac, Opera 7.54 mac, Camino 0.8 et Safari.

Pour ton problème je changerais de tactique et je mettrais juste ça :

b {
padding-left:40px;
background: url(images/attention.gif) no-repeat;
padding-top:26px;
}

ça va fonctionner mais tu verra que c'est loin d'être "cool",
le mieu serais de faire un display:block sur tes , pour qu'il se comporte comme des div, et la sa devien simple.

Rentabiliser.info

26 avril 2006 à 0:56:10

Euh, merci mais à ce niveau je vais me contenter de faire un petit "Gné ?"
Je suis plus php, (désolé si je t'embéte) donc la je ne comprend que la moitiée, les display block machin alors la il faut que tu m'explique stp, sinon je ne voit pas pourquoi ca ne serait pas "cool" ?
Mais c'est ce que le webmaster de ce site utilise pour ses cours non ?

Mobman02

26 avril 2006 à 1:20:19

Sur le site de Zéro il n'utilise pas la balise pour faire remarquer qu'un élément est important avec CSS.

 est une balise inline, donc c'est cimpliqué de lui donner la hauteur nécéssaire pour un logo "attention".

Un div c'est un block, donc si on met display:block sur la balise , elle se comporte comme un block, et là on peut faire comme ici.

Chez pas mais va lire les cours, ils sont pas là pour faire la décoration...

Rentabiliser.info

26 avril 2006 à 2:29:15

ok, je vais re-re-re-regarder ca...
Ca a du m'échapper ....
Merci.