Problème redimension image/ media queries
gotto -
Je suis nouveau sur ce forum, j'espère ne pas me tromper de section. Alors voila, je suis entrain d'apprendre le développement web en autodidacte, j'ai deja fini la partie HTML, ca s'est bien passé, et la je suis sur le CSS. Ca commence à se corser un petit peu.
- Problème numero 1:
Lorsque je mets une image en background et que je réduis ensuite la fenetre de ma page navigateur, l'image ne s'adapte pas, ou mieux encore, elle s'adapte jusqu'à un certain point uniquement si je redimensionne en diagonale (pas si je fais de bas en haut ou de gauche a droite).
J'avais décidé de passer outre...erreur!
Voici des captures d'ecran de la page et du code.
Merci d'avance pour votre aide :)
- Problème numero 2:
J'arrive donc à la partie suivante sur les medias queries et la ca se complique davantage. Lorsque je veux faire du responsive tout est complètement décalé sauf le menu.
- Problème redimension image/ media queries
- Windows media player - Télécharger - Lecture
- Media creation tool - Télécharger - Systèmes d'exploitation
- Image iso - Guide
- Ps3 media server - Télécharger - Divers Réseau & Wi-Fi
- Vlc media player - Télécharger - Lecture
5 réponses
Salut
comme vous apprenez n'hésitez pas à varier les cours et tutos et les recherches sur des points précis que vous voulez approfondir il en existe un paquet pour tout les niveaux.
Certains vous permettent plus de précisions sur un point ou un autre une fois les bases acquises
Utilisez aussi un manuel de références des propriétés CSS(+HTML si besoin) comme ici pour être sûr de la syntaxe et rôle de ce que vous utilisez
https://www.w3schools.com/css/css_background.asp
https://www.w3schools.com/csSref/css3_pr_background-size.asp
Si vous avez des décalages (aussi appelés bug d'affichages) il faut vous tourner vers des explications sur le positionnement en CSS
https://duckduckgo.com/?q=positionnement+CSS
D'ailleurs évitez les valeurs de dimensions "fixe" comme celles utilisant px ou pt quand vous pouvez puisque ces dimensions ne peuvent pas s'adapter aux différentes tailles/résolutions d'écrans pour remplacer par des valeurs en % ou autre unité proportionnelle
Cela oblige à repenser votre mise en page (avec des proportions) mais ne pas le faire c'est se limiter à son seul écran alors qu'u site doit s'adapter à l'utilisateur(la Web Accessibilité voir le WAI qui édite les normes et recommandations officielles pour plus de détails)
ps pour tester différents affichages vous avez la possibilité avec les outils de développement des navigateurs les plus courants de définir un affichage sur différentes résolutions et appareils mobile
Je vous remercie pour les liens, je vais me pencher la dessus ca va certainement m'aider. Je voudrais aussi avoir votre avis sur le mode d'apprentissage; dois je absolument tout connaitre du CSS, CSS grid et CSS flex avant de passer a javascript?
Oui mais concernant ma question, dois je absolument connaitre sur le bout des doigts CSS et HTML avant ou je peux me contenter uniquement de connaitre les fonctionnalités les plus utilisees? (meme si, etant donné que je suis nouveau, je ne connais pas quelles seraient les fonctionnalites les plus utilisees lol)
Commencez par savoir lire et chercher+apprendre par vous même.
"non " ça me semble clair comme réponse...
Les grid c'est pour faire des grilles et les flexbox des boîtes flexibles en CSS(ou alors on
parle de Boostrap?).
Je ne vois pas ce que vous voulez comme réponse à part si vous voulez faire des grilles ou des boîtes flexibles de les utiliser(ou pas il y a d'autres moyens)
Fonctionnalité de HTML = indiquer les contenus et les décrire(sémantique)
Fonctionnalité de CSS = la mise en page et présentation des contenus HTML + un peu d'interactivité + animations
Fonctionnalité d'un langage de programmation = modeler une réalité ou simulation de tout ce que l'on veut et automatiser le traitement des informations
Dans le cas de JavaScript avec le DOM qui est une représentation virtuelle de la page(HTML pour les contenus et CSS pour la présentation des contenus) on peut donc modifier à volonté et quand on le désire les contenus(HTML) comme la présentation(CSS) et ajouter des fonctionnalités pour peu qu'on en ait à ajouter à la page.
Par fonctionnalité je parle ici de concepts et besoins humains.Faire apparaître une flèche rouge quand on clique sur le bouton aide d'une page est une fonctionnalité puis qu'elle répond à un besoin explicite.
Utiliser grid ou flexbox sont des propriétés CSS qui permettent une de mise en page en grille ou boîtes flexible
Là vous confondez l'intégration web et le développement, les deux sont nécessaires mais 2 approches différentes et deux rôles différents
Intégrer des contenus ou une mise en page c'est ajouter les fichiers et textes de la page ainsi que la mise en page.
"Dessine moi un mouton sur mon site"=> intégrer une image de mouton avec la balise <img>
Développer c'est partir d'une idée ou question pour fournir une réponse et dans ce cas regardez du côté de ce que la programmation et le traitement de l'information propose(front et back end avec les bases de données).
"Je veut gérer mes contacts et rdv de n'importe quel endroit avec un planning qui est facile à mettre à jour"=> développement du système d'information et de l'application qui va gérer les données et l'affichage. L'affichage est HTML Et CSS mais c'est un détail et pas le plus important puisque assez trivial et mieux si les données à afficher sot indépendantes du reste comme et surtout la mise en page = on doit pouvoir changer l'affichage des contenus indépendamment du reste(un peu comme les sélecteurs de classe CSS mais en plus élaboré) ou utiliser la même présentation pour des données différentes.
Et donc tout l'intérêt de l'informatique réside là dedans et permet l'automatisation des traitements.
10 000 utilisateurs sur un site n'ont pas besoin de 10 000 programmes de site même si leurs données personnelles changent chacun va se connecter à la base de données qui renvoie les informations pertinentes et adaptées pour les afficher avec HTML/CSS.
Avec JavaScript c'est la même chose sauf que cela fonctionne sur la page en cours uniquement et les données à traiter par un programme seront celles disponibles sur la page(HTML et CSS en premier lieu). Par exemple déclencher une action lors d'un clic une action c'est tout ce qu'on veut et peut imaginer et si c'est changer la couleur d'un élément de la page dans ce cas changer son CSS est simple.
https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp
bon tu commences à m'enerver. si t'es la pour polluer mon sujet ou pour jouer à l'intelligent c'est pas la peine merci j'ai pas besoin de toi.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionBen non ca me semble pas clair vu que j'ai du reposer la question. Et je la repose encore jusqu'a avoir une reponse claire et nette...
Je vois la différence entre integrateur et developpeur. Mais je vois aussi que les recruteurs qui cherchent des dev front-end demandent tous une maitrise de HTML et CSS en plus de javascript + framework.
D'ou ma question sur le niveau de connaissances a avoir en CSS. Parce que la je me tape du GRID et du FLEXBOX c'est un petit peu barbant donc je voudrais juste savoir si je peux me permettre de passer outre ou non.
Car si c'est le cas je perds pas de temps à me farcir tous les selecteurs CSS, le GRID et le FLEXBOX. Je passe a JS direct.