Aller au contenu

Transformation d'un div absolute en div relative


Sujets conseillés

Posté

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

Posté

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>

Posté

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).

Posté

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 :P

Posté (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. :evil: .

Modifié par Melkior
Posté

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...

Posté (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é par Melkior
Posté

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).

Posté (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é par Melkior
Posté

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.

:wacko: 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. :)

Posté (modifié)

Si tu me dis que le php ne donne pas de faille pour le hacker, je suis prêt à croire à cela. :smartass:

Comme la plupart des touches à tout sur Internet, on se fait des idées et c'est pas forcément les vraies.

Modifié par Melkior
Posté

Si tu me dis que le php ne donne pas de faille pour le hacker, je suis prêt à croire à cela. :smartass:

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. :P

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...