18041 sujets

Questions générales et questions de débutants

Problème d'affichage du site d'une machine à une autre

Bonjour bonsoir, je suis nouveau dans le domaine du code et je me suis lancé comme challenge, de faire un site "correct" sur le sujet de counter strike.
Aux premiers abords, tout se passe bien. C'est quand, après avoir hébergé le site, je dis à des amis d'aller dessus que je me rend compte en partage d'écran de leur part que l'aspect change totalement d'une machine, d'un moteur de recherche à un autre. Ex : police qui change, <hr> qui se retrouve un coup au milieu et un coup à gauche, etc. etc.

voilà à quoi devrait ressembler le site.

https://www.noelshack.com/2019-09-3-1551289013-2019-02-27-18h23-31.png
https://www.noelshack.com/2019-09-3-1551289014-2019-02-27-18h23-42.png
https://www.noelshack.com/2019-09-3-1551289015-2019-02-27-18h23-54.png
https://www.noelshack.com/2019-09-3-1551289015-2019-02-27-18h24-05.png
https://www.noelshack.com/2019-09-3-1551289013-2019-02-27-18h24-23.png

Lien du site : http://csnoob.alwaysdata.net/ (d'ailleurs, si vous auriez des noms de "bons" hébergeurs, je suis intéressé)
De plus, je serait intéressé par quelques "corrections" par exemple, "vaut il mieux mettre un <p> ou un <div> et pourquoi ?
merci Smiley cligne
Bonjour Hizuoh,

Ce n'est pas ma spécialité, mais tes amis utilisent-ils tous le même navigateur ?
Concernant l'aspect qui change "d'un moteur de recherche à un autre", je ne comprends pas bin, puisque les moteurs pour la plupart ne font de lister les adresses.

Enfin, la balise <P> es de type inline et indique un retour à la ligne, tandis que <Div> est de type "bloc" que l'on peut positionner, avec éventuellement des options de couleur, de taille, de forme, etc.
Modérateur
Bonjour,

Robert44 a écrit :
Enfin, la balise &lt;P&gt; es de type inline et indique un retour à la ligne, tandis que &lt;Div&gt; est de type "bloc" que l'on peut positionner, avec éventuellement des options de couleur, de taille, de forme, etc.


Juste au passage, la balise <p> est de type block tout comme la <div> ( https://www.alsacreations.com/tuto/lire/530-La-structure-des-balises-bloc-et-en-ligne.html ). pour le vérifier tu peux mettre deux balises similaire cote à cote et voir si elles s'affichent l'une en dessous de l'autre ou l'une a coté de l'autre : https://jsfiddle.net/undless/4kL50cdb/

Il y a un sens sémantique derrière le <p> qui signifie "paragraphe". En gros tu peut mettre des balises <p> autour des paragraphes de ton texte (on peut dire que le <p> ne devrait contenir que des éléments inline). Si tu veux un conteneur avec dedans un titre, du texte, des boutons etc, tu peux te tourner vers la <div> ou une <section> par exemple
Modérateur
Sinon pour les changement d'apparence ça peut être plein de choses.

Pour les font qui change par exemple tu a déclaré :
section {
    font-family: fantasy;
}

Mais nul part tu n'as défini cette font avec font-face. Du coup il va chercher sur l'ordinateur de celui qui visualise le site. Si la police est installé il va la trouver, sinon il va en prendre une autre. Pour faire les choses bien et que ca police soit partout regarde cet article : https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html

Pour le <hr> j'en sais rien mais ce doit venir du même genre de problème. Il faut que tu teste sur différents navigateurs et quand on te remonte un bug que tu sache sur quel navigateur pour pourvoir le reproduire chez toi et le corriger.

a écrit :
d'un moteur de recherche à un autre

Hahaha ca ca veut rien dire, tu visualise pas ton site sur google si ? Smiley smile D'un "navigateur" à l'autre tu veux dire ? Ça c'est normal ça s’appelle la compatibilité (et c'est très chiant !). tu peux utiliser des site comme https://caniuse.com/ pour vérifier si ce que tu fais va passer partout ou pas.


Pour l'hébergeur je suis chez OVH pour tout mes projets et franchement j'ai rien a redire j'en suis hyper content : https://www.ovh.com/fr/
Meilleure solution
_laurent a écrit :
Sinon pour les changement d'apparence ça peut être plein de choses.

Mais nul part tu n'as défini cette font avec font-face. Du coup il va chercher sur l'ordinateur de celui qui visualise le site. Si la police est installé il va la trouver, sinon il va en prendre une autre. Pour faire les choses bien et que ca police soit partout regarde cet article : https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html


D'accord, merci Smiley smile je prend note et évolue lentement mais sûrement Smiley cligne .
Le navigateur fait avec ce qu'il a. Si les CSS demandent une police qui n'est pas sur la machine, il prend une autre police qui ressemble. Tu as les solutions suivantes :
- Utiliser des polices vraiment courantes
- Utiliser des polices téléchargeables à partir de ton site
- Utiliser des polices Google

Je t'invite à approfondir font-family, @font-face et si tu es puriste font-size-adjust.

http://stylescss.free.fr/v2-properties/font-family.php
http://stylescss.free.fr/v2-properties/@font-face.php
http://stylescss.free.fr/v2-properties/font-size-adjust.php


Courage !
Sujet clos
Aller à