Image sous mes h1

Je voudrais savoir qu'est ce qui ne fonctionne pas dans mon code. Je veux qu'il y ait une "image" sous mes h1. Ça affiche exactement comme je veu que ca affiche dans safari mais autant dans firefox que dans netscape ou IE mac et IE PC rien n'affiche sous mon titre

#contenu h1 { 
 color: #363; 
 font-size: 15px; 
 background-color: transparent; 
 background-image: url("../images/news.jpg"); 
 background-repeat: no-repeat; 
 background-position: bottom left; 
 bottom: .3em
}

Salut,

Certainement avec un

display: block;

De plus j'ai remarqué que parfois les images en CSS ne s'affichent pas si la taille n'est pas spécifiée dans la feuille de style (enfin du moins pour les images intégrées au CSS et non au HTML). Mais je me trompe peut être...
Modifié par Mikachu (13 Jun 2006 - 22:03)

Désolé je suis un débutante mais comment au juste je fait mon display block ou est ce que je lintegre dans mon code??

Tu l'intègres aux propriétés que tu as déja atribué à ton id #contenu h1 :

#contenu h1 { 
 color: #363; 
 font-size: 15px; 
 background-color: transparent; 
 background-image: url("../images/news.jpg"); 
 background-repeat: no-repeat; 
 background-position: bottom left; 
 bottom: .3em;
 display: block;
}

malheureusement ca na pas laire de fonctionner.. merci quand même

Essaye peut être d'ajouter une dimension à ton h1

widht: Xpx;
height: Xpx;

En mettant des valeurs pour X égales ou supérieures à celle de l'image de fond. En plus du

display: block;

Comble du malheur ça ne fonctionne toujour pas

Un display: block pour un h1 ?

Pour rappel, h1 est un élément HTML de type bloc (au même titre que tous les hn, les paragraphes, les listes et items de liste, les div…), il ne sert donc à rien de lui dire de s'afficher en « mode bloc », vu que c'est déjà son comportement par défaut.

Une petite incohérence dans le code :

bottom: .3em;

Cette propriété indique au bloc de se positionner à 0,3em du bord inférieur de son référent dans le cas d'un positionnement absolu, ou de se décaler de 0,3em vers le haut dans le cas d'un positionnement relatif. Ici, on n'a ni l'un ni l'autre, donc ça ne doit pas marcher. Il est par contre possible qu'Opera l'interprète de travers, qui sait…

Si le but était de créer un espace entre le texte et le bas du bloc h1 pour pouvoir afficher l'image, mieux vaut utiliser un padding (marge interne) :

padding-bottom: .3em;

Au passage :

background-image: url("../images/news.jpg");

Je ne sais pas si les double quotes sont autorisées pour ce genre de déclarations. Les quotes simples passent très bien normalement, ou alors on peut ne pas en mettre du tout, mais j'ai un doute pour les doubles. Mais c'est sans doute valide tout de même…

À tout hasard, tu peux essayer sans :

background-image: url(../images/news.jpg);

Mais je doute que ça vienne de là.

De même, il me semble que l'ordre des propriétés pour l'alignement d'une image de fond est largeur puis hauteur, ce qui donnera plutôt :

background-position: left bottom;

Mais ça ne devrait pas changer grand chose non plus.

Bonjour les gens,
Huhu, à prioris, le problème ne semble pas venir du css au niveau de code donné il y'a certes des petits trucs génants mais rien qui puisse empêcher l'affichage normalement.

Je crois qu'il va falloir trouver l'origine de ton problème ailleurs, soit dans ton html, soit dans le css.

Si tu peux nous donner une adresse d'exemple en ligne, on pourra peut-être t'aider à trouver une solution.

++
Aymeric

PS : je viens de tester le code tel quel en local et ça fonctionne aussi bien sous FF que sous IE.
Modifié par AymericJ (14 Jun 2006 - 10:04)

Mon site n'est pas encore en ligne... je n'ai pas l'intention de le mettre en ligne tant qu'il ne sera pas terminé donc y a-t-il un autre moyen pour que vous puissiez regarder ce qui se passe??

Merci pour tous vos bon conseil, jai pris en note de tous vos recommandation mais mon probleme venait de mon image je crois.. mais refait mon image et tout fonctionne à la merveille. J'ai quand même appliqué ce que vous m'avez conseillé donc c'est peut être un combinaison de plusieurs petite chose j'en ai aucune idée mais maintenant ça fonctionne..

Merci beaucoup