28173 sujets

CSS et mise en forme, CSS3

[Résolu] Pb avec background-image (FF2.0 VS IE7)

Bonjour tout le monde =)

aujourd'hui est un peu ma bataille du CSS. Y'a plein de truc pour lesquels je bloque, je tatonne, et sur lesquels je ne trouve pas spécialement ce dont j'ai besoin.
D'où je vous remercie d'avance pour un pti peu d'aide hehe =)

mon soucis : le background-image que j'utilise a l'air de passer sous FF, mais là grand désarroi, ça ne passe pas sur IE7. Comment puis-je faire ?

Voici mon code HTML :

<HTML>
<title>navBox</title>
<head>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>

<div class="yonavbox">
  <span class="yotitle">Onglet de test</span>
  <div class="yolabelimg">
    <div class="yoimg"/>
  </div>
</div>

</body>
</html>


mon code de ma css : 


div.yonavbox {
	
	width:200px;
	position:absolute;
	background-color:blue;
	padding:0px 40px 0px 2px;
	left:200px;
	top:200px

}

div.yonavbox span.yotitle {
	color:#FFFFFF;
}

div.yonavbox div.yolabelimg{

	position:absolute;
	right:2px;
	top:50%;
	
}

div.yonavbox div.yolabelimg div.yoimg {


	width:9px;
	height:9px;
	background-image:url(arrowleftdark.gif);
	cursor:pointer;
	display:block;
	margin-top:-50%;
	
}


et l'image que je veux afficher Smiley smile

upload/11216-arrowleftd.gif


Si cela vous inspire, encore merci pour une soluce Smiley smile

Sinon dans la foulée aussi, est-ce que les pseudo-classe :hover sont gérées avec IE7, où pour faire le comportement d'un :hover faut obligatoirement passer par un traitement javascript ?

merci d'avance Smiley smile
Modifié par nozostan (07 Mar 2007 - 22:33)
en fait ce n'est pas tout à fait le même code.

à la place du <img>, j'ai un <div> ici, et mon soucis dans ce cas là c'est le background-image dans le CSS que je n'arrive pas à faire marcher sous IE7

C'est vrai que j'aurai pu mixer les deux problèmes ensemble. Mais ils ne me sont pas arrivés en même temps, et j'avais oublié mon précédent post .. fui fui fui Smiley confused
La syntaxe 
<div />
n'est pas possible en XHTML (ou même en HTML). Les éléments vides normalement non vides doivent être notés 
<élément></élément>
et non pas 
<élément />


Par ailleurs, ne pas utiliser de div avec image de fond pour insérer un pictogramme. Soit le pictogramme est une décoration sans conséquence, et dans ce cas on le passera comme image de fond d'un bloc possédant déjà un contenu (car il est probable que le pictogramme ne se balade pas tout seul...), soit il représente une information, et dans ce cas :
<img src="monpicto.png" alt="Alternative textuelle pertinente" />
aaahh bah c'est glop tout cela.
Effectivement si je ne respecte pas les conventions, les erreurs arrivent en masse.

Merci pour ces indications donc ^^
je me sens bébète, ça semble tout con tout compte fait.

Voilou voilou mon background-image marche sur FF comme sur IE.

Par contre autre question :
au lieu de faire un src pour la balise <img> qui contient mon pictogramme, je met l'image avec un background. Mais en mettant mon picto en image de fond, j'obtient :
upload/11216-example2.JPG

alors que quand je met mon picto avec src j'ai :
upload/11216-example.GIF

Quels sont donc les attributs CSS dont j'aurais besoin pour que les bord de mon picto (noir à l'origine) reste noir comme dans l'exemple avec src, et qu'il n'y ai pas cette effet de relief ?

Pour explication :
Cette image serait voué normalement à être :

<img src="arrowleftdark.gif" alt="Menu contextuel" />


mais il se trouve que j'essaye de faire un composant pour lequel on n'a pas accès au code HTML. Pour paramétrer mon composant, on doit passer obligatoirement par la CSS liée au composant.
Donc ce que je voudrais faire, c'est de laisser la possibilité de mettre n'importe quel picto, et cela en laissant la possibilité de paramétrer la CSS. D'où je ne veux pas utiliser src, car je serait obligé de considérer cette source comme un paramètre de mon composant, dissocié de la CSS.

Voilou Smiley smile
Modifié par nozostan (06 Mar 2007 - 01:35)
nozostan a écrit :
mais il se trouve que j'essaye de faire un composant pour lequel on n'a pas accès au code HTML.

On peut avoir une image de contenu avec texte alternatif (balise <img alt="..." />), et conserver la possibilité de modifier l'image. Par exemple, sans modifier la valeur de l'attribut src de l'image, on peut modifier le fichier image lui-même. Et modifier la feuille de style pour corriger sa position si besoin.

Pour le pourquoi du comment de l'effet de relief sur le picto, ça me dépasse. Avec une page en ligne je pourrais peut-être en dire plus, mais là ça me semble limité pour diagnostiquer quoi que ce soit. Smiley smile
re hello =)

ben pour le rendu, en fait je l'ai fait sur un autre PC, et au final, c'est passé correctement Smiley smile

mon pti composant est tout beau, tout javascript mdr ^^ enfin c'est voué à être sur des postes clients avec javascript activé obligatoirement, ouf ouf.

merci pour tes informations en tout cas, m'a fait bien plaisir Smiley smile

sujet Résolu donc hihi
Sujet clos
Aller à