Discussion :

[Casio]

Whaouuuu il est splendide et toalement fonctionnel maintenant... Merci ;-)

Y'a juste le "Association" qui reste tout le temps coloré (pas taper ... ).

;-)

[Invité]

Il suffit d'enlever du CSS :

Code :

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

1
2
3
/* ------------------------------- */
/* SPECIAL : class active - menu actif */
#navMain > ul > li.active > a { background: #DD6403; }

N.B. "classiquement", la page "active" est celle sur laquelle on est.
D'où la coloration "pernamente" (indépendante du fait de passer d'une rubrique à l'autre sur le menu).

Avec un langage dynamique* (comme PHP), ou peut assez facilement automatiser l'affichage de class="active" au bon endroit.
Mais bon. ceci est une autre histoire....

*D'ailleurs, maintenant que j'y pense... ça doit aussi pouvoir se faire dans le script jQuery.....
Je vais regarder ça....un de ces jours....

[Casio]

Merci infiniment, je test tout à l'heure.

Je suis en train de commencer à l'intégrer au site ( http://wda-fr.org ).

[Casio]

Je viens de tester en le virant, le menu redevient bleu (?!?) sur la case "Association"...

[Invité]

Normal...


N.B. Par contre, j'ai remarqué que la partie "menu" est effectivement en position fixed !

Il faut donc rajouter (jQuery) :

Code jQuery :

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

1
2
3
4
5
6
7
// ------------------------------------------------
// Scrollbar si menu plus grand que la hauteur de fenêtre (interessant pour MENU FIXE)
$(window).on("load resize", function() {
  var navFixed = "#menu"; // menu FIXE
  $(navFixed).css({"max-height":$(window).height()+"px"}).css({ "overflow-y": "auto" });
});
// ------------------------------------------------

[Casio]

Oui, j'ai pompé ce truc sur un autre site... Je souhaiterais en effet que le menu reste fixe a gauche.

Je ne comprends pas du coups ce que ça change concrètement ?

[Casio]

Oki, j'ai vu l'intérêt.

Possible d'ailleurs de faire en sorte de minimiser l'ascenseur dans ce cas ? Le rendre moins large (c'est moche) ?

Pour la coloration bleu ? Pourquoi ?

[Casio]

Any idea ?
Je modifie le post initial (sujet) pour être raccords.

Edit : Heu... Bah non, en fait, impossible d'éditer mes premiers messages ici-même...

[Invité]

Bonjour,

1/ regarde TON code (CSS) de plus près (ce que tu as ajouté/enlever) : certaines instructions sont redondantes.
Notamment, les background bleus sont restés.

Et nettoie le code : supprime les lignes qui n'ont plus lieu d'être.
Tu y verras plus clair.


2/ et remplace dans le jQuery :

Code jQuery :

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

  $(navFixed).css({"max-height":$(window).height()+"px"}).css({ "overflow-y": "auto" });

par

Code jQuery :

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

  $(navFixed).css({"height":$(window).height()+"px"}).css({ "overflow-y": "auto" });

Car après tests, le 1er code et un peu pénible....

3/ styler la scrollbar : pas facile en CSS pur (l'affichage/gestion est différents selon les navigateurs)

Une AUTRE solution :Custom Scrollbar
après avoir téléchargé les fichiers, ajouter :
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
et remplace dans le jQuery par :

Code jQuery :

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

1
2
3
4
5
$(window).on('load', function(){
        $("#menu").mCustomScrollbar();
});$(window).on('load resize', function(){
        $("#menu").css({"height":$(window).height()+"px"}); // impose la hauteur du menu (avec logo)
});

[Casio]

Oki vu.

Par contre, ici, y'a t'il doublon ? :

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
#navMain ul, #navMain li, #navMain a {
	position: relative;
	padding: 0;
	margin: 0;
	border: 0;
	text-decoration: none;
}
 
(...)
 
#navMain ul li a {
	display: block;
	color: #FFFFFF;
	padding: 10px 10px;
	position: relative;
	text-shadow: 2px 1px 1px #000000; /* Ombrage */
	/* text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); */ /* Ombrage initial */
}

Niveau nomenclature, je veux dire, est-ce que "#navMain ul li a" vaut "#navMain ul, #navMain li, #navMain a" ?

[Invité]

Non.

Il y a des virgules.

Code css :

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

#navMain ul, #navMain li, #navMain a { ... }

équivaut à :

Code css :

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

1
2
3
#navMain ul { ... }
#navMain li  { ... }
#navMain a { ... }

Ce serait bien que tu jette un œil au cours CSS....

[Casio]

Oki doki. Je m'en suis douté en testant, mais je ne connaissais pas l'action de la virgule.

Merci.

Je planche sur le coté "page active" du menu...

[Casio]

Hummm... Trop complexe pour moi.

Sinon, pour clore le topic (enfin, promis...)... Quid du coté responsive de ce menu ?
Puis-je le mettre dans un menu burger ? Complexe ?

[Casio]

Je ne trouve aucun moyen pour le responsive.

Sinon, existe t'il un moyen pour faire en sorte, puisque nous avons mis cela dans le Javascript (et que je n'y connais rien) de faire en sorte qu'aucun menu ne soit décollapsé par defaut SI la HAUTEUR de la résolution d'affichage est inférieur à 700px par ex ?
L'idée est d'éviter ces ascenseurs immondes...

[Invité]

bonjour,

pourquoi s'acharner à avoir un menu vertical à gauche, qui plus est très étroit ?
alors qu'un menu horizontal, en haut serait plus judicieux, et pratique !

Et puis..; franchement... le design est moisi (et la pub dans le header...).

A ta place, je repartirais d'une base neuve, et d'une mise en page "solide" :

• Utilisation de boîtes flexibles de CSS
• -> regarde l'Exemple d’un layout complet (repris ici : https://codepen.io/jreaux62/pen/POGdjj)
• -> ou ici : https://codepen.io/jreaux62/pen/bYwxYL

[Casio]

Merci, mais je vais raccrocher alors.
Je ne suis pas codeur, et encore moins designeur.
Il se trouve que je suis le seul à pouvoir m'occuper, en plus des autres activités de l'association que je gèrent seul aussi, du site.

Je n'ai pas terminé encore toutes les corrections de codes qu'il faut maintenant que je repense à re-re-re-changer l'interface.
Je jette l'éponge, je veux juste un site fonctionnel. Nous sommes en ligne depuis 1996, et je n'ai pas trop de temps à accorder au site.

Merci de ces coups de mains.
Quand j'aurais le temps, je poserais une annonce genre sur LeBonCoin pour trouver un codeur bénévole ou pas trop cher pour reprendre cela.

[Casio]

P.s : La pub dans le header est actuellement notre seul financement. On rentre moins de 400 euros par an, et je fais des chèques mensuellement pour les faux-frais.
Les pubs Google nous rapportent 70 euros tous les deux ans. C'est énorme pour nous.

[Invité]

OK pour la pub, mais elle peut être mieux intégrée....


Regarde les exemples de mises en page que je t'ai donné : c'est vraiment très facile à mettre en place !
Quasiment du copier-coller...

Il suffit de reprendre le CSS, en mettant les id des div de ton site.
A priori, pas ou peu de code HTML à changer, puisque ça joue sur la structure globale du site, mais pas sur son contenu.
Donc, juste la page index.php à retravailler un peu, et le CSS de la mise en page à changer/ajouter.

Et pour le responsive, il suffit de ne pas définir les largeurs des "boites" en px, mais en em ou %.

[Casio]

Merci, en effet, cela semble presque alléchant, mais cela fait maintenant 3 semaines que je bosse sur la refonte du site, et maintenant que j'en vois le bout, je n'ai pas le courage de tout re-re-refaire.

Je faisais des sites internet avant les années 2000, c'était presque plus simple, il n'y avait que du HTML simple.
C'était dépannable dans l'heure et c'était léger.

C'est la raison pour laquelle j'ai toujours refusé d'utiliser des template genre WordPress ou autre pour l'association : Pour être autonome !
Ces machines font 30000 Mo et dés qu'il y a un bug, tu passes des heures à faire du reporting sur un forum de newb's...

Le site de l'association est de plus en plus un site carte de visite, il doit être léger, rétro-compatible au max et LEGER.
Je ne suis pas graphiste, je suis une bille dans les codes couleurs, ou les uniformisations graphiques.
Il faut juste que Google nous scannent.

Si c'est propre, c'est un plus.

Je verrais pour la prochaine refonte du site, genre l'année prochaine peut-être.
Mais la ou c'est un plaisir pour vous, c'est une plaie pour moi, et personne ne peut s'y coller à ma place...

[Invité]

Je viens de constater un bug :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<!-- Partie incluse par le fichier menu.php !-->
 
<html>
<head>
	<link rel="stylesheet" media="all" href="http://wda-fr.org/includes/menu.css" type="text/css" />
	<script type="text/javascript" src="http://wda-fr.org/moteurs/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="http://wda-fr.org/moteurs/menu.js"></script>
</head>
 
<body>
	<div id="menu">

Puisque le fichier menu.php est inclus dans index.php, il ne doit pas comporter les balises <html>, <head>, <body>... !
Il faut donc

• les supprimer du fichier menu.php,
• et mettre les <link> et <script> directement dans le <head> du fichier index.php.