28221 sujets

CSS et mise en forme, CSS3

[Résolu] CSS javascript bug sous Safari

Bonjour,

j'ai une page web qui contient les balises suivantes:


<div class="c_marques">
        <div id="marque_0">
          <h3 class="noir"> Choisissez votre marque</h3>
        </div>
        <div id="marque_1">
          <h3 class="noir"> blah blah </h3>
          <p> blah blah </p>

        </div>
        <div id="marque_2">
          <h3 class="noir"> blah blah</h3>
          <p> blah blah </p>
          
        </div>

</div>


ces balises se trouvent dans un tableau classique (table)

voici le style des balises:


div.c_marques{	width: 350px;	margin-bottom: 15px;	font-size: 12px;height: auto;}
div.c_marques h3{	background-color: #000000;	padding-left: 0px;}

#marque_0,#marque_1,#marque_2,#marque_3,#marque_4,#marque_5,#marque_6,#marque_7,#marque_8,#marque_9,#marque_10,#marque_11,#marque_12,#marque_13{
	position: relative;
	text-align: left;
	height: auto;
	background-color: #000000;
	padding: 10px;
	width: 330px;
	margin-top: 10px;
	color: #FFFFFF;
}


voici maintenant le javascript appelé à l'aide de onload() sur body:


function cacheTout(){
	
	
	for(var i=1;i<14;i++){
		
		if (document.getElementById){   
		
			document.getElementById("marque_"+i).style.visibility="hidden";
			document.getElementById("marque_"+i).style.position="absolute";
			document.getElementById("marque_"+i).style.zIndex=i;
			
		
		}
		
		if (document.all && !document.getElementById){
			
			document.all["marque_"+i].style.visibility="hidden";
			document.all["marque_"+i].style.position="absolute";
			document.all["marque_"+i].style.zIndex=i;
			
			
			
		}
		if (document.layers){
			
			document.layers["marque_"+i].visibility="hidden";
			document.layers["marque_"+i].position="absolute";
			document.layers["marque_"+i].zIndex=i;
			
			
			
		}
	}
	
	if (document.getElementById){
			
			document.getElementById("marque_"+0).style.position="absolute";
			document.getElementById("marque_"+0).style.zIndex=0;
			}
		if (document.all && !document.getElementById){	
			
			document.all["marque_"+0].style.position="absolute";
			document.all["marque_"+0].style.zIndex=0;
			}
		if (document.layers){
			
			document.layers["marque_"+0].position="absolute";
			document.layers["marque_"+0].zIndex=0;
			}
		
	
}


et maintenant la fonction javascript appelée lorsque je clique sur une image contenue dans une animation flash


function afficheTexte(n){
	
	for(var z=0;z<14;z++){		
		
		if (document.getElementById){   document.getElementById("marque_"+z).style.visibility="hidden";	}
		if (document.all && !document.getElementById){ document.all["marque_"+z].style.visibility="hidden";}
		if (document.layers){	document.layers["marque_"+z].visibility="hidden";}
	
	}
	
	if (document.getElementById){   document.getElementById("marque_"+n).style.visibility="visible";}
	
	if (document.all && !document.getElementById){   document.all["marque_"+n].style.visibility="visible";}
	
	if (document.layers){    document.layers["marque_"+n].visibility="visible";}
	
	
}


sur IE et firefox , pas de souci les calques s'affichent bien relativement à la TD qui les contient mais sous SAFARI, les calques s'affichent relativement par rapport au bord haut et au bord gauche de la page.

avez-vous une solution ?


merci.




upload/1111-shoot.gif
Modifié par saturnino (09 Mar 2005 - 08:39)
Administrateur
Salut,

Merci d'éditer ton post et d'utiliser les [ CODE] partout.
L'affichage est complètement bouzillé chez moi sinon Smiley cligne
Administrateur
Le problème c'est que tu "balances" un code sans expliquer les tenants et les aboutissants, ni même les effets exacts prévus par ce code. Tu dis juste ce qui ne va pas.

Pour ma part, je ne suis pas assez calé en javascript donc je ne saurais te répondre.

Mais plutôt qu'un code lourd et peu intéressant, il serait plus simple pour les membres de voir les effets réels de ce code (= un exemple en ligne), comme te le suggèrent les Règles Smiley cligne
Modifié par Raphael (05 Mar 2005 - 11:12)
Bonjour, et je suis désolé pour la page car le site n'est actuellement pas en ligne...

J'ai donc mis en ligne seulement la page concernée à cette adresse:

http://www.saturnino-freelance.com/TESTS/SMJP/collections.php

PS inutile de cliquer sur les liens.

L'effet recherché:

en cliquant sur un des logos défilant, j'affiche une description contenue dans le calque correspondant.

le logo_1 doit afficher #marque_1 et rendre invisible les autres calques, le logo_2 doit afficher #marque_2 et rendre invisible les autres calques et ainsi de suite.

ca ne marche pas bien sous Safari comme précisé dans mon premier poste voir shoot écran.


merci
Merci pour les liens.

Je les connaissais déjà, j'ai même utilisé certaines sources pour le menu du haut invisible dans la page fournie en exemple mais visible dans la source.

Ce que je cherche à faire, c'est transformer une position relative en une position 0 0 par rapport au calque conteneur en passant par javascript.

Apparemment çà bug sous safari qui ne tient pas compte de la position du calque conteneur et biensûr je ne peux pas le tester car je n'ai pas safari...

c'est sûrement une histoire d'attribut compléméntaire...

merci
Modifié par saturnino (05 Mar 2005 - 12:20)
Administrateur
a écrit :
Ce que je cherche à faire, c'est transformer une position relative en une position 0 0 par rapport au calque conteneur en passant par javascript.


Hmm, une position relative ne va rien changer du tout si elle n'est pas accompagnée des propriétés top, left, bottom ou top. Toute seule, son seul avantage est de pouvoir contenir d'autres éléments positionnés (absolus par exemple).

Si tu veux placer en 0 0 il faut utiliser le positionnement absolu (ou flottant). Et dans ce cas, s'assurer que le conteneur est lui-même positionné (sinon l'élément en absolu va se placer selon la page entière)
Administrateur
saturnino a écrit :
Peux-tu tester sous safari? car danvine.com est HS...

Non, je suis sur PC.
Effectivement, Danvine est souvent HS Smiley decu
ok merci quand même.

bon je suis rassuré je pense que cà vient juste du positionnement du calque conteneur.

Cà attendra lundi maintenant.


Bon week-end.
Sujet clos
Aller à