High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

Problème de positionnement (position:relative

Dernière réponse le 27 sep 2007 à 18:59:54 Edouard73, le 27 sep 2007 à 13:36:07 
 Signaler ce message aux modérateurs

Bonjour,

Voila je veux utiliser les balises div sur une page web pour avoir une alternative aux tableaux. (probleme d'affichage entre E7 et FF)

J'utilise la fonction css Style="position:relative;" car les informations viennent d'une base de donnée. La position abolute m'affiche toutes les données demandé les une sur les autres, alors que la relaitve me les mets les une en dessou des autres.

Mon probleme est que j'ai une énorme décalage de position entre la page web et mon éditeur.

j'ai essayer de voir pour d'autre solution nottament avec css mais rien y fait.

voici l'exemple du code :

<div style="position:relative; left: 43px; top: 316px; width: 141px; height: 117px; z-index 1">
<?php $imagepersonne1 = $donnees['imagepersonne']; echo "<img src='$imagepersonne1'/>";?>
</div>

quelqu'un aurait une idée pour que la position sur l'éditeur soir la meme que sur la page web ?

Merci d'avance pour votre aide
Edouard73
:)

Configuration: Windows XP
Firefox 2.0.0.7

Meilleures réponses pour « Problème de positionnement (position:relative » dans :
Mettre en forme les commentaires Excel VoirMettre en forme les commentaires Excel Vous souhaitez associer un commentaire explicatif (genre Pop-Up) à une cellule: vous positionnez votre curseur sur la cellule à commenter vous cliquez droit sur la cellule, puis sur "Insérer un...
DHTML - La notion de couche VoirQu'est-ce qu'une couche? Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Posez votre question Répondre

1

Dalida, le 27 sep 2007 à 13:55:17

Salut,

avec {position:relative;} tu sors la boite du flux normal de mise en page, est-ce vraiment ce que tu veux faire ?
en laissant faire, tes <div> devraient se placer les uns sous les autres.

une solution pourrait être de mettre un conteneur général, de définir sa largeur et sa position sur la page et de mettre tes <div> dedans en les laissant s'afficher seuls. 

<div id="wrapper">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
[...]
</div>

mais il faudrait savoir plus précisément ce que tu souhaites obtenir pour pouvoir mieux te conseiller.
[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

   
Répondre à Dalida

2

LudovicJOLY, le 27 sep 2007 à 13:57:47

Reformules ta question. Car j'y comprend rien.
++ Ludovic JOLY
www.ludovic-joly.com

   
Répondre à LudovicJOLY

3

Edouard73, le 27 sep 2007 à 14:44:03

Dabors merci pour vos réponses.

ensuite pour etre plus claire.

voila l'exemple :

http://www.premiumwanadoo.com/ao1teamdod/CIMP/PHPTEST/index3­.php

<body>
<div id="0003"><?php
mysql_select_db("local.host");
$reponse = mysql_query("SELECT * FROM membre ORDER BY ndd");
while($donnees = mysql_fetch_array($reponse))
{
?>
</div>
<div id="0001" style="position:relative; top: 45px;">
<img src="../IMAGE%20FORUM/LISTEDESMEMBRES/model.png">
</div>
<div id="0002" style="position:relative; width: 113px; height: 113px; left: 72px; top: 81px;">
<?php $imagepersonne1 = $donnees['imagepersonne']; echo "<img src='$imagepersonne1'/>";?>
</div>
<div id="0004"><?php
}
mysql_close();
?>
</div>
</body>

comme vous voyez y'a un énorme d'écalage entre 0001 et 0002. normalement 0002 devrait se trouver entre les colonnes noire.

J'utilise "relative" parce que si je mets absolute les données que j'appele se super posent. cf l'exemple suivant

http://www.premiumwanadoo.com/ao1teamdod/CIMP/PHPTEST/index4.php

<body>
<div id="0003"><?php
mysql_select_db("local.host");
$reponse = mysql_query("SELECT * FROM membre ORDER BY ndd");
while($donnees = mysql_fetch_array($reponse))
{
?>
</div>
<div id="0001" style="position:absolute; top: 45px; left: 45px;">
<img src="../IMAGE%20FORUM/LISTEDESMEMBRES/model.png"> </div>
<div id="0002" style="position:absolute; width: 113px; height: 113px; left: 92px; top: 81px;">
<?php $imagepersonne1 = $donnees['imagepersonne']; echo "<img src='$imagepersonne1'/>";?>
</div>
<div id="0004"><?php
}
mysql_close();
?>
</div>

De cette façon je n'ai pas de décalage mais les données s'empilent les une sur les autres... et je voudrais, comme dans l'exemple 1 qu'elles soit disposé les unes apres les autres.

Ma question est de savoir si avec les positions "relatives" il est possible d'enlever ce décalage :)

   
Répondre à Edouard73

4

Dalida, le 27 sep 2007 à 14:55:04

Re,

oui, tu n'as pas besoin du {position:relative;} sur le <div>.
en lève tout le style des <div> et regarde ce que ça donne.
après tu pourras placer ton image dedans en utilisant {position:relative;}.

plus quelques conseils :
• pas d'espaces dans les urls ;
• les urls en minuscules;
• les identifiants ("id") doivent être uniques, si tu dois les répéter fois il faut utiliser "class".
[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

   
Répondre à Dalida

5

Edouard73, le 27 sep 2007 à 15:40:41

Re Bonjour Dalida :)

J'ai essayé ta solution, si je vire tous les styles des div ça me donne ça

http://www.premiumwanadoo.com/ao1teamdod/CIMP/PHPTEST/index5­.php

<body>
<div><?php
mysql_select_db("local.host");
$reponse = mysql_query("SELECT * FROM membre ORDER BY ndd");
while($donnees = mysql_fetch_array($reponse))
{
?>
</div>
<div>
<img src="../IMAGE%20FORUM/LISTEDESMEMBRES/model.png">
</div>
<div>
<?php $imagepersonne1 = $donnees['imagepersonne']; echo "<img src='$imagepersonne1'/>";?>
</div>
<div><?php
}
mysql_close();
?>
</div>
</body>

Si je fais ta deuxieme solution

j'ai toujour un énorme décalage. NB j'ai mis le {position:relative} dans le code CSS directement.

http://www.premiumwanadoo.com/ao1teamdod/CIMP/PHPTEST/index6.php

<style type="text/css" media="screen">
p {
}
.A003{
position:relative;
top:65px;
left: 58px;
width: 113px;
height: 113px;
}
</style>
<body>
<div><?php
mysql_select_db("local.host");
$reponse = mysql_query("SELECT * FROM membre ORDER BY ndd");
while($donnees = mysql_fetch_array($reponse))
{
?>
</div>
<div>
<img src="../IMAGE%20FORUM/LISTEDESMEMBRES/model.png">
</div>
<div class="A003">
<?php $imagepersonne1 = $donnees['imagepersonne']; echo "<img src='$imagepersonne1'/>";?>
</div>
<div><?php
}
mysql_close();
?>
</div>
</body>

   
Répondre à Edouard73

6

LudovicJOLY, le 27 sep 2007 à 16:20:21

<style type="text/css">
* {margin:0; padding:0; border:0;}
#Zone {background:url("../IMAGE%20FORUM/LISTEDESMEMBRES/model.png"; width:1010px; height:182px; position: relative; z-index: 1;}
#Avatar {position:absolute; top:65px; left: 58px; z-index: 2;}
</style>

<body>
<div><?php
mysql_select_db("local.host");
$reponse = mysql_query("SELECT * FROM membre ORDER BY ndd");
while($donnees = mysql_fetch_array($reponse))
{
?>
</div>
<div id="Zone">
<div id="Avatar">
<?php $imagepersonne1 = $donnees['imagepersonne']; echo "<img src='$imagepersonne1'/>";?>
</div>
</div>

<div><?php
}
mysql_close();
?>
</div>
</body>
</html>

Essayes çà ;) Cela devrait fonctionner. Envoi moi le résultat ;) ++ Ludovic JOLY
www.ludovic-joly.com

   
Répondre à LudovicJOLY

8

Edouard73, le 27 sep 2007 à 18:45:37

Re :)

Bha c'est exactement ce que je voulais. ça marche super bien comme ça. finalement j'avais pas besoin de m'ennuier avec les "relative"

Voila le résultat :

http://www.premiumwanadoo.com/ao1teamdod/CIMP/PHPTEST/index7.php

Bon j'ai pas tout completé... mais j'ai fais tous les truc qui me posaient probleme. En plus aucune différence entre E6, 7 et FF 2.0.0.7. Le seul hic maintenant c'est que en bas de page j'y avais integré des options me permetant de up ou de retourné sur une autre page (exemple avec le TraitB) mais celui ci reste en haut. (j'ai essayé de le positionné à plusieurs endroit dans les codes... mais rien n'y fait. Enfin, pas bien grave

En tous cas merci à tous pour vos aides :)

<style type="text/css">
* {margin:0; padding:0; border:0;}
#Zone {
background:url(../IMAGE%20FORUM/LISTEDESMEMBRES/model.png);
width:1010px;
height:182px;
position: relative;
z-index: 1;
top: 172px;
left: 62px;
}
#Avatar {
position:absolute;
top:34px;
left: 43px;
z-index: 2;
width: 113px;
height: 113px;
}
#Nomdossier {
position:absolute;
top:3px;
left: 18px;
z-index: 3;
width: 345px;
height: 23px;
}
#Nom {
position:absolute;
top:47px;
left: 222px;
z-index: 4;
width: 233px;
height: 23px;
}
#Prenom {
position:absolute;
top:80px;
left: 224px;
z-index: 5;
width: 233px;
height: 23px;
}
#Gifa {
position:absolute;
top:33px;
left: 44px;
z-index: 6;
filter:alpha(opacity=25);-moz-opacity: 0.25;
}
#TraitB {
position:absolute;
top:357px;
left: 62px;
z-index: 7;
}
#CadreB {
position:absolute;
top:380px;
left: 61px;
z-index: 8;
}
#Trait1 {
position:absolute;
left:62px;
top:148px;
z-index: 9;
border:1;
}
#Entete {
position:absolute;
left:62px;
top:8px;
z-index: 10;
border:1;
}
</style>
<body bgcolor="#CCCCCC">
<div id="Entete">
<table width="1000">
<tr>
<td colspan="2"><div align="center"><img src="../IMAGE%20FORUM/logo2.JPG"></div></td>
</tr>
<tr>
<td width="884" align="center"><h2 id="up"></h2>
<font size="2" face="Arial, Helvetica, sans-serif">Liste des membres
V1.3</font></td>
<td width="110" align="center"><font size="2" face="Arial, Helvetica, sans-serif"><a href="../../ADMIN231548/MEMBRES/membreliste.php">RETOUR LISTE</a></font></td>
</tr>
</table>
</div>
<div id="Trait1">
<hr width="1008">
</div>
<div><?php
mysql_select_db("local.host");
$reponse = mysql_query("SELECT * FROM membre ORDER BY ndd");
while($donnees = mysql_fetch_array($reponse))
{
?>
</div>
<div id="Zone">
<div id="Gifa"> <img src="../IMAGE%20FORUM/LISTEDESMEMBRES/annim003.gif">
</div>
<div id="Avatar">
<?php $imagepersonne1 = $donnees['imagepersonne']; echo "<img src='$imagepersonne1'/>";?>
</div>
<div id="Nomdossier"> <font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">
<?php echo $donnees['ndd']; ?> - <?php echo $donnees['prenom']; ?>
<?php echo $donnees['nom']; ?> <?php echo $donnees['matricule']; ?>
</font> </div>
<div id="Nom"> <font size="2" face="Arial, Helvetica, sans-serif">NOM
: <?php echo $donnees['nom']; ?></font> </div>
<div id="Prenom"> <font size="2" face="Arial, Helvetica, sans-serif">PRENOM
: <?php echo $donnees['prenom']; ?></font> </div>
</div>
<div><br/>
<?php
}
mysql_close();
?>
<div id="TraitB">
<hr width="

   
Répondre à Edouard73

7

Gihef, le 27 sep 2007 à 18:06:23

Bonjour,

Voilà des idées qu'elles sont bonnes.
Du relative sur le bloc tableau de 1010px et l'image en background.
Et les petits personnages en absolute.
Grâce au relative du bloc qui se répète, les petites images prendront alors chacun comme référence et resteront dedans.

Et comme tu risques de vouloir utiliser les 2 autres parties du tableau, je te propose de tester, en plus, l'autre forme de positionnement, le float.
Et donc chaque bloc répété contient 3 autres blocs en float qui viendront se coller les uns aux autres de gauche à droite + 1 bloc en clear pour “annuler” les float précédents et rétablir le flux normal.
Les petites images seraient dans le bloc de gauche, du texte dans celui du centre et le reste à droite ?

Te voilà donc avec des blocs qui utilisent le relative, le absolute et le float.

Tu peux tester le résultat, en HTML, sur cette page.


++
Les autres conseils sont valables.
Pas d'espaces ni d'accents dans les noms de fichiers, de dossiers. Des “_” peuvent être utiles.
Choisis plutôt le tout minuscules.
Supprime toutes les <div> </div> vides. Utilise plutôt des marges.
Comme tes styles vont s'étoffer, place-les dans une feuille de styles externe ou
déplace tes <style> dans la <head> et, plutôt que

</head>
<style type="text/css" media="screen">
fais
</style>
</head>

--

   
Répondre à Gihef

9

Edouard73, le 27 sep 2007 à 18:50:11

Merci pour la réponse

je vais retravailler pour les majuscules et espaces dans les liens...

mais je pense surtout suivre ton conseile à faire une page.css car avec la méthode de ludovic effectivement cette les codes css vont prendre beaucoups de place.

Enfin, encore merci pour vos aides :)

   
Répondre à Edouard73

10

 Edouard73, le 27 sep 2007 à 18:59:54
  • +1

Ha ça le coup du floap ça pourra toujour me servir si je veux passer la liste sur 3 colonne au lieu d'une. merci pour le tip :)

   
Répondre à Edouard73
Posez votre question Répondre
Ils ont besoin de votre aide