Pb d'affiachage en fonction de l'écran

Bonjour à tous,

J'ai actuellement cette page web qui fonctionne parfaitement sur mon écran en 4/3 , mais si je change d'écran et prends un 16/9e il y a de fortes chance pour que l'affichage ne s'effectue pas correctement. Que faudrait il faire à ce code pour empêcher que celui-ci ne varie en fonction de l'écran ?

De plus quel que soit le navigateur l'affichage s’effectue parfaitement au centre de l'écran, mais pas sous internet explorer, l'affichage se fait sur le bord supérieur. que faudrait il faire pour y remédier ?


voici le code lien

merci à tous pour l'aide ..
Modifié par le_schti (09 May 2016 - 16:40)

je ne vois pas de difference avec IE 11.

Pour les tailles en vw, peut-etre se servir de calc() pour eviter une fonte trop petite .
par exemple

html {
  font-size: calc(0.3vw + 12px); /* au lieu de 1vw*/
}

Ensuite #page-td peut passer en flex comme tu l'utilise déjà.
http://codepen.io/gc-nomade/pen/ZWwqQp

gcyrillus a écrit :
je ne vois pas de difference avec IE 11.

Pour les tailles en vw, peut-etre se servir de calc() pour eviter une fonte trop petite .
par exemple

html {
  font-size: calc(0.3vw + 12px); /* au lieu de 1vw*/
}

Ensuite #page-td peut passer en flex comme tu l'utilise déjà.
http://codepen.io/gc-nomade/pen/ZWwqQp

Chez moi sur IE11 l'ensemble se trouve "coincé" sur le bord supérieur de la fenêtre et non pas en plein centre verticalement comme sur chrome ou firefox

pour la fonte c'est une idée je vais voir si c'est pertinent pour ce que je souhaite obtenir

Pour l'utilisation de flex, est ce que cela me permettrait de figer le nombre de case en largeur ?

merci pour ton aide

Utiliser flex dans mon #page-td ne m'apporte rien, la structure telle qu'elle est faite me convient parfaitement. C'est simplement qu'en fonction de l'affichage écran, ce damier se retrouve à une position " autre", décalé vers le bas

quelqu'un aurait une solution pour pouvoir tester cette page en fonction de différentes résolutions d'affichage ?

merci

pour flex et fixer le nombre de case, alors c'est du % qu'il te faut et pas EM. ensuite, pour le carré, il te faudra une imbrication supplémentaire, car la technique du padding-top pour faire un carré ne fonctionne pas sur un enfant direct d'une boite en flex.

Ton IE11 est t-il à jour ?

Pour le font-size, la logique veut que les textes restes lisible , a toi de voir comment tu veut gerer ça, il y les mediaqueries aussi.

Bonne fin de jourrnée, merci

Oui lorsque je fais Windows update je n'ai pas de maj pour IE11 donc j'en conclu que j'ai la dernière version 11.0.9600.18282

Pour la suite je vais essayer de comprendre ce que tu me dis, je ne suis pas expert en développement loin de là . en particulier pour l'histoire du carré qui ne fonctionne pas sur un enfant direct de boite flex

étonnant pour IE, ton codepen fonctionne parfaitement chez moi.

pour le carré. voici un exemple ou le pseudo sert d'agrandisseur, le padding vertical exprimé en % prend la largeur de sa balise comme reference. padding-top ou padding-bottom de 100% = 1 carré, il suffit de changer cette valeur pour changer le ratio.

http://codepen.io/gc-nomade/pen/VagReo

Pour le nombre d’élément par lignes, voici un exemple a 33% avec une imbrication : http://codepen.io/gc-nomade/pen/dMarYE une grille de sudoku. 9element avec 9 enfant chacun. et un min-width pour empêcher d'avoir une grille trop petite.

bonne soirée/journée

c'est impressionnant de complexité dans le code, mais de simplicité dans la quantité de celui-ci. Jamais je n'aurais été capable de faire cela.
Je vais regarder attentivement tout ce que tu as fait là, et essayer de bien comprendre.

Merci beaucoup pour ton aide et l'apport de tes connaissances, je reviens vers toi si il y a 1 ou 2 choses que je n'ai pas compris (en espérant qu'il n'y aura qu'1 ou 2 chose )