A voir également:
- Position d'élément avec css
- Ma position - Guide
- Position gps - Guide
- Partage de position whatsapp - Guide
- Comment envoyer sa position par sms - Accueil - Téléphones
- Impossible de copier car cet élément est trop volumineux pour le format du volume - Forum MacOS
2 réponses
Salut,
oui utilisez des valeurs relatives comme le pourcentage (ou le qyadratin d'imprimerie pour les textes (em)).
Une valeur absolue (valeur fixe en pixel) ne correspond à rien car différentes résolutions d'écrans(taille en largeur X hauteur) sont possibles...
C'est encore plus le cas lorsque le site est visualisé sur des écrans d'appareils mobiles(tablettes, téléphone....).
Il y a aussi les medias queries qui permettent de faire différentes mises en pages selon les tailles d'écran mais déjà rien qu'avec des pourcentages on peut faire quelque chose qui sera un peu standard.
Bien sûr tester différentes résolutions (et navigateurs)est une bonne méthode aussi pour savoir à quoi ressemble la page.
A contrario IL NE FAUT JAMAIS FAIRE UNE MISE EN PAGE UNIQUEMENT POUR SON PROPRE ÉCRAN : c.à.d. faire un site pour que tout le monde puisse avoir le même affichage.
L'exemple que vous donnez s'appelle un bug d'affichage(l'écran n'affichera que le site comme il est sensé être uniquement pour les rares cas de personnes ayant la même résolution que vous et dans des circonstances précises qui varient car le navigateur peut avoir des menus plus ou moins large ou l'utilisateur peut simplement redimensionner la taille de la fenêtre du navigateur. D'ailleurs c'est un non test plus rapide que changer la résolution : redimensionner la fenêtre du navigateur pour voir si la mise en page reste la même.
En faisant comme vous avez fait vous allez à l'encontre de la première(et une des plus importante règle) : L'accessibilité.
Ce sont les manières de construire une page, un design et les fonctionnalités qui existent pour qu'elle soient accessibles au plus grand nombres. Un affichage correct c'est la première accessibilité.
Il n'existe pas une règle précise pour positionner et placer des éléments en CSS, en fait il existe des centaines de méthodes. En utilisant absolute vous décidez simplement que l'élément est hors du flux normal et sera positionné en fonction du coin haut et gauche de l'écran. Ce n'est donc pas le plus souple ni le plus simple.
Prenons par exemple une mise en page en 3 colonnes. Sans avoir à sortir du flux si vous positionnez des éléments côtes à côtes sur la même ligne et que vous attribuez 32% de largeur à chaque élément ce seront 3 colonnes de mêmes tailles(3X32%= 96% + les marges éventuelles). HTML permettant d'imbriquer autant d'éléments les uns dans les autres on peut diviser chacune des 3 colonnes en autant de portions que l'on veut. Faire la même chose en absolute est simple mais simplement inutile et plus complexe puisque qu'il faudra que chaque élément ait une position déterminé par rapport à la gauche et le sommet de la page(puisque hors du flux qui fait simplement se suivre les éléments les uns après les autres dans l'ordre dans lesquels ils sont écrits).
L'exemple inverse de absolute est le positionnement flottant(propriété CSS 'float'). ça consiste à indiquer que l'élément 'flotte' par rapport à l'autre soit à gauche soit à droite. Donc il se placera à gauche ou à droite de l'élément qui le précède. C'est souvent utilisé pour les menus garantissant que plusieurs éléments d'à peu près même dimensions soient tous à la suite. Sans donner de dimensions(comme avec l'exemple de es 3 colonnes avec des valeurs en %) les éléments resteront toujours consécutifs les uns aux autres ce qui est bien pratique par exemple pour un menu ou regrouper n'importe quel éléments. Les dimensions auront donc leur taille par défaut(par exemple un élément de texte la taille nécessaire au texte) ou la valeur que leur donne(si on donne 100% de la largeur comme valeur ça présente un menu en colonne de 100% de l'espace total du container qui les regroupent ils sont).
Ce n'est pas le plus simple et utiliser des valeurs fixées n'est clairement pas à faire.
Un peu plus d'infos ici:
https://www.google.fr/search?q=positionnement+CSS
oui utilisez des valeurs relatives comme le pourcentage (ou le qyadratin d'imprimerie pour les textes (em)).
Une valeur absolue (valeur fixe en pixel) ne correspond à rien car différentes résolutions d'écrans(taille en largeur X hauteur) sont possibles...
C'est encore plus le cas lorsque le site est visualisé sur des écrans d'appareils mobiles(tablettes, téléphone....).
Il y a aussi les medias queries qui permettent de faire différentes mises en pages selon les tailles d'écran mais déjà rien qu'avec des pourcentages on peut faire quelque chose qui sera un peu standard.
Bien sûr tester différentes résolutions (et navigateurs)est une bonne méthode aussi pour savoir à quoi ressemble la page.
A contrario IL NE FAUT JAMAIS FAIRE UNE MISE EN PAGE UNIQUEMENT POUR SON PROPRE ÉCRAN : c.à.d. faire un site pour que tout le monde puisse avoir le même affichage.
L'exemple que vous donnez s'appelle un bug d'affichage(l'écran n'affichera que le site comme il est sensé être uniquement pour les rares cas de personnes ayant la même résolution que vous et dans des circonstances précises qui varient car le navigateur peut avoir des menus plus ou moins large ou l'utilisateur peut simplement redimensionner la taille de la fenêtre du navigateur. D'ailleurs c'est un non test plus rapide que changer la résolution : redimensionner la fenêtre du navigateur pour voir si la mise en page reste la même.
En faisant comme vous avez fait vous allez à l'encontre de la première(et une des plus importante règle) : L'accessibilité.
Ce sont les manières de construire une page, un design et les fonctionnalités qui existent pour qu'elle soient accessibles au plus grand nombres. Un affichage correct c'est la première accessibilité.
Il n'existe pas une règle précise pour positionner et placer des éléments en CSS, en fait il existe des centaines de méthodes. En utilisant absolute vous décidez simplement que l'élément est hors du flux normal et sera positionné en fonction du coin haut et gauche de l'écran. Ce n'est donc pas le plus souple ni le plus simple.
Prenons par exemple une mise en page en 3 colonnes. Sans avoir à sortir du flux si vous positionnez des éléments côtes à côtes sur la même ligne et que vous attribuez 32% de largeur à chaque élément ce seront 3 colonnes de mêmes tailles(3X32%= 96% + les marges éventuelles). HTML permettant d'imbriquer autant d'éléments les uns dans les autres on peut diviser chacune des 3 colonnes en autant de portions que l'on veut. Faire la même chose en absolute est simple mais simplement inutile et plus complexe puisque qu'il faudra que chaque élément ait une position déterminé par rapport à la gauche et le sommet de la page(puisque hors du flux qui fait simplement se suivre les éléments les uns après les autres dans l'ordre dans lesquels ils sont écrits).
L'exemple inverse de absolute est le positionnement flottant(propriété CSS 'float'). ça consiste à indiquer que l'élément 'flotte' par rapport à l'autre soit à gauche soit à droite. Donc il se placera à gauche ou à droite de l'élément qui le précède. C'est souvent utilisé pour les menus garantissant que plusieurs éléments d'à peu près même dimensions soient tous à la suite. Sans donner de dimensions(comme avec l'exemple de es 3 colonnes avec des valeurs en %) les éléments resteront toujours consécutifs les uns aux autres ce qui est bien pratique par exemple pour un menu ou regrouper n'importe quel éléments. Les dimensions auront donc leur taille par défaut(par exemple un élément de texte la taille nécessaire au texte) ou la valeur que leur donne(si on donne 100% de la largeur comme valeur ça présente un menu en colonne de 100% de l'espace total du container qui les regroupent ils sont).
Ce n'est pas le plus simple et utiliser des valeurs fixées n'est clairement pas à faire.
Un peu plus d'infos ici:
https://www.google.fr/search?q=positionnement+CSS
Modifié le 18 mars 2020 à 03:10
<!DOCTYPE html> <html> <head> <style type='text/css' rel='stylesheet'> body{text-align:center;margin:0; padding:0;} /* 3 colonnes mais ça marche pour 2, 8 ou le nombre que l'on veut*/ article{ border:1px solid red; display:inline-block; } .trois-cols{width:100%;border:1px solid blue;} .gauche{width:20%;} .milieu{width:40%;} .droite{width:38%;} /* positionnement flottant , un exemple de menus*/ nav{ width:24%; margin-left:1em; padding-right:0.4em; border:2px grey outset; background-color:#000; } a.menu{ color:white; float:left; width:100%; background-color:rgba(255,200,120,0.3); border:2px inset silver; border-radius:1.2em; } a.menu:hover{ color:blue; background-color:rgba(40,200,255,1); } </style> </head> <body> <h1>3 colonnes en %</h1> <section class='trois-cols'> <article class='gauche'>gauche</article> <article class='milieu'>milieu</article> <article class='droite'>droite</article> </section> <h1>menu flottant : 2 de ces moteurs de recherches sont connus pour le respect de la vie privée dans l'utilisation des données de recherche</h1> <nav> <a class='menu 'href='http:google.com'>google</a> <a class='menu 'href='http:qwant.com'>qwant</a> <a class='menu 'href='http:duckduckgo.com'>duckduckgo</a> <br style='clear:both;' /><!-- important de supprimer le flottement à la fin --> </nav> </body> </html>La référence officielle des règle d'accessibilités(et les prochaines avancées dans le domaine) en anglais:
https://www.w3.org/WAI/fundamentals/
https://www.w3.org/WAI/tips/developing/
description générale en français:
https://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web#Accessibilit%C3%A9_des_contenus_ou_accessibilit%C3%A9_universelle_?