Discussion :

[Invité]

Denis,

Voilà une STRUCTURE HTML / CSS qui tient la route : http://codepen.io/jreaux62/pen/RaJpGW

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
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
<div id="container">
  <header id="header">
 
    <div class="haut_gauche">
      Produits salés
    </div>
 
    <div class="haut_centre">
      <figure><img src="logo-saveurs.png"></figure>
    </div>
 
    <div class="haut_droit">
      Produits sucrés
    </div>
 
  </header>
 
  <main>
 
    <aside id="side_gauche">
      <nav class="side_menu" id="menu_gauche">
        <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>
      </nav>
      <!-- ici, on peut ajouter ce qu'on veut (pub, calendrier,...) -->
    </aside>
 
    <section>
      <!-- ICI => le CONTENU SPECIFIQUE à la page -->
      <article>
        <header>
          <h1>Saveurs</h1>
        </header>
        <div>
          <h2>Notre histoire commence là...</h2>
          <p>qdfg sdfg sdfgsdf sdfgsdfg sdfgdfg...</p>
          <p>...</p>
        </div>
      </article>
 
      <article>
        <header>
          <h1>Autre article</h1>
        </header>
        <div>
          <h2> yujkgh j fj;ffgj dhjdfghj</h2>
          <p>dy j to kkcbjk fghj dghdfgh dghdfgh dghdfgh dghdfg jdty...</p>
          <p>...</p>
        </div>
      </article>
 
    </section>
 
    <aside id="side_droite">
      <nav class="side_menu" 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>
      </nav>
      <!-- ici, on peut ajouter ce qu'on veut (pub, calendrier,...) -->
    </aside>
 
  </main>
 
  <footer id="footer">
 
    <div class="bas_gauche">
      Produits salés
    </div>
 
    <div class="bas_centre">
      <p>Ceci est le footer</p>
    </div>
 
    <div class="bas_droit">
      Produits sucrés
    </div>
 
  </footer>
</div>

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
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
html, body
	{
		font-size:100%;
		width:100%;
 		height:100%;
 		min-height:100%;
    padding:0;
    margin:0;
	}
 
#container
	{
		/*max-width:100%;*//* INUTILE */
		margin:0 auto;
		height:100%;
	}
/* ------------------ */
/* HEADER / ENTETE */
#container > header
	{
		display:flex;
	  background:#aaaaaa;
	  width:100%;
	  min-height:13%; /* on donne une hauteur MINI */
	}
 .haut_gauche
	{
		/*height:13%;*//* NON !! Car les hauteurs sont relatives à leur PARENT ! */
		width:7.3%;
		text-align:center;
	}
.haut_centre
	{
		/*height:13%;*//* NON !! Car les hauteurs sont relatives à leur PARENT ! */
		width:78.0%;
		text-align:center;
	}
.haut_droit
	{
		/*height:13%;*//* NON !! Car les hauteurs sont relatives à leur PARENT ! */
		width:14.7%;
		text-align:center;
	}
 
/* ------------------ */
/* PRINCIPAL */
main
	{
		display:flex;
		width:100%;
		/*height:80.5%;*//* INUTILE : s'adaptera au CONTENU */
	}
 
/* CONTENU */
main > section
{
		width:88%;
		height:100%;
		background:#E3F6CE;
}
main > section > article {
		padding:20px 30px;
}
 
/* ------------------ */
/* SIDE gauche / droite */
main > aside
	{
		width:12%;
		/*min-height:80.5%;*//* INUTILE */
		background:#DF7401;
	}
 
.side_menu /* on peut mettre le meme style aux 2 menus */
	{
  padding:10px;
	}
.side_menu ul {
  padding-left:15px;
}
.side_menu a {
  color:#fff;
}
 
/* ------------------ */
/* FOOTER / PIED DE PAGE */
#container > footer
	{
		display:flex;
	  min-height:6.5%; /* on donne une hauteur MINI */
	  background:#aaaaaa;
	}
 .bas_gauche
	{
		width:20%;
		text-align:center;
	  background:#ccc;
	}
.bas_centre
	{
		width:60.0%;
		text-align:center;
	}
.bas_droit
	{
		width:20%;
		text-align:center;
		  background:#ccc;
}

Pense à CORRIGER ta structure HTML.

[Denis Placé]

Bonjour,

Merci Jreaux62.
Ca tient la route, en effet, mais je n'ai jamais douté sur ce point

<main>
<aside id="side_gauche">
<nav class="side_menu" id="menu_gauche">

Dans saveurs.css, tu n'utilises ni side_gauche, ni menu_gauche donc ne peut-on pas simplifier en :

<main>
<aside>
<nav class="side_menu">

Je me permets de revenir sur mes demandes d'hier:

Mon but est :
1.De rendre fixe la partie haute.
2.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

Concernant le 1. un système équivalent à ce qui est présent sur le site http://www.tf1.fr/ me conviendrait en faisant de sorte que tout le header reste fixé en haut.

Pour le 2. et faute de pouvoir disposer de plusieurs barres de défilement verticales, on doit peut-être pouvoir comme pour le 1. bloquer le menu vertical gauche juste en dessous du header pour l'avoir toujours à l'écran, non ? Je trouve que c'est + sympa pour l'internaute d'avoir les liens directement à l'écran même quand il visualise le bas de la page.

[Invité]

OK,
si c'est ce que tu veux...

"Vos désirs font desordre, Mon Saigneur..."

Ajouter : http://codepen.io/jreaux62/pen/RaJpGW

Code css :

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

1
2
3
4
5
6
7
8
9
10
/* HEADER FIXE */
#container > header
{
  position:fixed;
  height:100px;
}
#container > main
{
  padding-top:100px; /* MEME que HAUTEUR du HEADER */
}

Code css :

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

1
2
3
4
5
6
7
8
/* MENU GAUCHE FIXE */
#side_gauche .side_menu {
  position:fixed;
}
/* MENU DROITE FIXE */
#side_droite .side_menu {
  position:fixed;
}

[Denis Placé]

OK,
si c'est ce que tu veux...

Repos .... N'abusons pas !

Ca répond maintenant à 99% à mon désir.
Le 1% manquant réside dans le menu droit qui du coup se trouve bloqué sans que l'on puisse visualiser ce qui est + bas dans le cas d'un menu droit qui occupe + qu'une page, ce qui sera le cas rapidement.
Certes, on peut supprimer

Code :

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

1
2
3
4
/* MENU DROITE FIXE */
#side_droite .side_menu {
  position:fixed;
}

mais tu as peut-être encore un lapin dans ton chapeau que ton chien n'aurait pas encore débusqué ?

[Invité]

...dans le cas d'un menu droit qui occupe + qu'une page, ce qui sera le cas rapidement....

C'est justement le genre de problème qui peut arriver avec les bloc en position:fixed;

Il est à proscrire de FIXER la hauteur du menu (+ ajouter un overflox-y:auto; pour faire apparaitre une barre de scroll)
Car quelle que soit la hauteur que tu fixes, certains visiteurs auront toujours un écran trop petit.

Il existe bien des solutions, dont certaines à base de JavaScript/jQuery.
Mais es-tu sûr de vouloir t'engager sur cette pente savonneuse ?

Concentre-toi d'abord sur le fait d'avoir des pages HTML/PHP/CSS fonctionnelles.



Comprend bien que "fixer les menus" est TON choix.
Qui entraine des conséquences (comme celle évoquée ci-dessus).

Et je n'ai ni le temps, ni les moyens de t'enseigner toutes les ficelles du métier en quelques messages...
Désolé.

[Denis Placé]

Il existe bien des solutions, dont certaines à base de JavaScript/jQuery.
Mais es-tu sûr de vouloir t'engager sur cette pente savonneuse ?

Euh .... non, je vais me limiter à cela en te remerciant une nouvelle fois pour le travail accompli.

[Invité]

Merci.

C'est raisonnable : tu dois avancer étape par étape.

Familiarise-toi d'abord au PHP/HTML/CSS. Et fais AU PLUS SIMPLE pour commencer.
De cette façon, tu en tireras un maximum de la satisfaction

Bonne continuation, et n'hésite pas à me/nous solliciter.