18041 sujets

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

Que dois-je faire ?

J'ai un devoir à rendre et la première question m'intrigue.
Je ne sais pas du tout ce que je dois faire.
Voici le libellé :

Sur écran 1920x1200 on ne visualise que le début de la page, comme ceci :
upload/1647541694-62242-screen-1.jpg

Sur un écran 1152x768, cela donne :
upload/1647541786-62242-screen-2.jpg

La page entière est la suivante :
upload/1647541913-62242-screen-3.jpg

Largeur du conteneur principal : 1024 px :
A vous de trouver les autres tailles en vous aidant des copies d'écran (screen 1 à 3) et de la taille des images.

Je ne comprends pas ce que je dois faire.
Vous le savez, vous ?
Modérateur
Bonsoir,

J'imagine que les images et polices te sont fournies. (à ranger avec ta page html , en sous dossier c'est plus simple pour s'y retrouver plus tard.)

Tu montes ton squelette de page html (doctype, meta, link vers au moins un fichier de style, etc,...) Tu pourras y revenir plus tard .

Sur le screen, tu peut commencer par identifier les différentes portions (et surement reconnaitre certaines parties de tes cours) , contenus de la page et monter une architecture HTML adéquate entre <body> et </body> :header,main,footer, ... img, nav, h1, h2, p, etc ...

Une fois ta structure faites , tu peut commencer à la remplir avec des textes et images.

Si, dans tes cours, les resets CSS ont été vus, tu peut commencer par là, si les polices sont fournies, les appliquées.

La première étape peut-être, c'est de donner une largeur (max?) de 1024px au(x) conteneurs principaux et les centrés , sauf le pied apparemment Smiley cligne , leur mettre une bordure, une ombre ou un fond de couleur pour voir où ils se trouvent, et appliquer l'image de fond sur HTML ou body avec un background-size ,( j'imagine que vous avez vu les gradient si l'image n'a pas de dégradé), A partir de la tu auras un premier visuel à comparer à ta maquette et tu pourras passer à l'application de tes differents cours portions par portions.

En fait, la difficulté , c'est de commencer, il faut te mettre dedans et y aller, c'est en forgeant que l'on devient forgeron Smiley cligne
Le forum reste ouvert pour t'aider au fur et à mesure, n’hésite pas a jeter et rejeter un œil à la section tutoriel d'Alsacréations, tu y trouveras de nombreux exemples et conseils.

Tu évoques tes cours, il est difficile de t'aider ou te réorienter sans savoir où tu en est (ou ce que n'as pas été vu en cours et donc à ne pas utiliser comme: grid ou pas grid , flex ou pas flex, ... ? )

Cdt
Salut gcyrillus.

Ce n'est pas du tout la réponse que j'attendais. Je ne demandais pas comment réaliser cette page web, je l'ai déjà reproduite en HTML/CSS (je suis débutant). Ma difficulté c'est que je ne parviens pas à trouver les tailles des images en fonction des différentes résolutions des écrans. Je ne sais pas comment procéder. Je demandais si l'un de vous savait comment s'y prendre. Pour ma part, je n'ai jamais abordé cette problématique dans mes cours.
Modifié par ObiJuanKenobi (18 Mar 2022 - 08:22)
Modérateur
gcyrillus a écrit :
... et appliquer l'image de fond sur HTML ou body avec un background-size ...

Cdt


Est-ce cette règle que vous n'avez pas encore abordée?
Car aux vus de tes screens, les autres images ne semblent pas être redimensionnées.
Non ! Je ne sais pas comment trouver la taille des images en me basant sur les différentes résolutions des écrans.

Si un internaute utilise un ordinateur avec une résolution de 1920x1200, les images importés dans la page web doivent faire une certaine taille pour qu'elles correspondent aux exemples que j'ai donné au début. Et mon problème c'est que je ne sais pas comment calculer cette taille.

C'est ce que j'ai compris mais évidemment, je peux me tromper.
Modifié par ObiJuanKenobi (18 Mar 2022 - 17:50)
Modérateur
J'ai bien compris que tu avais un soucis et je me répète en une dernière tentative :
gcyrillus a écrit :
... et appliquer l'image de fond sur HTML ou body avec un background-size ...
Cdt

as tu vu cette règle background-size , sinon quelles sont les règles que vous avez vu et que vous devez utilisé ?

cdt
Oui, j'ai vu la propriété background-size mais je ne crois pas que la solution soit là. Qu'est-ce qui te fait dire le contraire ?
Modérateur
et bien parce que cette image va se redimensionner en fonction de la largeur de son conteneur , quand au choix de l'image à charger, si tu as vu les mediaquerie, sert t'en pour switcher pour une image avec une résolution adapter à la largeur de l'écran.
exemple avec une image de ratio différent pour bien voir le switch : https://jsfiddle.net/gnL8u2w3/

Tes screens ne montre, à priori, que l'image de fond (body ou html) changeant de taille selon la résolution.
OK, je vais tester la propriété background-size, bien que j'ai déjà livré le devoir en indiquant que je ne comprenais pas la question. Par contre, je n'ai pas encore vu la partie responsive avec les media queries.

Le prochain cours portera sur le PHP. J'espère comprendre le développement car je n'en ai jamais fait, seulement un peu de HTML et CSS.
J'ai testé la propriété background-size et elle est mieux que la propriété background-cover qui faisait prendre plus de place à l'image de fond.

Cependant, cela ne résout pas la question qui est de trouver les autres tailles en fonction des différentes résolution des écrans et des tailles des fichiers proposés par le devoir.

J'ai livré le devoir, je saurai dans quelques jours la réponse à ce mystère et je la donnerai ici même.
Modérateur
ObiJuanKenobi a écrit :
Cependant, cela ne résout pas la question qui est de trouver les autres tailles en fonction des différentes résolution des écrans et des tailles des fichiers proposés par le devoir.

Pour les background, ce sera à traiter via @media ou voir ou en est image-set https://forum.alsacreations.com/topic-27-84271-1-Background-et-srcset.html (parmi d'autres sujets similaires)

pour les images, il y a entre autre
- CSS object-fit (un peu similaire à background-size) qui ne chargera pas de fichier spécifique selon l’écran
- HTML l'attribut srcset et size https://forum.alsacreations.com/topic-2-88656-1-Resolu-Img-srcset-et-sizes.html (parmi d'autres sujets similaires)
- HTML picture + source et attributs https://forum.alsacreations.com/topic-27-81464-1-Resolu-Picture-ou-image-responsiveY-je-ne-men-sors-pas.html (parmi d'autres sujets similaires)
- ...

ObiJuanKenobi a écrit :

J'ai livré le devoir, je saurai dans quelques jours la réponse à ce mystère et je la donnerai ici même.

Oui, nous sommes curieux Smiley smile

Cdt
Sujet clos
Aller à