J'ai un petit souci avec l'affichage de mes pages dans mes fenêtres.
Sur plusieurs prorjets j'ai un "jeu" à gauche entre la page que je code et la taille de la fenêtre, du coup j'ai une barre de scroll qui s'affiche en bas. C'est comme si j'avais défini une width ou que j'avais des éléments qui dépassaient (des images par exemple) alors que ce n'est pas le cas !
Que je définisse margin 0 ou 0 auto j'ai toujours ce même décalage. Changer la taille de la fenêtre n'y change rien non plus.
Est-ce qu'il faudrait forcer une width ?
Voilà la situation en image, je ne suis pas censée avoir cette bande grise entre la barre de scroll à droite, normale celle-ci, et le reste de ma page. Je me suis placée sur le body dans la console de mon navigateur pour que vous puissiez, peut-être, mieux voir.
Voilà les valeurs que j'ai définies pour ma page, je viens de vérifier et je n'ai forcé aucunes width, margin ou border sur le reste du body. En vérifiant avec la console je n'ai rien qui dépasse du body non plus
(j'ai mis une autre capture d'écran dans mon message de départ, peut-être que ce sera plus compréhensible)
Inutile de péter toutes les marges pour tous les éléments surtout pour ceux qui n'en on pas, c'est une mauvaise pratique. Reset ou cas par cas ou utiliser une feuille de style par défaut type normalize.
Idem pour list-style, tous éléments ne prennent pas en compte cette propriété. Indiquer la uniquement sur les éléments qui sont influencé par cette propriété.
Passez votre code au validateur pour voir si il n'y a pas des erreurs de syntaxe. Ce code est insuffisant pour donner une réponse adéquate.
Je partais du principe qu'enlever toutes les marges et les paddings me permettrait ensuite de "m'économiser" quelques lignes pour ne pas avoir à reset au cas par cas. Sur certains codes que j'ai eu à faire j'ai imposé d'office un 0 auto au body pour tout centrer, est-ce que ça pose problème du coup par rapport à l'accessibilité etc ?
Pour le list-style j'ai trouvé ça pertinent de le mettre dans les paramètres "généraux" puisque toutes les listes de mon code n'ont pas de style, est-ce une mauvaise pratique ?
Le "jeu" sur la droite est appliqué à tout le body, c'est l'élément que j'ai inspecté sur ma capture d'écran plus haut. Lorsque je regarde ma page en intégralité, tous les éléments ont la même largeur, rien ne dépasse du body, même les éléments que j'ai pas encore travaillés au css.
En fait, le souci de tout enlever au bazooka comme ça, c'est que tu vas devoir remettre les marges et les paddings à chaque fois que tu en auras besoin, et possiblement perdre les lignes que tu pensais économiser En vrai, assez peu d'éléments ont des marges et paddings dans les feuilles de style par défaut des navigateurs.
Pour list-style : littéralement il n'y a que l'élément li qui en bénéficie, donc pourquoi ne pas le mettre sur li plutôt que * ? (à noter que list-style: none pose des problèmes d'accessibilité, il semblerait… à lire : Removing list styles without affecting semantics.)
Pour ton problème principal : est-ce que tu aurais une page en ligne ? C'est difficile de débugger en ayant si peu de code CSS et aucun HTML, on ne peut pas reproduire chez nous.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
>> . Sur certains codes que j'ai eu à faire j'ai imposé d'office un 0 auto au body pour tout centrer, est-ce que ça pose problème du coup par rapport à l'accessibilité etc ?
Pas à ma connaissance.
Pour le list-style je n'ai jamais vu que l'on utilisait le sélecteur universel pour cela.
ul, ol {
list-style: none;
}
Serait suffisant.
Si on suis votre résonnement on pourrait cibler toutes les propriétés hérités avec le sélecteur universel, ce qu'il ne faut pas faire (voir le premier lien plus haut dans ce message)
Sur votre capture plus haut, on voit dans le style que les marges du sélecteur universel sont écrasées par le style du sélecteur header .header-?????????
Un sélecteur qui à sans doute plus de poids, sans doute! Mais comme vous ne nous transmettez pas le code que vous avez écrit, je suis dans l'incapacité de vous répondre plus avant.
Pour le list-style j'avais effectivement l'habitude de le mettre hors du * mais j'ai vu dans le corrigé de mes exercices que cet élément était à chaque fois dans le *, j'ai pensé que sa place était là lorsque l'on voulait seulement appliqué un list-style:none
En tout cas merci pour vos articles !
Appliquer ce genre de propriétés est donc mauvais dans le *, mais est-ce que le problème est le même si j'applique des propriétés telles que margin:0 ou padding:0 dans le body ?
Je peux vous transmettre mon html en entier et les premières sections de mon css (ou vous préférez le scss ?).
Il me reste encore deux trois sections à travailler en css mais je ne pense pas qu'elles vont changer quelque chose à ce problème, quand je survole le body avec la console rien ne dépasse.
J'ai récupéré ton code et l'ai lancé en local. Je ne reproduis pas le problème Mais on n'a pas les images. Est-ce que tu pourrais poster une page en ligne quelque part, pour qu'on puisse mettre les mains dans le cambouis.
(et grrrr OpenClassrooms qui remplit les codes d'espaces invisibles et insécables, j'ai mis 15 minutes à avoir un html et un css utilisables…)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
J'ai trouvé l'élément qui pose problème, le seul j'espère. C'est ma section-4, j'avais un grid à faire dessus et c'est lui qui dépassait joyeusement du body. En mettant une max-width de 1000px à la section le problème a été réglé visuellement mais quand on passe la souris dans la console on voit que le grid dépasse toujours de la section.
J'ai essayé d'imposer une max-width de 100% au grid, en espérant qu'il prenne du coup 100% du body mais ça n'a pas fonctionné. Est-ce à cause des éléments dedans ? Il me semblait pourtant qu'ils s'adaptaient d'office à la taille de leur contenant.
Sur la console j'ai mis en évidence ma section-4 et j'ai affiché le grid, pour essayer de mieux expliquer mon propos :
Bonjour, je ne sais pas reproduire le problème bien que l’inspecteur des éléments de Firefox m’indique des pour le body, le header, section 2 et 4 des débordements.
Je n’identifie pas le problème décrit dans ce sujet, après analyse du code. Par contre il y a d’autres problèmes
En HTML
Une fermeture de </div> juste après l’ouverture de la section 2.
Les éléments de formulaire doivent êtres dans un formulaire, balise <form>.Tant pour la newsletters que pour la réservation.
L’attribut name du select doit avoir une valeur.
Pour le champ date, erreur dans la valeur de l’attribut max, inversion du mois et du jour.
En CSS
La propriété font-family n’a qu’une valeur dans le cas de la déclaration @font-face.
Pour le sélecteur header nav .nav-logos i il manque l’unité de temps à la valeur de la propriété transition.
Pour les titres de votre page rien ne va.
Vous ne pouvez pas passer des niveaux de titres, si vous indiquez un <h3> vous devez avoir un <h2> qui précède et également un <h1>.
Le H1 c’est le titre de votre page. (en HTML il est possible d’avoir plusieurs H1 par page même si cela est déconseiller en SEO).
Le H2 c’est le sous-titre de votre page.
Le H3 c’est le sous sous-titre etc… Vous ne devez pas utiliser les titres pour leurs tailles par défaut.
Quant au H6 je ne l’ai jamais utiliser.
Vous pouvez analyser cela avec des outil tel que l’extension web développer (onglet information > view document outline). Ce qui donne :
Votre titre « Welcome to The resto » n’est qu’un seul et même titre. Ce n’est pas parce que vous souhaitez avoir des polices différente et sur deux lignes qu’il faut utiliser des balises de titres différentes et de niveaux différents.
> Une fermeture de </div> juste après l’ouverture de la section 2.
Oui c'est une erreur de ma part, j'avais oublié de retirer cet élément après une correction de mon code. Merci
> Les éléments de formulaire doivent êtres dans un formulaire, balise <form>.Tant pour la newsletters que pour la réservation.
Ce sera fait
> L’attribut name du select doit avoir une valeur.
C'est par rapport au back-end ensuite c'est bien cela ?
> Pour le champ date, erreur dans la valeur de l’attribut max, inversion du mois et du jour.
Ce n'est pas une erreur, ma maquette est en anglais (pourtant visible sur tout le code) donc inversion des jours et mois pour les dates.
> La propriété font-family n’a qu’une valeur dans le cas de la déclaration @font-face.
Je n'ai pas bien compris ce point, il faudrait que je mette toutes mes polices dans un seul @font-face ?
> Pour le sélecteur header nav .nav-logos i il manque l’unité de temps à la valeur de la propriété transition.
Effectivement, je ne l'avais pas remarqué puisqu'il avait tout de même une transition, sûrement héritée d'autre part. Je vérifierais
> Pour les titres de votre page rien ne va.
J'ai effectivement pris l'habitude d'utiliser les différents h en fonction de leur taille par défaut, un peu plus pratique à mon goût. J'en prends bien note
> Votre titre « Welcome to The resto » n’est qu’un seul et même titre. Ce n’est pas parce que vous souhaitez avoir des polices différente et sur deux lignes qu’il faut utiliser des balises de titres différentes et de niveaux différents.
J'ai eu vraiment du mal avec ce point, je n'ai pas trouvé sur internet de réponse claire à ce sujet. Comment appliquer deux styles de polices et couleurs à un seul et même titre ? En utilisant le span (j'avoue que j'ai du mal avec cette balise aussi d'ailleurs) ?
J'étais plutôt fière de mon travail dans l'ensemble mais je me rend compte maintenant qu'il est plein d'erreurs... J'ai bien du chemin à faire encore !
> L’attribut name du select doit avoir une valeur.
C'est par rapport au back-end ensuite c'est bien cela ?
Oui mais également du point de vue HTML, cet attribut ne peut avoir de valeur vide.
> Pour le champ date, erreur dans la valeur de l’attribut max, inversion du mois et du jour.
Ce n'est pas une erreur, ma maquette est en anglais (pourtant visible sur tout le code) donc inversion des jours et mois pour les dates.
Si c'est une erreur HTML, cela n'a rien avoir avec le fait que votre site est en anglais ou pas. C'est une norme à respecter dans l'écriture de la date.
"Une chaîne de caractères DOMString qui représente une date au format yyyy-mm-dd (quatre chiffres pour l'année, un tiret, deux chiffres pour le mois, un tiret, deux chiffres pour le jour) ou qui est vide."
> La propriété font-family n’a qu’une valeur dans le cas de la déclaration @font-face.
Je n'ai pas bien compris ce point, il faudrait que je mette toutes mes polices dans un seul @font-face ?
Non, une déclaration de @font-face par nom de police. Vous indiquer trop de valeur pour la propriété font-family, le nom suffis amplement inutile d'indiquer
", sans-serif" en deuxième paramètre.
>> Comment appliquer deux styles de polices et couleurs à un seul et même titre ?
<h1 class="police1">Welcome to <br> <span class="police2">The resto</span></h1>
Vous pouvez l'être, c'est déjà pas mal même si il y a quelques erreurs.
>> J'ai bien du chemin à faire encore !
Oui, mais moi également, je dois toujours me documenter sur les nouveautés. Exemple: certain module CSS4 arrive à maturité et sont implémentés dans les navigateur.
> Non, une déclaration de @font-face par nom de police. Vous indiquez trop de valeur pour la propriété font-family, le nom suffit amplement inutile d'indiquer ",sans-serif" en deuxième partie.
J'avais indiqué le sans-serif en alternative à la police de mon projet, au cas où elle ne s'afficherait pas pour une quelconque raison. J'avais vu ça dans d'autres projets également, comment indiquer correctement une police d'alternative dans ce cas ?
> Exemple des polices
J'avais pensé à faire des classes mais ça ne me semblait pas juste, j'aurai dû au final ! Merci !
Vous avez raison, mais pour la propriété font-family appliquée à un élément. La oui il faut indiquer plusieurs police et terminer par une famille de police générique.
Pas pour la déclaration de @font-face, la propriété font-family ne prends qu'un seul paramètre le nom de la police à laquelle vous allez faire référence plus tard dans votre code.
Cela peut paraitre compliqué car c'est la même propriété qui s'utilise différemment dans un cas ou dans l'autre. Lire :
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)