Problème en css Fermé

Question

Bonjour, Alors j'ai un problème, je suis débutant en codage et je réalise un site web pour un proche mais je m'embrouille dans mes positionnements : quand je réduit la page web en largeur, les éléments ne s'adaptent pas à la taille comme je le faisait pour d'autres sites, il se font "engloutir" par la page comme voir les photos dessus. J'ai essayé avec @media mais ça ne change pas le problème, je pense qu'il y a un souci avec flexbox voici mon code : Fête de Perles

Fête de Perles

Et mon code css : /* CSS Général */ @font-face { font-family: 'helloregular'; src: url('hello-webfont.woff2') format('woff2'); src: url('hello-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body{ background-color: #E1CE9A; font-family: "helloregular"; margin: 0; padding: 0; } @media all and (max-width: 1024px){ } /* CSS de l'en-tête */ header{ display: flex; background-color: #F15AB2; height: 85px; } /* CSS du menu */ #menu{ display: flex; font-size: 1.9em; margin-right: 50px; margin-left: 100px; position: relative; top: 90px; } li{ margin-right: 30px; } a{ list-style: none; color: black; text-decoration: none; } a:hover{ text-decoration: underline; } /* CSS du titre et logo */ #titre{ font-size: 2.7em; position: relative; bottom: 15px; left: 400px; white-space: nowrap; } #logo{ position: relative; left: 20px; top: 10px; } .logodroit{ position: relative; top: 20px; left: 200px; } #separation{ position: relative; top: 140px; right: 565px; width: 500px; height: 120px; } Pouvez-vous m'éclairer svpp

Janken · Answer

Salut,
@media ce sont les media queries qui consistent à faire plusieurs mises en pages selon les critères que vous pouvez définir donc à faire plusieurs mise en pages selon différentes tailles ou plutôt paliers de dimensions.

Le problème principal de votre mise en page c'est que vous utilisez des tailles en pixels.
Une solution simple est de tester vos mises en pages avec différents résolutions(ou même réduire la taille de la fenêtre du navigateur, il y a aussi des options dans les outils de développement qui permettent directement ça sans avoir à changer la résolution: exemple aperçu pour mobile), vous verrez qu'avec des dimensions en pixels ça ne peut correspondre qu'à votre taille d'écran.
Hors un site étant fait pour tout le monde vous n'avez pas la bonne façon d'aborder la mise en page.


Pour tout les positionnement et dimensions vous oubliez le pixel et toute unité absolue(la taille ne change pas en fonction de l'écran) pour des valeurs relatives.

Les valeurs relatives sont par exemple le % et em (pour les textes par exemple).
En effet si vous décalez une position de "n" pixels vers la droite ça correspond pour une seule taille/résolution d'écran donc ça ne correspond pas pour tout le reste. Cela s'appelle un bug d'affichage.
En donnant une position en % vous décalez quelque soit la taille que peut avoir l'écran en largeur (et la fenêtre ouverte de l'utilisateur , celui ci n'a pas à être forcé de regarder un site avec le navigateur dimensionné à tout l'écran). 
Exemple:

.pas-bon-decalage{
margin-left:200px;}/* ça correspond donc à rien de réel ces 200 pixels ou plutôt votre écran si vous avez le navigateur ouvert en grand*/
.bon-decalage{
margin-left:8%;
}/* 8% c'est toujours 8% de la taille maximum(100%) disponible*/

/******** un autre exemple avec em *******/

p.une-seule-ligne{
height:1.5em;
background-color:rgba(255,200,100,0.56);
}/*
Aura l'avantage de s'adapter en hauteur quelque soit la taille du texte. Si une personne qui a une moins bonne vue veut agrandir la taille du texte le bloc 'p' le contenant s'adaptera à la taille du texte.
em ( le quadratin d’imprimerie) indique le rapport 1em = 100% de la hauteur du texte; donc 1.5em = 150% de la taille. Impossible de faire ça avec une hauteur en pixel qui par définition ne peut pas varier.
*/


Donc revoyez votre façon d'écrire le CSS pour déterminer les dimensions en proportions et non avec des valeurs incohérentes pour le reste du monde (qui n'a pas le même écran, une barre de menus dans le navigateur d'une autre taille etc...).

Cet article peut vous aider:
https://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html

Comme ils indiquant d'ailleurs évitez la propriété "position" si vous ne maîtrisez pas complétement CSS et la mise en page.
Dans l'exemple de votre code cela peut-être fait simplement en utilisant les marges pour le positionnement.

.logodroit{
 position: relative;
 top: 20px;
 left: 200px;
}/* bof vous mettez en position relative et sortez donc du flux normal, si vous devez changer l'élément précédent(auquel il est relatif) vous devrez faire à nouveau tous les positionnement: complexité et difficulté du code totalement inutile*/

#logodroit{
padding:1em 0 0 8%;/* les valeurs sont bien sûr à changer c'est arbitraire*/
}/* 
résultat écrit en une ligne qui va décaler à partir de la marge interne haute de 1em et gauche de 8%. Bien sûr ce n'est qu'à titre d'exemple et vous devrez par exemple jouer sur d'autres valeurs selon le HTML voire ajouter des éléments invibles containers si vous avez besoin d'une marge ou autre astuce
*/

En bref vous êtes débutant je vous conseille de faire quelques cours/tutos sur CSS pour acquérir les bonnes méthodes car je ne sait pas où vous avez appris le CSS mais les unités et valeurs proportionnelles c'est quand même la base.
Compléments avec le lien sur le positionnement que je vous ait donné qui est plutôt généraliste.
Il y a bien d'autres méthodes comme float ou en utilisant position mais mieux vaut attaquer ça en connaissant d'abord les manières les plus simples et rapides qui permettent de positionner un élément et qui seront les plus courantes.
Comme jouer sur les marges par exemple mais vous pouvez aussi modifier les valeurs display pour changer le comportement par défaut d'un élément.

Les flex-box c'est encore autre chose et rien ne justifie leur utilisation ici.
Par exemple pour placer un élément au centre prenant 80% de la largeur vous pouvez simplement l'entourer de 2 éléments sur la même ligne(en display:inline donc) de 10% chacun.
10%+80%+10% c'est bien centré quelque que soit les tailles de l'écran.
Bien sûr avec les marges puisqu'en rajoutant 2 marges une à gauche et une à droite on arrive au même résultat en définissant que l'élément prends 100% de largeur(width:100%)mais tout dépends du contexte. Ici on peut utiliser la valeur border par exemple pour l'élément central avec la 1ère méthode pour dessiner un cadre apparent tandis qu'on est obligé de ruser(et se compliquer la vie) pour le même résultat avec uniquement margin ou padding.

Les  flex-box servent à tout autre chose puisqu'ils servent à distribuer l'espace entre les éléments (un peu comme la justifaction avec du du texte) en fonction des contenus.
Donc utilisez les flex-box qui sont plus complexes et long à écrire uniquement quand les méthodes plus simples ne peuvent le faire (et plus rapide à écrire/modifie et lire ) et pour ce pourquoi elles sont faites.

glegros66 · Answer

D'accord, merci infiniment

Problème en css

2 réponses

Discussions similaires