Le Plateau-Mont-Royal

 

L’entête du site en FLEX dans la zone Header-HTML …

Dernière version en date du 2017.11.16

 

 
…………..

Version # 3 avec un FLEX-item de recherche …

Logo de la Société d'histoire du Plateau-Mont-Royal 2

Société d’histoire du Plateau-Mont-Royal

Souvenirs et images du Plateau-Mont-Royal

 
Version # 2 : meilleur positionnement…

  • Soit un conteneur FLEX qui occupe 100 % de la largeur de la page.
  • Les items sont centrés latéralement et verticalement dans le conteneur.
  • Le premier contenant flex affiche le logo de la SHP sur la gauche avec 15 % de la largeur de la page.
  • Le second contenant flex affiche le titre du site et la description sommaire du site sur 80 % de la largeur de la page.
  • Notons que ce code est introduit directement dans le code HTML de cette page.
Logo de la Société d'histoire du Plateau-Mont-Royal 2

Société d’histoire du Plateau-Mont-Royal

Souvenirs et images du Plateau-Mont-Royal

 
Version # 1 : premier essai d’un entête en FLEX …

Logo de la Société d'histoire du Plateau-Mont-Royal 2

Société d’histoire du Plateau-Mont-Royal

Souvenirs et images du Plateau-Mont-Royal

 

Le logo de la SHP (100×100) : Logo shp
Un autre logo de la SHP (66×80) : Logo de la Société d'histoire du Plateau-Mont-Royal 2

 

Société d’histoire du Plateau-Mont-Royal

Souvenirs et images du Plateau-Mont-Royal (couleur #003366 ou RVB = 51,67,138)


Essai du premier FLEX

  • Consistant en deux blocs de texte avec 40% chacun de la largeur de la page.
  • Notons que ce code est introduit directement dans le code HTML de cette page,

Style de ce conteneur div : « display: flex; flex-flow: row wrap; align-content: flex-start; justify-content: space-between; align-item: center; border: 5px solid red; border-radius: 25px; padding: 15px »

Style de ce premier item-flex : « flex: 0 0 40%; border: 5px solid blue; border-radius: 25px; padding: 15px »
Sur deuxième ligne et
Sur une troisième ligne.
Style de ce deuxième item-flex : « flex: 0 0 40%; border: 5px solid yellow; border-radius: 25px; padding: 15px » identique au premier sauf pour son contenu (avec un minimum de \ )
Sur deuxième ligne et
Sur une troisième ligne.

 



Essai # 2 de conteneur FLEX

  • Soit un conteneur FLEX appuyé à la marge de gauche de la page.
  • Il occupe 80 % de la page.
  • Le premier contenant flex affiche une image appuyée sur la gauche avec du texte à droite.
  • Le second contenant flex affiche seulement du texte.
  • Chaque contenant-flex occupe 45% de la largeur du conteneur.
  • Notons que ce code est introduit directement dans le code HTML de cette page.

Style de ce conteneur div : « display: flex; flex-flow: row wrap; align-content: flex-start; justify-content: space-around; max-width: 80%; align-item: center; border: 1px solid red; border-radius: 10px; border-collapse: separate; border-spacing: 1em; padding: 5px »

Style de ce premier item-flex : « flex: 0 0 45%; align-self: auto; border: 1px solid blue; border-radius: 10px; padding: 5px ». Avec en premier une image d’une sculpture de sable en devenir au parc La Fontaine ( avec le style + style= » float: left; margin: 0 0 1em 1em; » ) et suivi du présent texte.
Style de ce deuxième item-flex : « flex: 0 0 45%; align-self: auto; border: 1px solid yellow; border-radius: 105px; padding: 5px » identique au premier sauf pour son contenu (avec un minimum de \ )
Sur deuxième ligne et
Sur une troisième ligne.

 




Essai # 3 de conteneur FLEX

  • Cet essai est une copie de l’essai précédent sans le texte du conteneur.
  • Soit un conteneur FLEX appuyé à la marge de gauche de la page.
  • Il occupe 80 % de la page.
  • Il possède une marge de gauche de 20 %.
  • Le premier contenant flex affiche une image appuyée sur la gauche avec du texte à droite.
  • Le second contenant flex affiche du texte et une image collé à la marge de droite.
  • Chaque contenant-flex occupe 48% de la largeur du conteneur.
  • Notons que ce code est introduit directement dans le code HTML de cette page.
Style de ce premier contenant-flex : « flex: 0 0 48%; align-self: auto; border: 1px solid blue; border-radius: 10px; padding: 5px ». Avec en premier une image d’une sculpture de sable en devenir au parc La Fontaine ( avec le style + style= » float: left; margin: 0 0 1em 1em; » ) et suivi du présent texte.
Style de ce deuxième contenant-flex : « flex: 0 0 48%; align-self: auto; border: 1px solid yellow; border-radius: 105px; padding: 5px ». Avec du texte à gauche et une image à droite ( de Léonard Cohen ) ayant les attributs de style suivants : style= »float: right; margin: auto; ».
Sur deuxième ligne et
Sur une troisième ligne.

 





 

Pour en savoir plus
• Description des archives de la collection Robert Ascah
• Description des archives de la collection Raynond Dufort
• Bibliographie
• Cahier souvenir Le Parc La Fontaine à travers le temps
• Historique du Parc La Fontaine
• Chroniques du parc La Fontaine
• Autres ressources

Bref historique du Plateau

  • Villages fondateurs
  • Quartiers actuels : Plateau, Mile-End et Milton Park
  • Origine des noms
  • Carte

Voici la photo de Léonard Cohen qui est aussi la photo fixe de l’entête de cette page.
Il faut informer le champs « Header Image Replacement HTML (★Plus) » avec l’URL de cette photo.

URL absolu : src=« http://plateau.webfactional.com/wp-content/uploads/c.png » alt= »Leonard Cohen » height= »240″ width= »1440″
Leonard Cohen

URL relatif : src=« /wp-content/uploads/c.png » alt= »Leonard Cohen » height= »240″ width= »1440″
Leonard Cohen




Le slider de Weaver Xtreme (il faut au préalable créer une galerie d’images avec l’extension Weaver Slider Posts) :::

Le shortCode est show___slider name=louis-001-fader avec 3 secondes entre chaque image :

Sanctuaire du Saint-sacrement
i
f
slider image
c

Le shortCode est show___slider name=louis-001-slider avec 3 secondes entre chaque image :

Sanctuaire du Saint-sacrement
i
f
slider image
c

 
Test : un clic sur cette image provoque l’affichage de la page sur « Allons au parc La Fontaine » dans une nouvelle fenêtre :


Test : un clic sur cette image provoque l’affichage de la page sur « Allons au parc La Fontaine » dans une nouvelle fenêtre :




Logo de la Société d'histoire du Plateau-Mont-Royal 2
Logo de la Société d'histoire du Plateau-Mont-RoyalLogo du CanadaLe Plateau-Mont-RoyalCaisse populaire Desjardins du Plateau-Mont-Royal

Logo de la Société d'histoire du Plateau-Mont-Royal 120x40 sans SHP

20171022 code-pied-de-page.txt Flex à déposer dans le champ footer/…

Projet financé par
Logo du Canada
Bibliothèque et Archives Canada
Contributions :
Le Plateau-Mont-Royal
Caisse populaire Desjardins du Plateau-Mont-Royal

 

Projet financé par
Logo du Canada
Bibliothèque et Archives Canada
Contributions :
Le Plateau-Mont-Royal
Caisse populaire Desjardins du Plateau-Mont-Royal
Logo de la Société d'histoire du Plateau-Mont-Royal 120x40 sans SHP

Contact | Webmestre | Connexion

Centre de services Communautaires du Monastère       4450, rue Saint-Hubert, local 419       Montréal (Québec) H2J 2W9       Téléphone : (514) 563 – 0623
Copyright © 2017.     Société d’histoire du Plateau-Mont-Royal.     Tous droits réservés.