27859 sujets

CSS et mise en forme, CSS3

J'ai une page composée de deux menus, un de chaque côté de la page, et un canevas qui est modifié par les menus (c'est une application de retouche d'image). Actuellement, cela est implémenté comme une flexbox nowrap avec une toile prise en sandwich entre deux divs.

Les seules choses qui m'importent sont

-La toile doit conserver le rapport d'aspect
-La toile doit être aussi grande que possible pour s'adapter à la zone vide entre les menus
-Les éléments ne doivent pas déborder horizontalement

Actuellement, la flexbox semble donner mes problèmes:
-la propriété de rapport d'aspect définie pour l'image est ignorée et est écrasée à des tailles de fenêtre normales
-le conteneur flexible semble dépasser la limite droite de la page

Je n'ai pas besoin d'une boîte flexible, ni d'un élément ou d'un style particulier, tant que la toile est grande et non déformée, et que tout s'intègre parfaitement sur la page sans débordement vertical ou horizontal. (Je peux définir une hauteur/largeur maximale pour le canevas avec js, donc ce n'est pas un problème.)
Modérateur
Bonjour,

Sans code, c'est de la devinette. Il y a une infinité de problèmes possibles selon ce qu'il y a dans ton html et ce qu'il y a déjà dans ton css.

C'est quoi le html ? Une balise div (pourquoi pas une balise nav puisque c'est un menu) suivie d'une balise canvas suivi d'une balise div (pourquoi pas là-aussi une balise nav puisque c'est un menu, ou peut-être encore mieux une balise menu) et c'est tout ?

Amicalement,
Modifié par parsimonhi (25 Sep 2022 - 21:33)
Modérateur
Bonjour,

Un exemple minimal de ce que j'ai compris de tes contraintes : https://jsfiddle.net/parsimonhi/4L1pfuxr/

On peut faire varier la largeur de la fenêtre (il faut "déplacer" avec la souris le trait qui sépare le html du css). Le canvas s'agrandit ou se réduit en gardant ses proportions.

Si on réduit la largeur de la fenêtre, on met une limite à 150px pour le canvas. En deçà de cette limite, l'ensemble va déborder de la fenêtre puisqu'il n'y a plus assez de place.

Si on agrandit la largeur de la fenêtre, on ne met pas de limite. Le canvas s'agrandit même s'il dépasse sa taille d'origine (que j'ai mis à 600x400 mais ça pourrait être ce qu'on veut).

EDIT: autre version sans balise div, mais avec des balises menus. Ça simplifie encore un peu le html : https://jsfiddle.net/parsimonhi/m3hagdc0/

EDIT2: autre version avec un menu de gauche avec beaucoup d'éléments. Mettre une largeur minimale au canvas ne suffit plus. On encapsule le canvas dans une autre balise pour avoir plus de liberté pour styler la partie centrale (j'ai mis une balise main, mais ça aurait pu être autre chose) : https://jsfiddle.net/parsimonhi/6ep8ms5b/

Amicalement,
Modifié par parsimonhi (25 Sep 2022 - 22:30)