Pseudo frames dans une page

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

Je ne sais pas si je mets mon post au bon endroit mais qui ne risque rien n'a rien.
Mon objectif est de construire la page index.php à l'aide de pseudo frames afin d'obtenir un agencement représentant ceci :
Pièce jointe 198537

Sont présents 6 fichiers liés : f1.php, ....., f6.php

Pour index.php, je pense à quelque chose comme ça :
Code:

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

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, comme le montre la copie d'écran suivante, il y a une sorte de saut à la ligne à chaque fois qui aboutit à un tableau de 6 lignes.

Pièce jointe 198601

Comment faire pour aligner horizontalement f1, f2 et f3 ? puis f4, f5 et f6 ? Merci d'avance.

Bonjour,
regarde peut être du coté de display:table-xxx en considérant que tu as 2 lignes.
Code:

1 2 3 4 5 6 7 8 9 10 <div> <div>F1</div> <div>F2</div> <div>F3</div> </div> <div> <div>F4</div> <div>F5</div> <div>F6</div> </div>

Bonjour Denis,

en respectant la sémantique des balises HTML5 : http://codepen.io/jreaux62/pen/YwezWJ

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <header>
    <div id="F1">F1</div>
    <div id="F2">F2</div>
    <div id="F3">F3</div>
  </header>
  <main>
    <div id="F4">F4</div>
    <div id="F5">F5</div>
    <div id="F6">F6</div>
  </main>
  <footer>
    <div id="F7">Footer</div>
  </footer>
</body>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100%;
}
 
body > header,
body > main,
body > footer {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
}
 
body > header > div,
body > main > div,
body > footer > div {
  padding: 10px;
  border: 1px solid #ccc;
  /* pour visualiser */
}
 
body > header > div {
  min-height: 100px;
}
body > main > div {
  min-height: 400px;
}
body > footer > div {
  min-height: 50px;
}
 
#F1 {
  width: 250px;
}
#F2 {
  width: 100%; /* la place restante */
}
#F3 {
  width: 175px;
}
 
#F4 {
  width: 160px;
}
#F5 {
  width: 100%; /* la place restante */
}
#F6 {
  width: 160px;
}
 
#F7 {
  width: 100%;
}

N.B. Tu remarqueras que j'ai mis des id, et pas des class, car ces éléments sont uniques.

22/01/2016, 15h34
Denis Placé

Extra, les gars ! Merci beaucoup, ça fonctionne parfaitement. :P

Citation:

Envoyé par jreaux62

...en respectant la sémantique des balises HTML5

sur ce coup je ne prononce pas ne sachant/connaissant pas le contenu final, il pourrait y avoir un potentiel <header> dans un <header>, idem pour <main> et ça c'est pas bien.

Citation:

Envoyé par jreaux62

Tu remarqueras que j'ai mis des id, et pas des class, car ces éléments sont uniques.

il n'est point besoin d'ID dans ce cas, optant pour flex on opte donc pour du 100% CSS3, mais avec un support encore imparfait, donc on peut utiliser sans complexe la pseudo-classe :nth-child().

De plus pour que les éléments aient vraiment les dimensions affectées, aux padding/border près, il faut appliquer sur ceux ci la propriété flex, ce qui pourrait donner
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 body > header > div, body > main > div, body > footer > div { flex:auto; /* 1 1 auto force à remplir l’espace disponible pour tous */ } header > div:nth-child(1){ width:250px; flex:initial; /* 0 1 auto */ } header > div:nth-child(3){ width:200px; flex:initial; /* 0 1 auto */ } main > div:nth-child(odd){ width:160px; flex:initial; /* 0 1 auto */ }
.

24/01/2016, 00h12
Invité

@NoSmoking
Es-tu sûr qu'on ait besoin de montrer qui a les plus grosses "lucioles", alors qu'au final, on est d'accord sur la pédagogie?

L'important est que le "questionnant" ait une réponse claire et efficace, et surtout, qui réponde à sa problématique, non ?
25/01/2016, 22h06
NoSmoking

Pas sûr d'avoir bien compris le sens de ta remarque !?!, il est en effet important que le "questionnant" trouve une réponse qui corresponde au mieux à sa demande, mais le forum est également un lieu d'échange d'avis et/ou de méthodes qui enrichissent forcément les discussions et aide à progresser ;)