Melkior Posté 4 Mars 2011 Partager Posté 4 Mars 2011 Bonjour, Âpres avoir farfouiller des heures pour transformer un Div relative en Div absolute, la plupart des sites ne parlent pas directement de cette question sans tout embrouiller. Je ne vais pas m'amuser à écrire tous les essais que j'ai fait pour arriver au résultat, cela ne fera que pollué ce post Le but : Transformer proprement à l'origine 2 Div absolute ( Layer1 et Layer2 ) qui se trouve dans un autre Div Absolute (Corps) en 2 Div relative ( Layer1 et Layer2 ) pour pouvoir intégrer un script à la page. Car le script parait-il ne marche qu'avec des Div relative. Voici le code simplifié de la page avec le div (corps) incluant 2 Div absolute ( Layer1 et Layer2 ) <style type="text/css"> #corps{ position:absolute; left:140px; top:50px; width:500px; height:500px; z-index:1;} #Layer1 { position:absolute; left:100px; top:50px; width:200px; height:150px; z-index:2;} #Layer2 { position:absolute; left:100px; top:300px; width:200px; height:150px; z-index:2;} </style><body><div id="corps"> <div id="Layer1"></div> <div id="Layer2"></div></div></body> Si quelqu'un peut mettre une méthode simple. Merci Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 4 Mars 2011 Partager Posté 4 Mars 2011 Bonjour, Un div relative se positionne par rapport au dernier élement placé. Un div absolute se positionne par rapport à son élément parent. Là, il suffit juste de placer ton layer2 en fonction de layer1 et non en fonction de corps. Le code suivant présente exactement la même chose que ton code, mais avec des relative. C'est bien ça que tu voulais ? <style type="text/css"> #corps{ position:absolute; left:140px; top:50px; width:500px; height:500px; z-index:1;background-color:red;} #Layer1 { position:relative; left:100px; top:50px; width:200px; height:150px; z-index:2;background-color:yellow;} #Layer2 { position:relative; left:100px; top:100px; width:200px; height:150px; z-index:2;background-color:blue;} </style> Lien vers le commentaire Partager sur d’autres sites More sharing options...
Ernestine Posté 4 Mars 2011 Partager Posté 4 Mars 2011 Sarc > Pour layer2, je mettrais plutôt top:150px, c'est à dire le décalage entre le bord haut de corps et layer2 (300px) moins la hauteur de layer1 (150px). Je me permets d'ailleurs une petite précision : un bloc en relative se positionne par rapport à lui-même (s'il était dans le flux). Et un bloc en absolute se positionne par rapport au premier ancêtre positionné (qui n'est pas forcément son parent direct). Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 4 Mars 2011 Partager Posté 4 Mars 2011 Merci Ernestine pour les précisions exactes des positionnements. Je vais devoir réviser ma théorie ! Par contre, pour le positionnement du layer2, j'ai mis 100 parce que le layer1 était à 50 du haut, et mesurait 150. Donc vu que le layer2 était à 300 dans le premier exemple, on a 300-150-50 = 100. Mais c'est un point de détail, ce n'est que pour la beauté de l'exemple Lien vers le commentaire Partager sur d’autres sites More sharing options...
Melkior Posté 4 Mars 2011 Auteur Partager Posté 4 Mars 2011 (modifié) Merci pour les réponses. En faite, j'ai voulu intégrer un script de Div aléatoire. "<script type="text/javascript">" C'est à dire 5 div changent de place, se mettent les uns à la place des autres ( par exemple le 1 se met à la place du 5, le 3 à la place du 4...) à chaque ouverture de la page. Et ca ne marche pas, une soirée hier à vouloir mettre ca en place et une matinée complète. . Modifié 4 Mars 2011 par Melkior Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 4 Mars 2011 Partager Posté 4 Mars 2011 Tu ne pourrais pas générer le contenu différemment en PHP plutôt que de vouloir déplacer les div ? Je ne sais pas exactement ce que tu veux faire, mais il me semble que mélanger un tableau en PHP et le distribuer aux différents div est mieux que de vouloir déplacer toutes les div en javascript... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Melkior Posté 4 Mars 2011 Auteur Partager Posté 4 Mars 2011 (modifié) Le but est de mettre aléatoirement les pavés de magiciens à une position X de cette page car c'est toujours le n1 (Milano) qui est en haut. Modifié 4 Mars 2011 par Melkior Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 4 Mars 2011 Partager Posté 4 Mars 2011 Est-ce que tu connais un peu le PHP ? Est-ce que ton serveur peut faire fonctionner le PHP ? Si oui, tu auras vraiment beaucoup plus vite fait de passer par ce langage dynamique plutôt que de tenter des bidouilles en javascript... Par exemple, quelque chose du genre : <?php$magiciens = array( array('photo'=>'adresse/photo/Victor', 'texte'=>'Victor blabla'), array('photo'=>'adresse/photo/Victor', 'texte'=>'Victor blabla'), array('photo'=>'adresse/photo/Victor', 'texte'=>'Victor blabla'));$aleatoire = shuffle($magiciens)foreach($aleatoire AS $codemagicien){echo '<p><img src="'.$codemagicien['photo'].'">'.$codemagicien['texte'].'</p>';} C'est peut-être un peu obscur si tu ne connais pas du tout le PHP, mais tu verras rapidement la logique du truc. En gros, un tableau par magicien, avec l'adresse de la photo, le texte associété, tu peux mettre le nom aussi, etc, puis tu mélanges le tableau, et enfin tu l'affiches dans le nouvel ordre ! Et le tour est joué. (Ouuhou le mauvais jeu de mot). Lien vers le commentaire Partager sur d’autres sites More sharing options...
Melkior Posté 4 Mars 2011 Auteur Partager Posté 4 Mars 2011 (modifié) Merci pour la réponse. Hélas, le Php, je ne connais pas. J'ai réussi à mettre un formulaire en php, c'est tout. Et puis quand j'entends Php, cela s'associe souvent dans les esprits des non-initiés comme "faille site". Et ouverture aux hacks et autres attaques. Si c'est une piste à cent pour cent sécurisée, pourquoi pas. Il va falloir se pencher sur la chose ou trouver plutôt une personne pour intégrer cela. Modifié 4 Mars 2011 par Melkior Lien vers le commentaire Partager sur d’autres sites More sharing options...
Arlette Posté 4 Mars 2011 Partager Posté 4 Mars 2011 Et puis quand j'entends Php, cela s'associe souvent dans les esprits des non-initiés comme "faille site". Et ouverture aux hacks et autres attaques. Je pense que c'est toi surtout qui pense cela. Je n'ai jamais lu que les non initiés php pensent que c'est une source de faille-site. Tu dois confondre avec des témoignages de personnes qui n'ont pas mis à jour leur version, et donc dans ce cas les sites sont plus vulnérables. Mais là ce n'est pas la faute de php mais bien celles des webmasters Faut être prudent dans ses affirmations, surtout lorsqu'on a pas de connaissances dans ce domaines, car c'est la meilleure façon de diffuser des rumeurs infondées. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Melkior Posté 4 Mars 2011 Auteur Partager Posté 4 Mars 2011 (modifié) Si tu me dis que le php ne donne pas de faille pour le hacker, je suis prêt à croire à cela. Comme la plupart des touches à tout sur Internet, on se fait des idées et c'est pas forcément les vraies. Modifié 4 Mars 2011 par Melkior Lien vers le commentaire Partager sur d’autres sites More sharing options...
Arlette Posté 4 Mars 2011 Partager Posté 4 Mars 2011 Si tu me dis que le php ne donne pas de faille pour le hacker, je suis prêt à croire à cela. Je suis loin d'être une experte Php, mais Dan infogére presque 200 serveurs dédiés, et sur ces serveurs ce n'est pas le Php qui manque ! Si Php était une source de hack, il ne dormirait pas beaucoup ! Peut être que tu confonds avec autre chose, mais là les vrais connaisseurs de Php pour te le dire. Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 4 Mars 2011 Partager Posté 4 Mars 2011 D'autant plus qu'un script aussi simple, ne PEUT pas avoir de faille de sécurité : on n'exploite en aucun cas des données sensibles. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant