Problème de positionnement (position:relative
Résolu/Fermé
Edouard73
Messages postés
139
Date d'inscription
mercredi 12 septembre 2007
Statut
Membre
Dernière intervention
2 avril 2013
-
27 sept. 2007 à 13:36
Edouard73 Messages postés 139 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 2 avril 2013 - 27 sept. 2007 à 18:59
Edouard73 Messages postés 139 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 2 avril 2013 - 27 sept. 2007 à 18:59
A voir également:
- Problème de positionnement (position:relative
- Partage de position - Guide
- Position gps - Guide
- Partage de position whatsapp - Guide
- Ps5 position verticale - Guide
- Historique position google - Guide
6 réponses
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
27 sept. 2007 à 13:55
27 sept. 2007 à 13:55
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.
mais il faudrait savoir plus précisément ce que tu souhaites obtenir pour pouvoir mieux te conseiller.
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.
Edouard73
Messages postés
139
Date d'inscription
mercredi 12 septembre 2007
Statut
Membre
Dernière intervention
2 avril 2013
11
27 sept. 2007 à 14:44
27 sept. 2007 à 14:44
Dabors merci pour vos réponses.
ensuite pour etre plus claire.
voila l'exemple :
https://actualite-premium.fr/
<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
https://actualite-premium.fr/
<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 :)
ensuite pour etre plus claire.
voila l'exemple :
https://actualite-premium.fr/
<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
https://actualite-premium.fr/
<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 :)
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
27 sept. 2007 à 14:55
27 sept. 2007 à 14:55
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".
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".
Edouard73
Messages postés
139
Date d'inscription
mercredi 12 septembre 2007
Statut
Membre
Dernière intervention
2 avril 2013
11
27 sept. 2007 à 15:40
27 sept. 2007 à 15:40
Re Bonjour Dalida :)
J'ai essayé ta solution, si je vire tous les styles des div ça me donne ça
https://actualite-premium.fr/
<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.
https://actualite-premium.fr/
<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>
J'ai essayé ta solution, si je vire tous les styles des div ça me donne ça
https://actualite-premium.fr/
<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.
https://actualite-premium.fr/
<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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Utilisateur anonyme
27 sept. 2007 à 16:20
27 sept. 2007 à 16:20
<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 ;)
* {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 ;)
Edouard73
Messages postés
139
Date d'inscription
mercredi 12 septembre 2007
Statut
Membre
Dernière intervention
2 avril 2013
11
27 sept. 2007 à 18:45
27 sept. 2007 à 18:45
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 :
https://actualite-premium.fr/
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="
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 :
https://actualite-premium.fr/
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="
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
27 sept. 2007 à 18:06
27 sept. 2007 à 18:06
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
--
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>
--
Edouard73
Messages postés
139
Date d'inscription
mercredi 12 septembre 2007
Statut
Membre
Dernière intervention
2 avril 2013
11
27 sept. 2007 à 18:59
27 sept. 2007 à 18:59
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 :)
