Pseudo frames en PHP

Pseudo frames en PHP - PHP - Programmation

Marsh Posté le 21-01-2016 à 09:03:07    

Bonjour,
 
Mon objectif est de construire la page index.php à l'aide de pseudo frames afin d'obtenir un agencement représentant l'équivalent d'un tableau de 2 lignes et 3 colonnes :
 
Sont présents 6 fichiers liés : f1.php, f2.php et f3.php sur la 1ère ligne, f4.php, f5.php et f6.php sur la seconde ligne.
 
Pour index.php, je pense à quelque chose comme ça :

Code :
  1. <body>
  2. <STYLE type=text/css>
  3. .f2
  4. {
  5. margin-left:250px;
  6. }
  7. .f3
  8. {
  9. text-align:right;
  10. }
  11. .f5
  12. {
  13. margin-left:160px;
  14. }
  15. .f6
  16. {
  17. text-align:right;
  18. }
  19. </STYLE>
  20. <div class="f1">
  21. <?php
  22.   include('f1.php');
  23. ?>
  24. </div>
  25. <div class="f2">
  26. <?php
  27. include('f2.php');
  28. ?>
  29. </div>
  30. <div class="f3">
  31. <?php
  32. include('f3.php');
  33. ?>
  34. </div>
  35. <div class="f4">
  36. <?php
  37. include('f4.php');
  38. ?>
  39. </div>
  40. <div class="f5">
  41. <?php
  42. include('f5.php');
  43. ?>
  44. </div>
  45. <div class="f6">
  46. <?php
  47. include('f6.php');
  48. ?>
  49. </div>
  50. </body>


 
Je rencontre essentiellement 2 problèmes:

  • La classe f1 qui doit afficher la page f1.php en haut à gauche et la classe f4 qui doit afficher la page f4.php juste en dessous de f1.php et que je sais pas faire.
  • Je devrais avoir en fait "un tableau à 2 lignes et 3 colonnes" mais j'obtiens plutot un tableau de 6 lignes et une seule colonne, tout étant superposé.


Merci beaucoup pour votre aide.

Reply

Marsh Posté le 21-01-2016 à 09:03:07   

Reply

Marsh Posté le 21-01-2016 à 09:37:34    

Suivant l'effet exact recherché, ainsi que la compatibilité avec les navigateurs nécessaire, il faudra que tu vois du coté de
 - position:fixed ou absolute ou float:left :
http://www.alsacreations.com/tuto/ [...] t-css.html
 - display:table ou inline-block :
http://www.alsacreations.com/tuto/ [...] splay.html
 - ou mieux encore display:flex :
http://www.alsacreations.com/tuto/ [...] odule.html


---------------
D3
Reply

Marsh Posté le 21-01-2016 à 10:08:15    

Salut,
 
Puisque tu connais le résultat, pourquoi ne fais tu pas directement un tableau ?  
 
http://www.trucsweb.com/tutoriels/css/css-tableau/


---------------
Topic Ach/Vds/Ech jeux vidéo
Reply

Marsh Posté le 21-01-2016 à 11:32:56    

mechkurt,
Merci pour ton intervention. J'ai progressé et obtiens quasiment ce que je recherche mais j'ai à chaque fois comme une sorte de saut à la ligne qui empêche un véritable alignement vertical
 
Merci également à Buldozerben,

Citation :

Puisque tu connais le résultat, pourquoi ne fais tu pas directement un tableau ?


J'ai lu qu'ils alourdissaient les pages, c'est pour ça que souhaite les éviter et puis, c'est aussi une occasion d'apprendre une autre technique  :)

Reply

Marsh Posté le 21-01-2016 à 12:47:39    

Avec les ordinateurs que nous avons je ne pense pas que ça alourdisse tant que ça. Mais tu as raison la page est lu plusieurs fois afin que le DOM corrige d'éventuelles erreurs.
Tu as aussi le CSS 3 avec des nouveautés comme columns etc  
 
Bon code


---------------
Topic Ach/Vds/Ech jeux vidéo
Reply

Marsh Posté le 21-01-2016 à 13:15:12    

Buldozerben,
 

Citation :

Tu as aussi le CSS 3 avec des nouveautés comme columns etc


Je vais aussi regarder ça, merci et je tiens au courant.

Reply

Marsh Posté le 21-01-2016 à 13:25:31    

La propriété CSS columns permet en effet de répartir du texte à la manière d'un journal mais ne semble être reconnue que par les toutes dernières versions des navigateurs, ce qui écarte une partie des internautes ... donc je vais attendre un peu avant de passer à ceci.
De plus, je pense que les colonnes ont toutes une largeur identique, ce qui n'est pas mon souhait.

Reply

Marsh Posté le 23-01-2016 à 16:46:07    

Bon, je vais finalement m'orienter vers autre chose ....
Merci pour votre participation.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed