*{ font-family: Verdana, sans-serif; } body, html{ margin : 0; height:100%; overflow-x: hidden; background: #EEEEEE; /* Couleur de fond de l'écran d'accuei - Gris extrêmement léger */ } /* MEDIA PAR DEFAUT => ECRAN ORDINATEUR STANDARD JUSQU'A 1920 pixels de LARGEUR */ /* MEDIA PAR DEFAUT => ECRAN ORDINATEUR STANDARD JUSQU'A 1920 pixels de LARGEUR */ /* MEDIA PAR DEFAUT => ECRAN ORDINATEUR STANDARD JUSQU'A 1920 pixels de LARGEUR */ /* Classe conteneur qui contient l'IMAGE DE FOND D'ECRAN */ .conteneur{ /* Propriétés applicables à l'élément lui-même */ position: static; /* Se positionne dans le "flux normal de la page", à l'intérieur de son parent (ici BODY). On ne peut pas l'ajuster avec les propriétés top, left, bottom et right.*/ min-height:100%; /* IMPORTANT *** Avec height:100% le fond d'écran ne couvrait pas tout l'écran sur les SMARTPHONE */ /* PROBLEME *** Cela dit, avec min-height:100%; le bas de la page sur les ordinateurs est en-dessous du bord de l'écran */ /* PROBLEME *** Et si je ne mets min-height:100% que pour les médias SMARTPHONE, alors çà ne fonctionne pas bien sur le SMARTPHONE de Mireille (APPLE SE) */ width: 60%; margin-left: 20%; background-image: url("index_LO_image_L1120xH933.gif"); background-repeat: no-repeat; background-position: center; background-size: cover; /* L'image BACKGROUND-IMAGE est redimensionnée pour prendre toute la taille de l'élément CONTENEUR */ /* Propriétés applicables aux éléments contenus */ justify-content: center; /* Pour que les éléments imbriqués (TITRE et LIGNE-DE-LIENS) soient répartis équitablement dans l'élément CONTENEUR. */ display: flex; flex-direction: column; align-items: center; } /* On dispose quatre LIGNES dans le CONTENEUR (on a changé la séquence pour que la ligne de lien (LIGNE03) apparaisse en premier Chacune des quatre LIGNES occupent 90% de la largeur du CONTENEUR * La LIGNE03 contient une LIGNE-DE-LIENS * La LIGNE01 contient une peinture + un titre + une peinture * La LIGNE01bis contient LE PAYSAGE CEREBRAL * La LIGNE02 contient une peinture + une photo de LO + une peinture * La LIGNE04 contient CATALOGUE RAISONNE */ .ligne{ /* Propriétés applicables à l'élément lui-même */ width: 90%; /* max-width: 930px; */ /* Propriétés applicables aux éléments contenus */ display: flex; flex-direction: row; justify-content: space-between; } .ligne01{ /* Propriétés applicables aux éléments contenus */ align-items: start; /* Les premiers et derniers éléments sont collés aux extrémités. Les autres sont répartis équitablement */ /* margin-top:+10vh; /* Pour décoller la LIGNE01 du bord supérieur de l'élément CONTENEUR */ margin-top:+1vh; /* Pour décoller UN PEU MOINS la LIGNE01 du bord supérieur de l'élément CONTENEUR */ } .ligne01 > img:not(.photo-lo){ /* Ce sélecteur CSS s'applique aux images (sauf photo-lo) qui sont à l'intérieur de l'élément LIGNE01 */ /* Propriétés applicables aux éléments contenus */ /* width:20%; /* On spécifie la largeur des images à l'intérieur de la ligne01 en % de la largeur de la ligne01 */ width:25%; /* On augmente la largeur des images du haut de 20 à 25%, le 19/06/2023 */ margin-bottom:-10vh; /* On force les images agrandies (le 19/06/2023) à descendre sous le bas de la ligne 01 */ } .conteneur_titre_LO { width: 40%; /* On réduit la largeur du titre de 50 à 40% pour pouvoir agrandir les images */ } .titre_paysage-cerebral { margin-top:0vh; /* valeur prédédente -1vh */ text-align: center; /* font-family: "Segoe UI"; */ font-family: Verdana; font-size: 1.6vw; /* valeur prédédente 1.9vw */ font-style:normal; font-weight: 500; /* valeur prédédente 600 */ margin-bottom:+2vh; } .ligne02{ /* Propriétés applicables aux éléments contenus */ align-items: end; /* Les premiers et derniers éléments sont collés aux extrémités HAUTES et BASSES. Les autres sont répartis équitablement */ } .ligne02 > img:not(.photo-lo) { /* Ce sélecteur CSS s'applique aux images (sauf photo-lo) qui sont à l'intérieur de l'élément LIGNE02 */ /* Propriétés applicables à l'élément lui-même */ /* width:25%; /* On spécifie la largeur des images à l'intérieur de la ligne01 en % de la largeur de la ligne01 */ width:30%; /* J'augmente la taille de l'image le 19/06/2023. La largeur devient la même que celle de la photo de LO */ /* margin-bottom:+10vh; /* On force les images à monter de 10 vh par rapport au positionnement normal de la LIGNE02 à l'intérieur de l'élément CONTENEUR */ margin-bottom:+1vh; /* On force les images à monter de 15 au lieu de 10vh suite à l'agrandissement des images de la ligne 01 */ } .ligne04{ /* Propriétés applicables à la ligne "Catalogue raisonné */ margin-top:+2vh; text-align: center; /* font-family: "Segoe UI"; */ font-family: Verdana; font-size: 1.6vw; /* valeur prédédente 1.9vw */ font-style:normal; font-weight: 500; /* valeur prédédente 700 */ } /* Titre MICHELINE LO 1930 - 2003 */ h1{ /* Propriétés applicables à l'élément lui-même */ /* width: 50%; /* C'est la largeur du TITRE par rapport à son contenant LIGNE01 */ width: 100%; /* On prend toute la largeur du contenur ligne_titre_LO */ height: max-content; background: rgba(0, 0, 0, 0.10); /* Couleur de fond du titre Micheline LO - Noir translucide. Réduction de 0.25 à 0.10 le 22/02/2022 */ /* Propriétés applicables aux éléments contenus */ color: white; /* La couleur du TEXTE du titre */ text-align: center; /* font-size: 4vw; */ font-size: 2.5vw; /* On réduit la taille du texte à 2,5 % de la largeur du VIEWPORT */ font-weight: 500; /* On peut faire varier cette propriété de 100 en 100. A 700 on est BOLD, à 400 on est NORMAL. Ici on a pris un peu plus que NORMAL */ padding: 5px; /* Mis à 20 par Rémi */ margin-top:0vh; } .photo-lo{ /* Propriétés applicables à l'élément lui-même */ position: static; margin-top:-0vh; /* margin-bottom:+10vh; */ margin-bottom:+1vh; /* On augmente la marge basse de l'image pour la faire remonter (le 19/06/2023) suite àl'agrandissement des images de la ligne 01 */ width: 30%; } /* La LIGNE-DE-LIENS */ .ligne-de-liens{ /* Propriétés applicables à l'élément lui-même */ position: static; /* Elément imbriqué dans CONTENEUR. Il est donc centré dans CONTENEUR (justify-content: center), par défaut. * Se positionne par rapport à son parent (ici CONTENEUR), indépendemment du flux normal de la page. On peut l'ajuster avec les propriétés top, left, bottom et right. */ /* background: rgba(255, 255, 255, 0.25); /* Couleur de fond de la LIGNE-DE-LIENS transparente */ width: 100%; height: 10px; /* margin-bottom:+10vh; /* Pour remonter la LIGNE-DE-LIEN par rapport au bord inférieur de la LIGNE */ margin-top:+2vh; margin-bottom:+2vh; /* Propriétés applicables aux éléments contenus */ display: flex; /* Tous les éléments directement contenus dans ce conteneur LIGNE-DE-LIENS vont alors automatiquement devenir des éléments flexibles * Par défaut la valeur flex correspond à un élément de niveau BLOCK. Sinon on aurait spécifié display: flex-inline */ flex-direction: row; /* row (ligne) est la valeur par défaut. on la met quand même pour la clarté du code */ align-items: center; /* si ligne 60 pixel de haut, c'est aligné au miliue en hauteur */ justify-content: space-between; /* indique la façon dont l'espace doit être réparti entre et autour des éléments (ici LINKS) selon l'axe principal d'un conteneur flexible (ici horizontal) * space-between; Le bord du premier est aligné sur le début du conteneur et la fin du dernier est alignée sur la fin du conteneur * space-around; À chaque extrémité, entre le bord du conteneur et le premier/dernier élément on a la moitié de l'espace appliqué entre chaque élément * space-evenly; Tous les éléments sont séparés par le même espace * stretch; Les éléments dimensionnés avec 'auto' sont étirés afin de remplir le conteneur */ padding: 2vh 0; /* 2 padding en aht et en bas et 0 horizontal */ font-size: 1.2vw; /* valeur précédente 1.9 */ font-style: normal; font-weight: 500; } /* Les petites boîtes LIENS qui vont vers PEINTURES, DOCUMENTS, EXPOSITION, ACQUEREURS (mais pas choix de la langue (voir links_gris)). */ .links{ /* Propriétés de l'élément lui-même (la boîte vide) */ position: static; /* Valeur par défaut de position. La boîte s’insère dans le flux normal de la page */ /* background: rgba(0, 0, 0, 0.75); */ /* Propriétés applicables aux éléments contenus (dans la boîte vide) */ padding-left:0px; padding-right: 0px; padding-top: 4px; padding-bottom: 4px; } /* Propriétés du TEXTE des LIENS contenus dans les boîtes LINKS */ .links > a{ /* La notation links > indique que le style doit être appliqué à tous les éléments qui sont des enfants de l’élément link * Ici le lettre a est le nom de l'élément a qui est un lien défini entre les balises et * C'est ici que l'on définit l'affichage du texte (couleur, alignement, fonte, etc.) inscrit dans les boîtes LINKS */ /* Propriétés de l'élément lui-même */ text-decoration: none; /* pour éviter que le TEXTE du lien soit souligné par le navigateur */ text-align: center; color: black; font-weight: 3 00; font-family: Verdana; /* font-family: "Segoe UI"; */ padding: 0px; /* Pour ajouter 1pw au début et à la fin du texte */ } .links > a:visited{ /* Ce que l'on fait avec un lien qui a été visité *** dans ce cas on force la couleur à rester noire */ /* Propriétés de l'élément lui-même */ color: black; text-decoration: none; } /* La petite boîte de LIENS qui permet de choisir la langue. */ .links_gris{ /* Propriétés de l'élément lui-même (la boîte vide)*/ position: static; /* Valeur par défaut de position. La boîte s’insère dans le flux normal de la page */ background: rgba(0, 0, 0, 0.10); /* Couleur de fond du titre Micheline LO */ /* Propriétés applicables aux éléments contenus (dans la boîte vide)*/ padding-left:0px; padding-right: 0px; padding-top: 4px; padding-bottom: 4px; } /* Propriétés du TEXTE des LIENS contenus dans les boîtes LINKS_GRIS */ .links_gris > a{ /* La notation links > indique que le style doit être appliqué à tous les éléments qui sont des enfants de l’élément link * Ici le lettre a est le nom de l'élément a qui est un lien défini entre les balises et * C'est ici que l'on définit l'affichage du texte (couleur, alignement, fonte, etc.) inscrit dans les boîtes LINKS */ /* Propriétés de l'élément lui-même */ text-decoration: none; /* pour éviter que le TEXTE du lien soit souligné par le navigateur */ text-align: center; color: white; font-weight: 3 00; font-family: Verdana; /* font-family: "Segoe UI"; */ padding: 4px; /* Pour ajouter 4pw au début et à la fin du texte */ } .links_gris > a:visited{ /* Ce que l'on fait avec un lien qui a été visité *** dans ce cas on force la couleur à rester blanche */ /* Propriétés de l'élément lui-même */ color: white; text-decoration: none; } /* TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE */ /* TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE */ /* TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE *** TABLETTE */ @media Screen and (max-width: 1080px) { /* Lorsque la largeur de la fenêtre (ici BODY) est inférieure à 1080 px */ .links{ /* Propriétés applicables aux éléments contenus */ font-size: 1.0vh; font-weight: normal; } /* SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE */ /* SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE */ /* SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE *** SMARTPHONE */ @media Screen and (max-width: 880px) { /* Lorsque la largeur de la fenêtre (ici BODY) est inférieure à 880 px */ .conteneur{ /* Propriétés de l'élément lui-même */ background-image: url("index_LO_image_L400xH1000.gif"); background-size:cover; /* L'image prend toute la taille du conteneur en se rognant du bon côté (pas de risque de bord blanc */ width: 100%; margin:0; /* pour que le CONTENEUR colle au bord de BODY sur un smartphone */ /* Propriétés applicables aux éléments contenus */ justify-content: space-between; } .ligne > img:not(.photo-lo){ display:none; } h1{ width: 90%; font-size: 6vh; /* margin: 0; */ margin-top:0vh; /* On annule une partie de la MARGE de 10vh spécifiée LIGNE01 pour les écrans d'ordinateurs */ margin-bottom:5vh; } .ligne01{ /* Propriétés applicables aux éléments contenus */ align-items: center; /* Alignement HAUT-BAS au CENTRE. Sur ce média SMARTPHONE il n'y a que le TITRE dans la LIGNE01 */ margin-top:+10vh; /* Pour décoler la LIGNE01 du bord supérieur de l'élément CONTENEUR */ justify-content: center; /* Alignement GAUCHE-DROITE au CENTRE. Sur ce média SMARTPHONE il n'y a que le TITRE dans la LIGNE01 */ /* flex-direction: column-reverse; Pas nécessaire parce qu'il n'y a qu'un seul élement TITRE da,s la LIGNE01 */ } .photo-lo{ margin:0; width:60%; margin-top:0vh; /* Pour séparer l'élément LIGNE-DE-LIENS de l'élément PHOTO-LO */ margin-left:20%; } .ligne03{ /* Propriétés applicables aux éléments contenus */ order: 3; /*pour mettre ce troisème bloc en position 3*/ justify-content: center; /* Alignement GAUCHE-DROITE au CENTRE. Sur ce média SMARTPHONE il n'y a que l'élément LIGNE-DE-LIENS dans l'élément LIGNE03 */ } .ligne04{ /* Propriétés applicables à la ligen "Je peins le paysage cérébral */ font-size: 4vw; /* idem à Micheline LO */ } .ligne-de-liens{ display: flex; /* Tous les éléments directement contenus dans ce conteneur (c’est-à-dire tous les enfants directs) vont alors automatiquement devenir des éléments flexibles * Par défaut la valeur flex correspond à un élément de niveau BLOCK. Sinon on aurait spécifié display: flex-inline */ background: rgba(255, 255, 255, 0.50); /* Couleur de fond de la LIGNE-DE-LIENS transparente */ width: 50%; height: 30vh; margin-top:5vh; /* Pour séparer l'élément LIGNE-DE-LIENS de l'élément PHOTO-LO */ margin-left: 0%; flex-flow: column wrap; /* column (colonne) doit être spécifié. La valeur par défaut est row */ align-items: center; font-size: 2vh; } .links{ /* flex: 0 0 3%; /* Dans le code HTML les liens LINKS sont définis dans des DIV à l'intérieur de la DIV appelée LIGNE-DE-LIEN * Comme les liens sont à l'intérieur d'un contenur FLEX, ici LIGNE-DE-LIEN, il faut les définir chacun comme des FLEX ITEM */ width: 40vw; height: 3vh; background: rgba(0, 0, 0, 0.75); text-align: center; font-size: 2vh; font-weight: bold; } .links > a{ margin: 0; height: 5vh; color: white; } .links > a:visited{ color: white; } }