Pseudo frames dans une page

**Denis Placé** · 20/01/2016, 18h59

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 :
Nom : Sans titre.png
Affichages : 89
Taille : 3,6 Ko

Nom : Sans titre.png
Affichages : 89
Taille : 3,6 Ko

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Nom : Sans titre1.png
Affichages : 79
Taille : 5,9 Ko

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

**NoSmoking** · 21/01/2016, 21h59

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Invité · 22/01/2016, 10h29

Bonjour Denis,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Denis Placé** · 22/01/2016, 15h34

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

**NoSmoking** · 23/01/2016, 19h46

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 */
}

.

Invité · 24/01/2016, 00h12

@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 ?

**NoSmoking** · 25/01/2016, 22h06

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

Pseudo frames dans une page

CSS

Discussions similaires

Partager

Partager