Une histoire de transparence, de décalage, et de navigateurs...

Salut !

J'aimerais quelques conseils pour résoudre deux problèmes sur le site ouèbe que je construit actuellement : http://karyboo.free.fr/karyweb/
En fait les deux problèmes apparaissent dans firefox (et un des deux dans netscape), dans IE tout marche nickel.

Voici le descriptif des problèmes (dont vous pourrez vous rendre compte en allant sur le lien donné plus haut).

Dans firefox, il y a un "clignotement" lors de la transition "transparent --> non transparent" des images (en dessous du texte). Ce clignottement rend la chose particulièrement moche, et en plus c'est très long (= relou a naviguer...). Ce problème n'apparait pas avec Netscape et IE

Ensuite, dans firefox et nestscape, le texte du corps de page est décalé par rapport à son conteneur (j'ai mit une bordure au conteneur pour bien qu'on s'en rende compte)... Ca crée un décalage vers le bas, et comme je suis limité en taille vers le bas ca ma gène. Ce problème n'apparait pas dans IE (pour une foi ca marche dans IE et pas ailleur... ).

Pour régler le 2em problème j'ai essayé de caler le texte dans un div calé en absolute et à 0px du top, mais ca change rien... zarbi.

Si vous avez des pistes, je serait heureux de les suivre !

Extraits de code :

HTML

	<div id="corpsdepage">
	  	
		<p align="justify">	Stargate TC est une modification multijoueurs du jeu Half-Life,
							dont le d&eacute;vellopement d&eacute;buta en 2001. L&rsquo;ensemble
							 de l&rsquo;univers de cette modification est inspir&eacute; du film
							 Stargate et de la s&eacute;rie Stargate SG1. J&rsquo;ai contribu&eacute;
							 &agrave; cette modification de 2001 &agrave; 2003, d&rsquo;abord en tant
							 que mapper (concepteur des environnements de jeu), puis en tant que lead mapper
							 (gestion de l&rsquo;&eacute;quipe de mappers, en parall&egrave;le du travail de
							 mapper) et 2D artist.</p>
		<p align="right"><em>"...Tu va crever bordel ???"</em></p>
					
		<p align="center">
		<a href="" class="imagecorps"><img src="interface/ombrecopie2.jpg"/></a>
		<a href="" class="imagecorps"><img src="interface/ombrecopie.jpg"/></a>
		</p>

	</div>

CSS

#corpsdepage
	{
	position: absolute;
	top: 400px;
	left: 256px;
	width: 700px;
	height: 350px;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight:800;
	line-height: 120%;
	color: #676767;
	text-decoration: none;
	margin-top: 0px;
	border: 2px solid #000;
	}

a.imagecorps img 
	{
  	opacity: 0.50;
  	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	border: none;
  	}

a.imagecorps:hover img 
	{
  	opacity: 1.0;
  	filter:alpha(opacity=100); 
	-moz-opacity: 1.0; 
  	}

Modifié par karyboo (29 Jul 2005 - 17:24)

pour ton problème de texte, je te conseille de mettre un truc du style :

* {
margin:0;
padding:0;
}

comme ça tout est a 0 et tu as le controle total. Pas que ce ne soit pas le cas d'habitude mais il n'y a parfois pas les meme valeurs par defaut dans tous les navigateurs

Merci pour ton aide

(ps: j'avais réussi à régler ce problème en écumant les toturiaux pendant des heures )

Pas d'idées pour le "clignotement" des images sous firefox ? J'ai essayé de faire le code de différentes facons, mais le problème reste toujours...

Pour le cligotement, chez moi, ça ne clignote pas mais j'ai une "petite hésitation" un temps mort qui fait un "flash" au survol. Puisque Mozilla, Firefox et Netscape comprennent déja "opacity" peut-être que ça fait un conflit avec le "-moz-opacity" (qu'ils comprennent aussi bien sur, c'était fait pour eux ) peut être que les deux indications, ça fait trop ?.
Sur Safari j'ai pas le "flash" au survol car lui, ne tient pas compte du -moz-opacity. Pour opacity, je crois qu'il serait plus correct d'indiquer 0.5 plûtot que 0.50 et 1 au lieu de 1.0

Malheureusement le problème ne vient pas de là, j'ai testé différentes manières (laisser -moz_opacity tout seul, laisser opacity tout seul,...). Ensuite pour les valeurs, 0.50 ou 0.5, aucun changement (logique, c'est la même ).

Pour le code j'ai donc calé un truc basique, qui marche un peu dans tout les navigateurs :

a.imagecorps img, a.imagecorpsgauche img, a.imagecorpsdroite img 
	{  	
  	filter:alpha(opacity=50);
	opacity: 0.5;
	border: none;
  	}

a.imagecorps:hover img, a.imagecorpsgauche:hover img, a.imagecorpsdroite:hover img
	{
  	filter:alpha(opacity=100);
	opacity: 1;
  	}

Par contre, dans firefox, j'ai remarqué que la taille et le nombre d'images affichées influaient beaucoup sur le temps de "flash", et dans l'ensemble sur la fluidité de la page (quand on "scrolle"). Bon ca parait logique, mais la ca prend des proportions énormes comparativement aux autres navigateurs... Donc la seule solution que j'ai trouvée --> réduire les images et plus les compresser... evidement cette solution n'est pas très interressante pour moi . Tant pis !

(Et merci )