28172 sujets

CSS et mise en forme, CSS3

[Résolu] Largeur de <div>

Bonjour et bonne année à tous
J'ai ajouté un message à la page d'accueil de https://www.alma-musica.net avec 

.message.active {
		display: table;
		background:lightyellow;
		color:black;
		width:60em;
		max-width:60vw;
		padding:1em;
		border:1px solid gray;
		border-radius:0.5em;
		position:fixed;
		top:2em;
		left:50%;
		transform:translateX(-50%);
		text-align:justify;
		z-index:1000;
	}

Sur Safari/iOS tout se passe comme si la directive max-width:60vw; n'était pas prise en compte: le message prend toute la largeur de l'écran (et même plus)
Une idée pour contourner ce problème?
Merci de vos conseils
Modérateur
Et l'eau,

Quels sont les intérêts de mélanger les unités de mesure, d'un texte justifié, d'un display table, d'utiliser le em (dans le cas de width) ?
Modérateur
Bonjour,

Apparemment, avec un display:table, max-width semble être effectivement ignoré par safari (et ça ne date pas d'aujourd'hui), et ça a l'air d'être un bug.

Un display:block au lieu d'un display:table semble régler le problème.

Ceci étant, y a quand même des spécifications (certes obsolètes) comme par exemple à https://www.w3.org/TR/CSS2/visudet.html#min-max-widths qui disent que :

In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

Ça peut expliquer ! (je n'ai pas fait une enquête exhaustive, c'est juste une piste)

Amicalement,
Meilleure solution
niuxe a écrit :
Et l'eau,

Quels sont les intérêts de mélanger les unités de mesure, d'un texte justifié, d'un display table, d'utiliser le em (dans le cas de width) ?

Réponses:
1) div.message est un conteneur. Son contenu varie d'une version à l'autre, il peut donc contenir n'importe quoi.
display:table c'est s'assurer qu'il s'ajustera à son contenu quel que soit le contenu

2) Le site est rendu responsive par 

@media screen and (max-width:1024px) {
	html {font-size:1.7vw;}
}
@media screen and (max-width:705px) {
	html {font-size:12px;}
}

C'est à dire que la taille des caractères varie entre 12 et 17px. Exprimer les tailles en em permet d'assurer une bonne homogénéité entre texte et conteneurs.

3) max-width en vw permet d'éviter que le message déborde de l'écran

4) text-align:justify; parce que par défaut les <div> sont en text-align:left mais ici je tiens à ce que le texte soit justifié
J'avoue que moi aussi j'ai tendance à mixer des unités de mesure fixes et des unités liées au viewport pour les mêmes raisons que Papy. Et c'est très efficace.
Modifié par Olivier C (02 Jan 2021 - 08:56)
Sujet clos
Aller à