Bonjour,
Bvztian1 a écrit :
En effet, c’est une des erreurs que je n’arrive pas à résoudre, l’autre étant que, depuis mon desktop avec chrome et ie, les éléments dans ma balise body s’affichent comme je le veux avec la typo « yantramanav » alors que sur le dekstop de ma coloc qui utilise safari, ainsi que sur mon iPhone, les éléments dans body s’affichent avec la typo garamond, celle que j’utilise seulement pour le h1 ( Bastien Bilheux ).
Pour les polices de caractères, c'était un coup de bol si ça marchait sur certaines machines.
J'avais la même chose (une police unique ressemblant à "EB Garamond Extrabold" mais qui n'était pas celle-là exactement), que ce soit sur Chrome, Firefox ou Safari.
J'ai modifié la feuille de style comme ci-dessous, et ça me semble mieux marcher.
1) Je fais un @import des polices depuis le site de google dans la feuille de style (comme ça, on est sûr que ça va marcher même si c'est un peu plus lent). Ta déclaration dans ta feuille de style actuelle @font-face ne concerne que "yantramanav". Je n'ai pas cherché à la faire fonctionner (j'imagine que les fichiers de cette police sont bien sur ton serveur, mais est-ce bien le cas ? et où sont les fichiers pour "EB Garamond Extrabold" ?). Note que si tu testes sur une machine où ces polices sont déjà installées, ça va marcher même sans @import ou @font-face. Et du coup, en testant sur une telle machine, tu n'as pas l'assurance que ton code marchait vraiment.
2) J'ai spécifié comme valeur de font-family "yantramanav" au lieu de "yantramanav light" ou "yantramanav thin" ou "yantramanav medium" (je n'ai pas trop cherché à approfondir, mais ce que tu as mis ne marche pas du tout chez moi). J'ai aussi ajouté des font-weight appropriés (j'ai mis font-weight:100 pour "yantramanav thin" et font-weight:400 pour "yantramanav medium" dans le style.css de la page d'accueil. Il faudrait faire la même chose dans les autres feuilles de style. Pour "yantramanav light", il faudra sans doute mettre font-weight:300.
3) Dans les feuilles de styles des pages secondaires, il faut aussi faire un @import (ou un @font-face si tu arrives à le faire fonctionner un jour).
4) J'ai aussi trouvé (dans les feuilles de style des pages secondaires) une petite erreur concernant la spécification de la propriété height pour .img3 (il faut mettre height:234 au lieu de height="234").
5) J'ai aussi trouvé (dans les feuilles de style des pages secondaires) un "{color:#000;
background-color:#FAFAF1
}" qui traine et qu'on ne sait pas à quoi ça correspond.
6) dans le html de la page d'accueil, le <link> pour le menu accordéon est en bas de page. Il faudrait qu'il soit dans la partie <head> de la page (même si les navigateurs s'en sortent quand même, autant faire les choses comme il se doit).
Je n'ai pas vraiment vérifié le reste.
Au total, ça fait ça :
1) pour style.css de la page d'accueil
EDIT: j'ai finalement trouvé pourquoi j'avais une police qui était "presque" comme "EB Garamond Extrabold". Si l'on veut que ce soit la police provenant du site de google qui soit prise en compte, il faut déclarer dans les feuilles de style font-family:"EB Garamond"; au lieu de font-family:"EBGaramond Extrabold";
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@800&family=Yantramanav:wght@100;300;400&display=swap');
body {
color: black;
background-color: #FDF7EE;
background-size: contain;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
min-width:320px;
}
.h1
{
font-family:"EB Garamond";
color: #888;
font-size:2em;
text-decoration:none;
text-align:center;
}
.h1:hover
{
font-family:"EB Garamond";
color:#000;
font-size:2.1em;
text-decoration:none;
text-align:center;
}
.contacttest
{
writing-mode: vertical-lr;
text-orientation: sideways;
text-align:left;
font-family:"yantramanav";
font-weight:100;
color: #888;
font-size:1.8em;
text-decoration:underline;
position:absolute;
vertical-align:middle;
top:43%;
left:4%;
}
.contacttest:hover
{
writing-mode: vertical-lr;
text-orientation: sideways;
text-align:left;
font-family:"yantramanav";
font-weight:400;
color: #000;
font-size:2.1em;
text-decoration:underline;
position:absolute;
top:43%;
}
.instagram
{
writing-mode: vertical-rl;
text-orientation:sideways;
text-align:right;
font-family:"yantramanav";
font-weight:100;
color: #888;
font-size:1.8em;
text-decoration:underline;
position:absolute;
vertical-align:middle;
top:40%;
right:4%;
transform:rotate(180deg)
}
.instagram:hover
{
writing-mode: vertical-rl;
text-orientation: sideways;
text-align:right;
font-family:"yantramanav";
font-weight:400;
color: #000;
font-size:2.1em;
text-decoration:underline;
position:absolute;
top:40%;
}
2) pour menuaccordeon.css
#menu-accordeon {
padding:2.8em;
margin:0;
list-style:none;
text-align:center;
}
}
#menu-accordeon ul {
padding:0;
margin:0;
list-style:none;
text-align:left;
}
#menu-accordeon li {
border-radius:none;
margin-bottom:auto;
box-shadow:none;
border:none;
}
#menu-accordeon li li {
max-height:0;
overflow: hidden;
transition:all .5s;
border-radius:0;
background: none;
box-shadow: none;
border:none;
margin:0;
}
#menu-accordeon a {
display:block;
text-decoration: none;
color: #888;
padding: 5px 0;
font-family:"Yantramanav";
font-weight:400;
font-size:2.6em;
text-align:center;
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
font-size:1.8em;
}
#menu-accordeon li:hover {
background:none
}
#menu-accordeon li li:hover {
background: none;
}
#menu-accordeon ul li:last-child {
border-radius: none;
border:none;
}
#menu-accordeon li:hover li {
max-height: 5em;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in
}
#menu-accordeon a:hover {
display:block;
text-decoration: none;
color: #000;
padding:5px 0 ;
font-family:"Yantramanav";
font-weight:400;
font-size:2.8em
}
Amicalement,
Modifié par parsimonhi (03 Nov 2020 - 16:12)
