Discussion :

[laurentSc]

Bonsoir,

de nombreux utilisateurs de mon site sont mal ou non-voyants donc son accessibilité est importante.
Voici ce que j'ai fait :
- j'ai utilisé le code de jreaux62 permettant aux malvoyants de grossir l'affichage du texte (et ce sur chaque page de mon site) ; (même si ces derniers utilisent en général des logiciels permettant de grossir l'affichage, fournir cette fonctionnalité est un plus ) ;

- j'ai déplacé tous les liens vers les partenaires dans le footer afin que les lecteurs d'écran accèdent immédiatement au menu ;

- j'ai simplifié celui-ci :
- déplacement de certains liens dans le footer (adhésion, nous écrire, partenaires)

- j'en ai réduit le nombre de niveaux (1 ou 2) sauf pour les 2 rubriques qui ne concernent pas ceux qui voient mal ou pas du tout (photos et vidéos)

- concernant ces 2 rubriques, au lieu de mettre dans les sous-menus des liens vers différentes archives, j'ai créé pour chaque rubrique une page "archives" qui contient une liste déroulante permettant de sélectionner l'année souhaitée à afficher.

Que pensez-vous de l'accessibilité du site ? (http://vercorshandisport.org/)

[Invité]

Bonjour Laurent,

pour commencer, j'ai de très bons amis handicapés, dont un développeur web aveugle, pour qui j'ai réalisé le design (aspect graphique) de quelques-uns de ses sites (DVRGV).
Ceci étant dit...

1- Manifestement, Laurent, tu t'es dit que ce n'était pas la peine de réaliser un quelconque design pour ton site : TOUT EST EN VRAC !!
Tous les handicapés (concernés par ton site) NE SONT PAS aveugles !
Ton site ne ressemble à rien !!
Voilà pour l'aspect VISUEL.


2- Ton code HTML est mal construit. Là encore, TOUT EST EN VRAC.
C'est n'importe quoi.
Les balises HTML5 (<section>, <nav>,...) sont mises n'importe où, sans vraiment prendre en compte leur sémantique.


3- Parlons ergonomie...

3.1- C'est justement une structure HTML sémantique correcte qui permettra une circulation fluide dans dans site, même avec un logiciel d'aide à la lecture.

3.2- Le MENU : Avant d'accéder à l'onglet "Espace adhérent", il faut se farcir TOOOOOOOOOOOOOOOOOOOOUT le reste du menu (y compris les sous-menus, sous-sous-menus, sous-sous-sous-menus....) !
sous-menus, sous-sous-menus, sous-sous-sous-menus : là encore, c'est n'importe quoi.

Il est préférable d'avoir :

• un menu principal SIMPLE
• et, dans la page, un menu secondaire (avec soit des liens vers d'autres pages, soit des ancres vers des sections de la page)
• pour des archives : soit des liens (avec l'année) ou une liste déroulante des années, ou... (en fonction du tri à faire)

3.3- Il faut concevoir le menu avec LOGIQUE.
tu dois te demander (et SAVOIR) :

• quels sont les onglets (du menu) qui nécessitent un accès DIRECT, RAPIDE (ceux qui seront le plus cliqués) : on doit les mettre en premier !
• quelles sont les sections les plus importantes, et celles "secondaires" (comme la liste des partenaires, judicieusement mise en bas du site).

4- Concernant les photos et vidéos.

4.1- Ne va pas imaginer que les non et mal-voyants ne s'y intéressent pas !
PAR CONTRE, il faut soigner le descriptif de chaque photo / vidéo : expliquer avec des mots ce qui s'y passe, qui s'y trouve,...

4.2- onglets "Photos" et "Vidéos" du menu :

• les sous-menu sont INUTILES : il suffit D'UNE SEULE PAGE, qui affiche les vidéos/photos de l'ANNEE CHOISIE.
• Mais les sous-sous-menus.... sont ridicules et surtout : INUTILES !!
  C'est RIDICULE d'avoir UNE page pour UNE vidéos ou UNE galerie-photo.

Il faut donc :

• REGROUPER !!
• Mettre des TITRES, des commentaires,...
• Une liste déroulante OU des liens pour pouvoir CHANGER d'année (et accéder aux archives).

INSPIRE-TOI de cet exemple (clique sur le bouton "Recherhe / Archives").
Tu remarqueras aussi le système de pagination, et dans la barre d'adresse : ...?an=2018&pg=2#mainContent

Ou encore de cette galerie-photos :
Avec une seule page, on peut afficher toutes les galeries, une par une, avec une liste déroulante pour choisir.


5- Circulons un peu dans les pages...

5.1- "trombinoscope" : les balises <img /> sont censée avoir un attribut alt !
Totalement absent ici.
Et accessoirement : avoir les noms sans indiquer la fonction de chacun n'a pas grand intérêt, si ? (quelle est la fonction de "Laurent Schmitt", là dedans ? )

5.2- "Bureau" - "Commissions" : là, c'est le pompon !
On a juste une image !
Comme dirait Coluche : "Circulez, y'a rien à voir !"
Sauf que c'est le contraire : "Circulez les non-voyants : y'a même pas un bout de texte pour expliquer ce qui se passe sur cette page !"

Bon. Je ne vais pas toutes les faire, c'est déprimant.

5-3 Mais rien que pour l'onglet "le club", il n'y a PAS BESOIN de sous-menu :

• TOUT peut tenir dans UNE SEULE page
• Il suffit éventuellement d'un menu secondaire dans la page, avec des ANCRES pour circuler d'un article à l'autre.

CONCLUSION : NON, ton site n'est pas ergonomique. L'accessibilité (ou plutôt son manque) est catastrophique.
Les informations ne sont pas facilement accessibles (voire pas du tout).
Il n'est même pas beau ni correctement structuré.

LA PREMIERE CHOSE A FAIRE :

• écrire une structure HTML(5) correcte et sémantique. C'est le PLUS IMPORTANT.

ENSUITE :

• structurer / hiérarchiser les informations : mettre les plus importante en premier (dans le menu), et regrouper celles qui peuvent l'être (exemple du "club")
• SIMPLIFIER le MENU principal
• Ajouter dans les pages (si nécessaire) un "menu secondaire" (pour circuler au sein de la page, ou accéder à d'autres pages)

Sur ce.... As-tu passé de bonnes vacances ?
Parce que là (quand tu auras fini de pleurer... ) : y'a du boulot !!

[laurentSc]

Sur ce.... As-tu passé de bonnes vacances ?

Elles commencent ce soir !

y'a du boulot !!

Après t'avoir lu, OK. Quand les vacances seront passées...

[bourvil]

a oui , le site est tout en vrac.
Je suis tombee sur un site http://www.art-prime.com/ avec une sorte d'interface d'accessibilite.
peu etre que cela correspond a tes besoins
bonne vacances

[laurentSc]

Voici une parenthèse dans mes vacances mais je repars demain...

Cela dit, je suis très intéressé par vos commentaires, notamment ceux (détaillés avant la déprime) de jreaux62 (mais le 2e exemple dont je suis censé m'inspirer pour les photos/vidéos est un lien inexistant...)

Quand vous dites que tout est en vrac ou que le site ne ressemble à rien, pouvez-vous préciser ? Car, j'y suis tellement habitué que je ne remarque rien.

Enfin, Bourvil, j'ai bien vu qu'il y avait une aide à l'accessibilité avec le bonhomme dans le rond bleu par contre le + et le - à droite de la page ne semble rien apporter; sais-tu à quoi ça sert ?

[Invité]

Bonjour Laurent,

1- j'ai rétabli le lien


2- je t'ai expliqué quoi faire dans ma conclusion.

Le lien proposé par Bourvil est intéressant, mais ce n'est pas du tout la priorité pour toi (ni essentiel).
Oublie ça pour l'instant.


3- Montre le site a tes amis. Demande leur ce qu'ils en pensent.


Bonne vacances...

[laurentSc]

Je suis rentré dimanche dernier (12 août) suis encore en vacances mais la maison a pris la foudre lundi et depuis plus internet (là je suis sur mon téléphone le seul appareil où j'ai encore internet). J'ai un peu travaillé en local (avec wampserver pas besoin d'Internet) même si c'est devenu hyper lent mais je suis bloqué car je ne peux consulter les sites exemple que sur mon téléphone et c'est trop galère donc j'attend que internet revienne (j'espère samedi)(la box est foutue et plus internet dans tout le quartier... )

[Invité]

Pauvre Laurent *....

Comme quoi, le "coup de foudre" de l'été.... n'est plus ce qu'il était....





* Je ne me moque pas : je compatis...

[laurentSc]

Retour aux affaires !
Petite explication : j'ai 2 PCs, un pro et un perso. Bien sûr, j'avais plus internet sur les 2. Pour le pro, j'ai contacté Orange pro jeudi ; ils ont testé à distance la box ; elle était foutue. Du coup, ils m'en ont fourni une nouvelle, récupérée hier et paramétrée ce matin (avec leur aide) et...internet remarche. Par contre, toujours pas sur le perso (raison si ça marche pas sur les 2 : c'est pas le même répartiteur). Donc pour avoir internet sur le PC perso, je me suis mis en wifi sur la box pro. Et voilà

Du coup, j'ai pu lire sur internet un tuto sur la balise <canvas> qui semble appropriée pour faire des dessins (et remplacer les images bureau et commissions)(C'est une étape car j'ai plein d'autres choses à modifier).
J'ai pris un exemple simple qui l'utilise. L'exemple fonctionne bien tout seul mais pas si je l'intègre dans mon code et je ne comprends pas.

exemple tout seul :

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 
        ctx.fillStyle = 'rgb(200, 0, 0)';
        ctx.fillRect(10, 10, 50, 50);
 
        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
        ctx.fillRect(30, 30, 50, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

exemple intégré dans mon code :

Code html+php :

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
<!DOCTYPE html>
<html lang="fr">
<head> 
<title>Bureau</title>
<link href="../css/style-menu2.css" rel="stylesheet"/>
<meta charset="UTF-8"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- pour les malvoyants -->
<link href="../css/style-malvoyant.css" rel="stylesheet"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/malvoyant.js"></script>
<!-- fin de pour les malvoyants -->
<!-- pour canvas -->
<script type="application/javascript">
function draw() {
  var canvas = document.getElementById("bureau");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = 'rgb(200, 0, 0)';
        ctx.fillRect(10, 10, 50, 50);

        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
        ctx.fillRect(30, 30, 50, 50);
      }
}
</script>

    <!-- fin de pour canvas -->

</head>
<body onload="draw();">
<header>
<?php include("../entete.php"); ?>
</header>
<nav>
<?php include("../menu3.php"); ?>
</nav>
<section class="ajustFontSize">
<article>
<ul class="fontsize-ajuster ajustFontSize">
  <li class="fontsize-decrease">a- <span>Diminuer la taille des caractères</span></li>
  <li class="fontsize-reset">0 <span>Rétablir la taille des caractères</span></li>
  <li class="fontsize-increase">A+ <span>Augmenter la taille des caractères</span></li>
</ul>
</article>
<article class="aligne">

<canvas id="bureau" width="150" height="150">
</canvas>
<!--<img src="bureau.jpg" title="Bureau" />-->

</article>

</section>

<footer>
<section class="ajustFontSize">
<?php include("../footer.php"); ?>
</section>
</footer>
</body>
</html>

Comme j'ai lu

Ce script contient une fonction draw(), qui est exécutée lorsque la page a fini de charger

l'élément canvas est déjà créé...

Ce qui est étrange, si je consulte le code source de cette page, c'est que la modif n'est pas prise en compte :

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
<!DOCTYPE html>
<html lang="fr">
<head> 
<title>Bureau</title>
<link href="../css/style-menu2.css" rel="stylesheet"/>
<meta charset="UTF-8"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- pour les malvoyants -->
<link href="../css/style-malvoyant.css" rel="stylesheet"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/malvoyant.js"></script>
<!-- fin de pour les malvoyants -->
</head>
<body>
<header>
	<img src="http://vercorshandisport.org/html5test/bandeau4.JPG" alt=""/>
</header>
<nav>
<div class="page">
<ul class="menu">
 
<li><a href="../accueil/accueil.php">Accueil</a></li> <!-- n1 -->
...
</div>
</nav>
<section class="ajustFontSize">
<article>
<ul class="fontsize-ajuster ajustFontSize">
  <li class="fontsize-decrease">a- <span>Diminuer la taille des caractères</span></li>
  <li class="fontsize-reset">0 <span>Rétablir la taille des caractères</span></li>
  <li class="fontsize-increase">A+ <span>Augmenter la taille des caractères</span></li>
</ul>
</article>
<article class="aligne">
<img src="bureau.jpg" title="Bureau" />
 
</article>
 
</section>
 
<footer>
<section class="ajustFontSize">
 
 
 
<table>
<tr>
<td colspan="13">
<ul id="idfooter">
	<li><a href="../adhesion/adhesion.php">Adhésion</a></li>
	<li><a href="../ecrire/ecrire.php">Nous écrire</a></li>
</ul>
</td></tr><tr>
<td><a href= "http://www.apicil.com/Apicil/Home.jsp" target="_blank"> <img width="50" src="../logos/logo_apicil.gif" title="APICIL"/></a></td><td class="width50">&nbsp;</td>
...
</tr>
</table>
</section>
</footer>
</body>
</html>

[Invité]

Bonjour,

Laisse tomber le <canvas> : ce n'est PAS DU TOUT adapté !

Crée un VRAI contenu, avec des images et du texte, et qui soit responsive.
Sous forme d'un article, par exemple.
Avec éventuellement une galerie HTML (texte+images), pour afficher les photos des personnes ,avec leur nom et fonction.


RELIS CE QUE J'AI ÉCRIT, et FAIT LES CHOSES DANS L'ORDRE.

[laurentSc]

Si j'avais pensé à <canvas>, c'est que je pensais dessiner un organigramme (donc mettre les images dans des boîtes) et relier ces boîtes par des flèches...
Bon tu me dis de traiter les choses dans l'ordre donc je vais commencer par essayer d'améliorer la sémantique html5

PS : même si internet HS, télé grillée et système de chauffage (géothermie) en rade, on l'a échappé belle grâce au parafoudre, car sans lui, probablement, le tableau électrique aurait pris feu, et toute la maison serait grillée...

[Invité]

Si tu veux un organigramme, inspire-toi de ça :

• https://codepen.io/jreaux62/pen/GJmOMP (attention : pas "responsive"...)
• https://codepen.io/jreaux62/pen/YXXLqM
• https://codepen.io/jreaux62/pen/yNNKRa

N.B. il y a quelques mois, on a eu une grosse sur-tension dans le quartier : pleins d'appareils grillés (parties électroniques, dont le ventilateur de la chaudière, micro-onde...)
Que du bonheur !

[laurentSc]

Bonsoir,

je commence donc par essayer d'améliorer la sémantique html5.
Pour faire mon site, j'ai une page "squelette" de laquelle je pars pour créer toutes les pages. J'essaie donc de modifier cette page et quand elle sera valide, je pourrai modifier toutes les pages. Je voudrais donc avoir ton avis :

Code php :

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
 
<!DOCTYPE html>
<html lang="fr">
<head>
<title>squelette</title>
<link href="../css/style-menu2.css" rel="stylesheet"/>
<link href="../css/style-malvoyant.css" rel="stylesheet"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/malvoyant.js"></script>
 
<meta charset="UTF-8"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header class="ajustFontSize">
<?php include("../entete.php"); ?>
</header>
<nav class="ajustFontSize">
<?php include("../menu3.php"); ?>
</nav>
 
<main>
<section>
<ul class="fontsize-ajuster ajustFontSize">
  <li class="fontsize-decrease">a- <span>Diminuer la taille des caractères</span></li>
  <li class="fontsize-reset">0 <span>Rétablir la taille des caractères</span></li>
  <li class="fontsize-increase">A+ <span>Augmenter la taille des caractères</span></li>
</ul>
</section>
 
 
<article class="ajustFontSize">
  <p>squelette
  </p>
</article>
 
</main>
 
<footer>
<section class="ajustFontSize">
<?php include("../footer.php"); ?>
</section>
</footer>
 
 
</body>
</html>

[Invité]

Bonjour Laurent,

1-

Code :

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

1
2
3
4
5
<section>
<ul class="fontsize-ajuster ajustFontSize">
...
</ul>
</section>

On utilisera plutôt <aside> :

Code html :

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

1
2
3
4
5
<aside>
<ul class="fontsize-ajuster ajustFontSize">
...
</ul>
</aside>

2-

Code :

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

1
2
3
4
<article class="ajustFontSize">
  <p>squelette
  </p>
</article>

Ici, par contre, on mettra <section> (pour le "contenu principal"), avec plusieurs <article> dedans :

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
<section class="ajustFontSize">
  <h2>squelette</h2>
 
  <article>
    <header><h1>titre1</h1></header>
    <div>contenu1</div>
  </article>
 
  <article>
    <header><h1>titre1</h1></header>
    <div>contenu1</div>
  </article>
...
</section>

Si tu as plusieurs colonnes, on peut ajouter des <div>, <nav>, <aside>.

3-

Code :

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

1
2
3
4
5
<footer>
  <section class="ajustFontSize">
<?php include("../footer.php"); ?>
  </section>
</footer>

Là, pas besoin de <section> :

Code html :

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

1
2
3
<footer class="ajustFontSize">
<?php include("../footer.php"); ?>
</footer>

Ce n'est pas la peine d'en faire trop...

[Invité]

Ce n'était pas pour toi que j'avais écrit ce codepen ?

• Mise en page complexe (flex) - responsive

Quoi qu'il en soit, (et sans forcément faire trop complexe), IL FAUT que tu mettes en page le CONTENU PRINCIPAL !

Dans la <section> (principale) :

• une colonne <aside> (pour des sous-menu, listes, widgets,.....)
• une colonne principale <div>

[Invité]

J'ai aussi fait ça :

• Flex : Exemple de layout complet

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
<body>
  <header>header</header>
  <nav>navigation principale</nav>
 
  <main>
 
    <aside>aside
        <nav>navigation secondaire</nav>
        <div>autre chose...</div>
    </aside>
 
    <section>
      <div class="mainTitle">Titre de la page</div>
      <article>article 1</article>
      <article>article 2</article>
      <article>article 3</article>
    </section>
 
  </main>
 
  <footer>footer</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
59
60
61
62
63
64
65
66
67
* { box-sizing: border-box; /* pour maîtriser width et flex-basis */ }
 
/* Layout avec FLEXBOX */
html, body { padding:0; margin:0; width:100%; 
  min-height: 100vh; /* toute la hauteur du viewport */
  display: -webkit-flex;
  display: flex; /* crée un contexte flex pour ses enfants */
  -webkit-flex-direction: column;
  flex-direction: column;/* affichage vertical */
}
body { 
  flex:1;
  align-items:stretch;
}
body > main {
  flex:1;
}
/* ------------------------ */
/* MOBILE FIRST */
/* main : aside + section */
main {
  display: -webkit-flex;
  display: flex; /* crée un contexte flex pour ses enfants */
  -webkit-flex-direction: column;
  flex-direction: column; /* affichage vertical */
}
/* SPECIAL PHONE */
@media (max-width: 768px) {
  main > aside {
    order: 2; /* aside s'affiche APRES section */
  }
}
/* ------------------------ */
/* DESKTOP */
@media (min-width: 769px) {
  /* main : aside + section */
  main {
    display: -webkit-flex;
    display: flex; /* crée un contexte flex pour ses enfants */
    -webkit-flex-direction: row;
    flex-direction: row; /* affichage horizontal */
  }
  main > aside { width:10em; min-width:240px; }
  main > section { flex: 1; /* occupe la largeur restante */ }
}
/* ------------------------ */
/* déco */
body > header,
body > nav,
body > main > section,
body > main > aside,
body > main > section > article,
body > footer {
  margin: 0.2em 0.4em;
  padding: 1em;
  border-radius: 6px;
}
body > header { background: #feb; }
body > nav { background: #ccf; }
body > main > section { background: #eee; }
body > main > aside { background: #ccc; }
body > main > section > article { background: #dd8; }
body > footer { background: #feb; }
 
 
/* ------------------------ */
main > section .mainTitle { font-size:1.4em; text-align:center; padding:10px; }

[laurentSc]

Je regarderai demain mais ta proposition de 19:53 me semble séduisante. Le codepen de 19:21, c'était bien pour moi.

[laurentSc]

J'ai trouvé le temps de me pencher sur ton code (du post #16) et si j'augmente un peu le nombre d'articles dans la section principale : https://codepen.io/laurentsc/pen/ZMEWev ça se passe bien dans le codepen mais pas si je place le code directement sur mon disque (les articles supplémentaires débordent sur le footer vu que la hauteur de la section n'est pas augmentée). Je me souviens d'avoir déjà eu une différence entre un codepen et le même code en dehors du codepen, mais ça venait de la nécessité d'inclure jquery, ce qui n'était pas nécessaire dans le codepen. Mais vu que le code présent n'utilise pas jquery, c'est autre chose, mais quoi ?

[Invité]

Laurent,

crée un dossier "test" sur ton serveur.
Dedans, mets une copie de ton "nouveau" site.

Commence par les fichiers de base : il faut en premier vérifier la structure HTML.


On pourra alors voir ensemble ce qui cloche.

[laurentSc]

Le dossier test existe depuis un moment et se nomme "html5test"

Je souhaite qu'on mette au point ton code, donc le voici :
http://vercorshandisport.org/html5te.../squelette.php

squelette.php :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<title>squelette</title>
<link href="../css/style-jreaux62.css" rel="stylesheet"/>
 
<meta charset="UTF-8"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
  <header>header</header>
  <nav>navigation principale</nav>
 
  <main>
  <!--<aside>
<ul class="fontsize-ajuster ajustFontSize">
  <li class="fontsize-decrease">a- <span>Diminuer la taille des caractères</span></li>
  <li class="fontsize-reset">0 <span>Rétablir la taille des caractères</span></li>
  <li class="fontsize-increase">A+ <span>Augmenter la taille des caractères</span></li>
</ul>
</aside>-->
 
 
    <section>
      <div class="mainTitle">Titre de la page</div>
      <article>article 1</article>
      <article>article 2</article>
      <article>article 3</article>
      <article>article 4</article>
      <article>article 5</article>
      <article>article 6</article>
    </section>
 
  </main>
 
<footer >
footer<?php //include("../footer.php"); ?>
</footer>
 
</body>
</html>

style-jreaux62.css :

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
 
* { box-sizing: border-box; /* pour maîtriser width et flex-basis */ }
 
/* Layout avec FLEXBOX */
html, body { padding:0; margin:0; width:100%; 
  display: flex; /* crée un contexte flex pour ses enfants */
  flex-direction: column;/* affichage vertical */
  height: 100vh; /* toute la hauteur du viewport */
  min-height: 100vh; /* toute la hauteur du viewport */
}
body { 
  flex:1;
  background:grey;
  align-items:stretch;
}
body > main {
  flex:1;
}
/* ------------------------ */
/* MOBILE FIRST */
/* main : aside + section */
main {
  display: flex; /* crée un contexte flex pour ses enfants */
  flex-direction: column; /* affichage vertical */
}
/* SPECIAL PHONE */
@media (max-width: 768px) {
  main > aside {
    order: 2; /* aside s'affiche APRES section */
  }
}
/* ------------------------ */
/* DESKTOP */
@media (min-width: 769px) {
  /* main : aside + section */
  main {
    display: flex; /* crée un contexte flex pour ses enfants */
    flex-direction: row; /* affichage horizontal */
  }
  main > aside { width:10em; min-width:240px; }
  main > section { flex: 1; /* occupe la largeur restante */ }
}
/* ------------------------ */
/* déco */
body > header,
body > nav,
body > main > section,
body > main > aside,
body > main > section > article,
body > footer {
  margin: 0.2em 0.4em;
  padding: 1em;
  border-radius: 6px;
}
body > header { background: #feb; }
body > nav { background: #ccf; }
body > main > section { background: #eee; }
body > main > aside { background: #ccc; }
body > main > section > article { background: #dd8; }
body > footer { background: #feb; }
 
 
/* ------------------------ */
main > section .mainTitle { font-size:1.4em; text-align:center; padding:10px; }