Mise en page avec des div

**Denis Placé** · 18/04/2016, 17h48

Bon, je viens de m'apercevoir que j'avais saisi un : au lieu d'un ; dans adetruire3.php ce qui empêchait l'affichage du main. Je vais essayer d'améliorer le CSS ...

**Denis Placé** · 19/04/2016, 10h59

Bonjour,

J'ai repris le code avec les vrais noms de fichiers et un début de code pour chaque.
Un PHP sera :

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
<!DOCTYPE HTML>
<html>
 
<head>
  <?php include('./head.php'); ?>
  <title>le titre de cette page</title>
</head>
 
<body>
  <div id="container">
    <header>
      <?php include('./header.php'); ?>
    </header>
 
    <main>
      <aside>
        <?php include('./menu-gauche-saveurs.php'); ?>
      </aside>
 
      <section>
        <!-- ICI => le CONTENU propre à la page en particulier -->
        <article>
          <div id="page"><?php include('./accueil-saveurs.php'); ?></div>
          <div id="menu-droite"><?php include('./menu-droite-saveurs.php'); ?></div>
        </article>
      </section>
    </main>
 
    <?php include('./footer.php'); ?>
 
  </div>
</body> 
</html>

head.php :

Code :

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

1
2
  <meta charset="utf-8" />
  <link rel="stylesheet" href="saveurs.css">

header.php:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
    <div id ="header">
        <div class ="block haut_gauche">
            <?php include("haut-gauche-saveurs.php"); ?>
        </div>
 
        <div class ="block haut_centre">
           <p align="center"><img src="logo-saveurs.png"></p>
        </div>
 
        <div class ="block haut_droit">
            <?php include("haut-droite-saveurs.php"); ?>
        </div>
    </div>

haut-gauche-saveurs.php:

Code :

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

<?php echo "Produits salés"; ?>

haut-droite-saveurs.php:

Code :

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

<?php echo "Produits sucrés"; ?>

menu-gauche-saveurs.php:

Code :

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

1
2
3
4
5
6
7
8
<?php
	echo "Gourmand de";
	echo "<ul>";
		echo "<li><a href='chocolat_saveurs.php'> Chocolat</a></li>";
		echo "<li><a href='mousse-chocolat_saveurs.php'> Mousse chocolat</a></li>";
		echo "<li><a href='sucre-candy_saveurs.php'> Sucre Candy</a></li>";
	echo "</ul>"
?>

menu-droite-saveurs.php

Code :

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

1
2
3
4
5
6
7
8
<?php
	echo "<ul>";
		echo "<li><a href='engagements_saveurs.php'> Nos engagements</a></li>";
		echo "<li><a href='engagements_saveurs.php'> Notre histoire</a></li>";
		echo "<li><a href='references_saveurs.php'> Nos références</a></li>";
		echo "<li><a href='SAV_saveurs.php'> SAV</a></li>";
	echo "</ul>"
?>

saveurs.css:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
body
	{
		font-size:100%;
		overflow-y:hidden;
 
	}
 
#container
	{
		max-width:100%;
		margin:0 auto;
		height:100%;
	}
 
#container > header
	{
	  background:#aaaaaa;
	  width:100%;
	  height:13%;
	}
 
 
#container > footer
	{
	  height:6.5%;
	  background:#aaaaaa;
	}
 
main
	{
		width:100%;
		height:80.5%;
	}
 
main > aside
	{
		position: absolute;
		top:13%;
		width:12%;
		height:80.5%;
		background:#DF7401;
	}
 
main > section
	{
		width:88%;
		position: absolute;
		top: 0%;
		left:12%;
		height:100%;
	}
 
.block
	{
		float:left;
	}
 
.block:after{clear:left;}
 
.haut_gauche
	{
		height:13%;
		width:7.3%;
		text-align:center;
	}
.haut_centre
	{
		height:13%;
		width:78.0%;
		text-align:center;
	}
.haut_droit
	{
		height:13%;
		width:14.7%;
		text-align:center;
	}
 
 
#page
	{
		background:#E3F6CE;
		position:absolute;
		top:13%;
		width:88%;
	}
 
#menu-droite
	{
		background:#DF7401;
		height:80.5%;
		position: absolute;
		top:13%;
		left:88%;
		width:12%;
	}

Le schéma ci-après donne une idée de ce que je souhaite obtenir:
Nom : Sans titre.png
Affichages : 62
Taille : 5,4 Ko

Je n'arrive pas à afficher la partie haute en gris et ne comprends pas pourquoi la partie centrale (accueil) se superpose à gauche sur le menu.
Merci de bien vouloir m'éclairer.

**JujuPomme** · 19/04/2016, 11h06

Bonjour,

Concernant ton menu de gauche, il n'a aucun style CSS associé, donc c'est normal.

Pour la partie centrale, que veux-tu exactement? Que ton bandeau en haut soit fixe?

Bon courage !

**Denis Placé** · 19/04/2016, 11h26

Bonjour,
Merci magicarpe44 pour ton intervention.

Concernant ton menu de gauche, il n'a aucun style CSS associé, donc c'est normal.

Le menu de gauche est dans le aside et dans la feuille de style j'ai :

Code :

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

1
2
3
4
5
6
7
8
main > aside
	{
		position: absolute;
		top:13%;
		width:12%;
		height:80.5%;
		background:#DF7401;
	}

Ca ne suffit donc pas ?

Pour la partie centrale, que veux-tu exactement? Que ton bandeau en haut soit fixe?

Oui, je souhaiterais en effet que la partie haute reste fixe. De plus, je souhaiterais n'avoir de barres de défilement que pour la partie centrale (qui deviendra + haute qu'actuellement) et pour le menu droit pour la même raison.

**JujuPomme** · 19/04/2016, 11h30

Je me permets de te rediriger vers cette petite explication sur l'attribut position :

Glossaire des propriétés CSS - VI-B. Positionnement

PS: fixed

Tu devrais pouvoir y trouver ton bonheur

**Denis Placé** · 19/04/2016, 11h33

Je regarde ça tout de suite. Merci.

Invité · 19/04/2016, 12h04

Bonjour Denis,

ce n'est pas parce qu'un fichier a l'extension .php que TOUT doit être écrit à l'intérieur de balises php !

Code :

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

1
2
3
4
5
6
7
8
<?php
	echo "Gourmand de";
	echo "<ul>";
		echo "<li><a href='chocolat_saveurs.php'> Chocolat</a></li>";
		echo "<li><a href='mousse-chocolat_saveurs.php'> Mousse chocolat</a></li>";
		echo "<li><a href='sucre-candy_saveurs.php'> Sucre Candy</a></li>";
	echo "</ul>"
?>

S'écrit très simplement :

Code :

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

1
2
3
4
5
6
	<p>Gourmand de</p>
	<ul>
		<li><a href="chocolat_saveurs.php"> Chocolat</a></li>
		<li><a href="mousse-chocolat_saveurs.php"> Mousse chocolat</a></li>
		<li><a href="sucre-candy_saveurs.php"> Sucre Candy</a></li>
	</ul>

Un exemple, avec une variable PHP :

Code php :

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

1
2
3
4
5
6
7
8
9
<?php
$mon_url3 = 'sucre-candy_saveurs.php';
?>
	<p>Gourmand de</p>
	<ul>
		<li><a href="chocolat_saveurs.php"> Chocolat</a></li>
		<li><a href="mousse-chocolat_saveurs.php"> Mousse chocolat</a></li>
		<li><a href="<?php echo $mon_url3; ?>"> Sucre Candy</a></li>
	</ul>

J'ai l'impression que tu aimes bien te compliquer inutilement la vie...

Ou, plus gênant, que tu ne maitrises pas du tout le PHP/HTML...

RELIS et réfère-toi souvent aux TUTOS :

PHP : Le tutoriel pour grands débutants pressés

Invité · 19/04/2016, 12h20

position: absolute; (ou fixed) SORT le bloc du flux.
C'est-à-dire qu'il n'est plus en "relation" avec les autres éléments de la page (sauf avec son "parent", lui-même positionné).
C'EST A EVITER autant que possible.

EXPLIQUE ce que tu cherches à faire.

N.B. Sache que si tu veux "FIXER" des blocs en haut de page : attention à ce que ça ne prenne pas trop de hauteur.
Tout le monde n'a pas le même ordi. que toi !
Pense à ceux qui ont une tablette, un smartphone,...

**Denis Placé** · 19/04/2016, 13h12

Ce n'est pas parce qu'un fichier a l'extension .php que TOUT doit être écrit à l'intérieur de balises php

Non, non, je suis bien d'accord ! Pour le coup, c'est uniquement pour me faire la main avec ce langage.

position: absolute; (ou fixed) SORT le bloc du flux. C'EST A EVITER autant que possible.

Ah zut alors. Mon but est :

De rendre fixe la partie haute.
De n'avoir de barres de défilement que pour la partie centrale (qui deviendra + haute qu'actuellement) et pour le menu droit pour la même raison

. Avec l'explication donnée par magicarpe44, j'avais réussi à résoudre le point 1 en modifiant ainsi le CSS:

Code :

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

1
2
3
4
5
6
7
8
9
#container > header
	{
		position:fixed;	/* positionné par rapport a la fenêtre du navigateur */
		top:0;
		left:0;
	        background:#aaaaaa;
	        width:100%;
	        height:13%;
	}

Je suis un peu dans l'expectative.

Invité · 19/04/2016, 13h42

Envoyé par Denis Placé

Mon but est :

De rendre fixe la partie haute.
De n'avoir de barres de défilement que pour la partie centrale (qui deviendra + haute qu'actuellement) et pour le menu droit pour la même raison

NON. OUBLIE le fonctionnement avec frame !!

CHANGE ta façon de "concevoir" le site. C'est un site MODERNE que tu fais !

Ta voiture ne fonctionne pas au charbon, et tu ne la démarres plus à la manivelle, si ??

**Denis Placé** · 19/04/2016, 14h24

Bonjour,

OUBLIE le fonctionnement avec frame !!

Euh ..... Il me semble bien que je n'ai plus de frames, quand je dis que je souhaite figer le bandeau haut, je sous-entends que je souhaite le voir apparaître pour chaque fichier nouvellement ouvert, ne serait-ce que parce qu'il contient un logo.

Invité · 19/04/2016, 15h58

Tu n'as plus de frame, mais tu PENSES frame !

Une frame est une sorte de "fenêtre" (déjà dit !)
Ce que tu veux faire (une "fenêtre de défilement") est OBSOLETE.

Là, tu as une page ENTIERE.
Et les internautes ont maintenant l'habitude de surfer avec UN DOIGT, et de faire défiler TOUTE la page.

Invité · 19/04/2016, 16h01

Envoyé par Denis Placé

...je souhaite le voir apparaître pour chaque fichier nouvellement ouvert ....

Là, tu me fais peur...

Tu n'as pas encore compris que TOUTES TES PAGES auront la structure ci-dessus ??
(et je dis bien "pages", pas "fichiers")

Donc, bien évidement, header, footer, menu,... seront forcément présents et visibles sur CHAQUE PAGE.

JE RE-EXPLIQUE :

1/ Les FRAMES sont des fenêtres au sein d'UNE SEULE PAGE.
Quand on clique sur un lien de MENU => on change le contenu des "FRAME"/fenêtres.
MAIS on RESTE TOUJOURS sur la MEME PAGE.

2/ Le système MODERNE ne fonctionne PAS comme ça :
On a PLUSIEURS PAGES. Chaque PAGE a la même structure (cf. ce qu'on est en train de mettre en place)
Quand on clique sur un lien de MENU => on CHANGE DE PAGE !

PAR CONSEQUENT, si je reprends ton menu :

Code :

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

1
2
3
4
5
	<ul>
		<li><a href="chocolat_saveurs.php"> Chocolat</a></li>
		<li><a href="mousse-chocolat_saveurs.php"> Mousse chocolat</a></li>
		<li><a href="sucre-candy_saveurs.php"> Sucre Candy</a></li>
	</ul>

LES PAGES chocolat_saveurs.php, mousse-chocolat_saveurs.php et sucre-candy_saveurs.php auront :

la MEME STRUCTURE HTML/PHP,
mais afficheront des contenu SPECIFIQUES différents.

C'est clair ou pas ?

**Denis Placé** · 19/04/2016, 16h33

Aucun soucis .... C'est bel et bien ce que j'avais compris

Ceci étant, qu'est-ce qui empêche chaque page de faire systématiquement apparaître un certain nombre d'éléments identiques (logo, menu) à chaque fois ? Rien, je pense, et c'est ce que je veux.
Si l'internaute visualise une page sur le chocolat, il voit le logo de la société d'accord ? Et s'il change pour visualiser celle sur le sucre candy, il doit pouvoir continuer à visualiser ce même logo, ,non ?

Invité · 19/04/2016, 16h42

Envoyé par Denis Placé

...qu'est-ce qui empêche chaque page de faire systématiquement apparaître un certain nombre d'éléments identiques (logo, menu) à chaque fois ?...

Encore une fois, tu raisonnes A L'ENVERS...

Tu me fais penser à un champion d'aviron,.... qui continue à conduire sa voiture en marche arrière... par habitude...

La bonne question est :

qu'est-ce qui PERMET à chaque page de faire systématiquement apparaître un certain nombre d'éléments identiques (logo, menu) à chaque fois ?

Réponse : les fichiers INCLUS.

Si tu as compris le principe, rien ne t'empêche de construire quelques pages, le menu qui va bien, et de voir comment ça fonctionne...

**Denis Placé** · 19/04/2016, 16h54

Toujours d'accord .... c'est bien ce que je fais dans

Code :

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

1
2
3
    <header>
      <?php include('./header.php'); ?>
    </header>

Non ?

Mon problème n'est + celui-ci depuis un bout de temps. J'avais positionné en haut le header avec:

Code :

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

1
2
3
4
5
6
7
8
9
#container > header
	{
		position:fixed;	/* positionné par rapport a la fenêtre du navigateur */
		top:0;
		left:0;
	  background:#aaaaaa;
	  width:100%;
	  height:13%;
	}

et tu me dis que ce n'est pas le mieux. Je veux bien changer pour mieux mais ... quel est ce mieux ? C'est la que j'en suis.

Invité · 19/04/2016, 17h21

Enlève tout les position:fixed/absolute (et les top, left...) et LAISSE COULEUR le flux.

Donc: le plus simplement du monde.
Sans prise de tête.

Avec display:flex; sur header et main (et footer, événtuellement), les blocs devraient se positionner correctement (selon le MODELE que je t'avais fait).

**Denis Placé** · 19/04/2016, 17h59

Merci de nouveau. Mon CSS devient maintenant:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
body
	{
		font-size:100%;
 
	}
 
#container
	{
		max-width:100%;
		margin:0 auto;
		height:100%;
	}
 
#container > header
	{
		display:flex;
	  background:#aaaaaa;
	  width:100%;
	  height:13%;
	}
 
 
#container > footer
	{
		display:flex;
	  height:6.5%;
	  background:#aaaaaa;
	}
 
main
	{
		display:flex;
		width:100%;
		height:80.5%;
	}
 
main > aside
	{
		width:12%;
		height:80.5%;
		background:#DF7401;
	}
 
main > section
	{
		width:88%;
		height:100%;
	}
 
.block
	{
		float:left;
	}
 
.block:after{clear:left;}
 
.haut_gauche
	{
		height:13%;
		width:7.3%;
		text-align:center;
	}
.haut_centre
	{
		height:13%;
		width:78.0%;
		text-align:center;
	}
.haut_droit
	{
		height:13%;
		width:14.7%;
		text-align:center;
	}
 
 
#page
	{
		background:#E3F6CE;
		width:88%;
	}
 
#menu-droite
	{
		background:#DF7401;
		height:80.5%;
		width:12%;
	}

Et des réglages restent à faire comme le montre cette copie d'écran:
Nom : Sans titre.png
Affichages : 47
Taille : 14,3 Ko

Le header est "collé à gauche"
Le menu droit est ... descendu à gauche
La partie centrale est légèrement séparée du header
Et enfin tout l'espace vertical n'est pas pris

Invité · 19/04/2016, 18h30

Peux-tu donner le code HTML généré de la page ("Ctrl"+"U" ou clic droit -> "Afficher la source").
(pas le code PHP)

**Denis Placé** · 19/04/2016, 18h35

Bien entendu, voila:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE HTML>
<html>
 
<head>
    <meta charset="utf-8" />
  <link rel="stylesheet" href="saveurs.css">  <title>le titre de cette page</title>
</head>
 
<body>
  <div id="container">
    <header>
 
    <div id ="header">
        <div class ="block haut_gauche">
            Produits salés        </div>
 
        <div class ="block haut_centre">
           <p align="center"><img src="logo-saveurs.png"></p>
        </div>
 
        <div class ="block haut_droit">
            Produits sucrés        </div>
    </div>    </header>
 
    <main>
      <aside>
        Gourmand de<ul><li><a href='chocolat_saveurs.php'> Chocolat</a></li><li><a href='mousse-chocolat_saveurs.php'> Mousse chocolat</a></li><li><a href='sucre-candy_saveurs.php'> Sucre Candy</a></li></ul>      </aside>
 
      <section>
        <!-- ICI => le CONTENU propre à la page en particulier -->
        <article>
          <div id="page"><p>&nbsp;</p>
<h1>Saveurs</h1>
<p>&nbsp;</p>
Notre histoire commence là.
<p>&nbsp;</p></div>
          <div id="menu-droite"><ul><li><a href='engagements_saveurs.php'> Nos engagements</a></li><li><a href='engagements_saveurs.php'> Notre histoire</a></li><li><a href='references_saveurs.php'> Nos références</a></li><li><a href='SAV_saveurs.php'> SAV</a></li></ul><p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
<p>&nbsp;.</p>
 
 
</div>
        </article>
      </section>
    </main>
 
 
  </div>
</body> 
</html>

Mise en page avec des div

CSS

Discussions similaires

Partager

Partager