27801 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
ça faisait tellement longtemps... et comme d'habitude, après avoir galéré pendant 1 semaine et plus d'une dizaine d'heures , j'ai pensé à alsacréations!
ma pages https://delaplacem.fr/loisirs.htm contient un css style2.ccs
quand je veux y accéder, ma feuille css ne se charge pas et j'ai un failed to load ressources 404 et un mixed content

et ma page se transforme en un gros pavé noir avec des lettres rouges...

ces fichiers proviennent d'un site que j'ai fait migrer chez un hébergeur sécurisé.

Pouvez vous m'exp upload/1615916020-24987-erreur-chargement-https.jpg liquer ce que je dois faire?
merci d'avance
Michel
Salut,
À la vue de ton message d'erreur ça vient du fait que tu charges ta font Google Fonts Lato dans https. Il faut donc que tu changes l'url d'import pour un protocole https au de http.
C'est dans ton fichier https://delaplacem.fr/css/demo.css
Modifié par MatthieuR (18 Mar 2021 - 23:06)
Bonjour MatthieuR ,
et merci d'avoir pris un peu de ton temps pour aider un bricoleur de 70 ans...

voilà donc le texte du demo.css concernant le la police en question

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
font-weight: normal;
font-style: normal;
}

body {
background: #34495e;
}

.container > header,
.codrops-top {
color: #fff;
font-family: 'Lato', Arial, sans-serif;
}

et si j'ai bien compris, c'est au moment de ce chargement que ça plante.
j'ai rajouté un s derrière le http et le problème pourrait être résolu ...
depuis j'ai travaillé un peu sur le sujet et j'ai des pages de structure identique qui fonctionne sans cette modification...

mais si j'ai bien compris, c'est là que sont chargées les polices utilisées dans le script du menu , et si je pouvais m'en passer, ce serait aussi bien...

puis-je supprimer directement cette ligne @import et remplacer cette police lato dans tous les éléments qui suivent par une police de mon choix, par exemple le comic MS ou autre Verdana ...

mais là , ça devient un peu compliqué pour moi :
@font-face {
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
font-weight: normal;
font-style: normal;
}

si j'ai été clair, je préfèrerais utiliser un code CSS simple pour ne pas avoir à "tripatouiller" ensuite dans les codes du menu de chaque page, qui sont pour moi incompréhensibles...

Merci pour ton aide
Michel
Salut,
Alors en effet tu as résolu le problème du "Mixed content" (le problème de charger des ressources non https dans un contexte http).

Les lignes `@font-face` concernent des icônes et il y a un souci sur le chargement des ces fichiers .woff, .ttf et autres. Je pense qu'ils ne sont pas sur le serveur ou bien au mauvaise endroit.

Si tu veux utiliser d'autres polices de caractères, tu peux procéder de la même manière que pour Lato, via des fonts sur Google Fonts. Il y a un choix très grand.
`@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);` permet de charger la police et ensuite dans ton code tu peux l'utiliser comme ça :

.element {
    font-family: 'Lato', sans-serif;
}
Bonjour et merci pour tes explications...

Par moment, le problème se renouvelle... c'est le cas aujourd'hui...
et pour moi la solution c'est de charger mes polices directement...

je vais donc essayer de remplacer cette police bêtement par une autre, au besoin en créant un répertoire font et en y mettant une autre police

il n'y a que cette ligne ,@import dans le css et le css ne charge que ce lato...

Je reviens dans quelques jours... Smiley ravi
Bonjour

encore 3 heures et j'ai enfin compris TOUT ce qui se passait!

téléchargement de la police lato, création d'un dossiers fonts et plus besoin d'aller télécharger dans googleapis

modification du démo.css qui ne sert qu'au menu ... il y avait dans ce css un body avec la couleur du background...

modification de toutes mes pages css concernées par ce menu.
déplacement des css qui étaient mal placés et allait chercher les images des boutons dans le Dossier css du menu.... pas d'images dans ce dossier!

encore quelques heures et je pourrai fermer le site de free trop pollué par des pubs mail php, etc

Je reconnais qu'il y aurait beaucoup à faire pour simplifier tout cela, mais les journées sont trop courtes...

merci encore