Alignement supérieur et texte vertical

Bonsoir,

J'ai créé un menu dont les rubriques sont verticales avec alignement à droite

transform: rotate(-90deg);
text-align: right;
margin-top:280px;

A ce stade, tout est ok.

Ensuite, je souhaite tout simplement ajuster la position de mes rubriques en hauteur avec une valeur fixe, soit :

margin-top:280px;

Ça fonctionne normalement , sauf si j'étire la fenêtre de mon navigateur et dans ce cas, la hauteur varie automatiquement comme si j'avais défini une valeur responsive de type "em" ou "vw", ce que je ne souhaite pas.

Je m'y suis épuisé plusieurs heures sans trouver de solution.

J'ajoute que si je replace le texte à l'horizontale, aucun pb.

C'est donc bien le CSS de mon texte vertical

transform: rotate(-90deg);

que je ne sais pas positionner à une hauteur fixe.
Modifié par goudurisc (29 Jun 2019 - 03:01)

Il ne fait pas une journée à rester devant son ordi à répondre à ce genre de question tordue mais si vous avez une piste je suis chaudement preneur

salut,

c'est normal, les éléments du menu sont naturellement disposés en bloc et prennent donc automatiquement toute la largeur de la page. Lorsque tu fais varier la largeur de ta fenêtre, celle de tes éléments varie aussi et change donc "visuellement" de position.
Il faudrait ajouter un display: table pour fixer cela.

Ok, merci pour cette piste mais j'avais bien intégré la dimension responsive pour ce qui concerne la largeur et donc, la répartition de mes blocs de rubriques en fonction de la largeur écran mais le pb concerne essentiellement l'alignement fixe en fauteur.

J'ai tenté les principales options de display, y compris "display:table", le margin-top, le padding-top, en px (et % et vm et em...), mais sans succès.

Bon après, je ne souhaitais pas noyer le débat d'entrée, mais je travaille avec un metteur en page (WPbakery) dont les blocs sont contrôlés par css. Logiquement, ça ne change pas énormément en résultat, mais dans le cas présent, je dois l'intégrer.

D'autant que le pb n'est présent que si le texte est vertical, et c'est une première pour moi.

Tu devrais joindre un code complet de ce que tu as.
Je ne sais pas si tu as vraiment saisi la subtilité de la chose mais lorsque tes éléments sont en rotation, leur disposition dans le flux ne varie pas et sont en display:block par défaut ce qui leur fait occuper toute la largeur disponible. Quand tu fais varier la largeur, celle de tes éléments varient également et te donne l'impression qu'elle changent de place alors que ce n'est pas le cas.

Exemple 1 (en block)

Exemple 2 (en table)

Merci beaucoup pour tes réponses et le temps que tu as pris pour ces deux petits exemples concrets !!

Ça m'amène aussi à repenser mon menu plus classiquement, soit par liste li, car je reconnais que j'ai travaillé ce menu par blocs séparés dans mon metteur en page WPbakery. Je pensais que ce serait plus simple pour gérer un menu vertical.

Je ne peux pas trop aborder ici les questions de WPbakery car on sortirait du cadre CSS pur.
Je n'ai pas non plus évoqué le fait que chacun de mes items de menu comporte une image différente en background top, soit à droite de mes items, et qui suppose un retrait en margin pour le texte afin qu'il ne superpose pas à l'image.

Bien entendu, je sais que si je passais par une solution tout image, le pb serait vite réglé mais l'intérêt de maintenir un menu en html reste encore significatif.

Bref, je m'y remets dès que possible.

Bonsoir,

Je me permets de revenir avec mes pb d'alignement de texte après rotation à 90°

Cette fois, il ne s'agit pas de menu mais de simples titres que je souhaite aligner en haut et à gauche (Cf. capture de la bonne position).

Le projet de site : voir les titres verticaux (sous le slider) ICI

En vertical, je ne contrôle plus rien. Je peux positionner un titre en bricolant quelques propriété mais mon CSS ne permet pas de positionner tous mes titres quand ils sont différents (plus longs, sur deux lignes...)

Mon code actuel :

.row h1 {
	transform: rotate(-90deg);
	position: absolute;
}

J'ai testé avec pas mal de propriété (display, margin...) mais impossible de caler tous mes titres en haut à gauche, un peu désespérant.
Modifié par goudurisc (23 Jul 2019 - 11:45)

Après de nouveaux test, le meilleur résultat que j'obtiens est avec

.row h1 {
	transform: rotate(-90deg);
	display: table;
	text-align: right;
	margin-top: 100px;
}

Mais depuis mon site test ICI on constate que la position haut et gauche diffère un peu entre les titres qui ont une longueur différente.
Modifié par goudurisc (23 Jul 2019 - 11:45)

Bon, je me réponds à moi-même et je viens de trouver une solution avec le CSS qui n'intègre aucune propriété de position mais juste la hauteur+largeur de mon bloc texte soit :

.row h1 {
	transform: rotate(-90deg);
	text-align: right;
	width: 240px!important;/*Position gauche*/
	height: 240px!important;/*Position haut*/
}

Je n'ai pas compris le principe mais ça fonctionne