 |
|
|
|
| Problème de positionnement (position:relative par  Edouard73 |
jeudi 27 septembre 2007 à 13:36:07 |
Configuration: Windows XP Firefox 2.0.0.7
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 |
Reformules ta question. Car j'y comprend rien.
++ Ludovic JOLY www.ludovic-joly.com |
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 :) |
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
|
<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
|
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> --
|
| 03/11 00h10 | Excel , cellule position relative | Bureautique | 03/11 13h03 | 4 |
| 12/10 09h36 | position relative des commentaires excel2003 | Bureautique | 15/10 11h21 | 7 |
| 11/08 17h40 | [css][position relative] | Webmastering | 12/08 15h24 | 2 |
| 20/03 16h42 | IE / FF : positionnement | Webmastering | 20/03 19h16 | 2 |
