[Résolu] Positionnement d'un div avec texte vertical

Bonjour,

Les filles ne sont pas douées en géométrie dans l'espace ? J'en suis la preuve. Tant que mon texte est horizontal tout va bien je le tourne à 270° et je suis perdue.

Voici mon problème : un div column qui contient un div text vertical (la partie jaune). Les colonnes sont de largeur différentes et je voudrais que mon texte aille se mettre en "float-right", c'est à dire aille se rapprocher de la bordure droite.

Le site est en local donc je vous mets une image, l'html et la css.
Merci de votre aide !

<div class="column">
<div class="column1">
<div class="text-vertical"><a title="Le studio" href="http://localhost/studiocg/?page_id=37">le studio</a></div>
</div>
<div class="column2">
<div class="text-vertical"><a title="Design global" href="http://localhost/studiocg/?page_id=12">design global</a></div>
</div>
<div class="column3">
<div class="text-vertical"><a title="Références" href="http://localhost/studiocg/?page_id=41">références</a></div>
</div>
<div class="column4">
<div class="text-vertical"><a title="News" href="http://localhost/studiocg/?page_id=39">news</a></div>
</div>
<div class="column5">
<div class="text-vertical"><a title="Contact" href="http://localhost/studiocg/?page_id=43">contact</a></div>
</div>
</div>

.column {
	width:100%;
	display:inline-flex;
	height:500px;
}
.text-vertical {
	color:#ff5715;
	font-size:2em;
	text-align:right;
	position:relative;
	background:yellow;
	width:170px;
	top:80px;
	transform:rotate(270deg);
-ms-transform:rotate(270deg); /* Internet Explorer */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari et Chrome */
-o-transform:rotate(270deg); /* Opera */
}
.column1 {
	width:16%;
	border: 1px solid #adadad;
	margin-right:15px;
	box-shadow: 1px 1px 5px #adadad;
}
.column2 {
	width:20%;
	border: 1px solid #adadad;
	margin-right:15px;
	box-shadow: 1px 1px 5px #adadad;
}
.column3 {
	width:19%;
	border: 1px solid #adadad;
	margin-right:15px;
	box-shadow: 1px 1px 5px #adadad;
}

As tu essayer de faire un reset sur transform-origin :

transform-origin:top right;

?

Ah c'est pas mal ! avec top right, le texte se mettait bien en haut mais entre 2 colonnes. Donc j'ai changé la css comme suit :

.text-vertical {
	color:#ff5715;
	font-size:2em;
	text-align:right;
	background:yellow;
	transform:rotate(270deg);
-ms-transform:rotate(270deg); /* Internet Explorer */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari et Chrome */
-o-transform:rotate(270deg); /* Opera */
	transform-origin:right 140%;

Et j'obtiens ça : j'ai fait un peu au pif donc parfait à droite mais comment remonter un peu le texte vers le haut ?

Merci de ton aide (quelle idée d'écrire verticalement lol)

Un dessin est peut-être plus aisé http://codepen.io/gc-nomade/pen/Achkx
en replaçant avec une marge, négative ou positive adaptée , l’élément , le contrôle est plus aisé.

span {
  display:inline-block;
  background:yellow;
  transform:rotate(-90deg);
  transform-origin:top right;
/* rectifions simplement le decalage induit */
  margin-right:1.2em;/* hauteur du span ou ici de son interligne */

}

Modifié par gc-nomade (25 Jun 2014 - 00:58)

Bonjour vous deux !


J'avais un peu de temps à passer. Je me suis déjà arraché les cheveux sur ce problème de rotation.
Tout est dans le transform-origin, gc-nomade a raison. Il faut juste calculer le bon, mettre en absolute et fixer une hauteur !

J'ai fait un petit fiddle en reprenant ton code et j'ai commenté le css : http://jsfiddle.net/jZJ87/1/


Et par sécurité le css :

.column {
	width:100%;
	display:inline-flex;
	height:500px;
    position:relative;
}
.text-vertical {
	color:#ff5715;
	font-size:2em;
	text-align:right;
	position:relative;
	background:yellow;
    
    /*FIRST you have to position it from the top right*/
    position:absolute;
	top:0;
    right:0;
    /*Give hime a fixed height and width*/
    height:40px;
    width: 200px;
    /*Defin the rotation origin to top right (like the absolute position)*/    
    transform-origin: calc(100% - 20px) 20px 0;
    /*rotate it*/
	transform:rotate(-90deg);
    -ms-transform:rotate(-90deg); /* Internet Explorer */
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari et Chrome */
    -o-transform:rotate(-90deg); /* Opera */

}
.column1 {
	width:16%;
	border: 1px solid #adadad;
	margin-right:15px;
	box-shadow: 1px 1px 5px #adadad;
    position:relative;
}
.column2 {
	width:20%;
	border: 1px solid #adadad;
	margin-right:15px;
	box-shadow: 1px 1px 5px #adadad;
    position:relative;
}
.column3 {
	width:19%;
	border: 1px solid #adadad;
	margin-right:15px;
	box-shadow: 1px 1px 5px #adadad;
    position:relative;
}

Modifié par _laurent (23 Jul 2014 - 09:57)

Merci de vos retours. J'essaie tout ça demain

Pour le décalage vers le haut, pour ne pas simplement ajouter un translate ?

Pas besoin de position, ni de marges négatives ou autres choses douteuses...

Ten a écrit :
Pour le décalage vers le haut, pour ne pas simplement ajouter un translate ?

Pas besoin de position, ni de marges négatives ou autres choses douteuses...

Je propose une marge positive en EM qui s'adapte au rendu de la police, la rien de douteux. On parle ici d'une ligne de texte qui dépend d'un font-size et line-height par défaut ou défini et connu.

Un translate ou un position:relative + une coordonnées , c'est kif kif => déplacement visuel a l'écran.
J''y vois pas de différence en finalité, si ce n'est un filtrage CSS pour les vieux nav qui n'appliques pas transform et qui n'auront pas besoin de replacé le coin bas droit en haut gauche. Si la raison du translate est dans une optique d’amélioration progressive et en plus exprimée en EM plutôt qu'en pixel static ou en approximatif pourcentage, je vote pour bien sur .en plus avec transform on peut multiplier les type de transormation et faire afficher le texte aussi vers le bas transform:rotate(-90deg) scale( -1, -1) translate(100%);

Je suis plutôt contre le transform-origin approximatif en % (la moins bonne des possibilités à mettre en œuvre à mon avis perso) ainsi que les valeurs en pixel ou % trop rigide ou aléatoires .

@ Ten Pour les choses "douteuses" , peut tu développer et argumenter ce que tu entends par là ? (je sens mon margin-right:1.2em; visé , à tord peut-être )
Modifié par gc-nomade (25 Jun 2014 - 16:01)

Bonjour,

Le site est en prod www.cedricgournay.com.
J'ai pris la solution de _laurent, qui fonctionne bien sur Firefox et Chrome mais pas sur IE ni Safari
J'ai ajouté :

	-webkit-transform-origin : calc(100% - 20px) 20px 0;
	-moz-transform-origin : calc(100% - 20px) 20px 0;
	-ms-transform-origin : calc(100% - 20px) 20px 0;
	-o-transform-origin : calc(100% - 20px) 20px 0;

Mais pas mieux. Pouvez- vous m'aidez ?

Re,

C'est l'association de transform et de calc qui semble ne pas passer sous IE.
Comme la largeur du bloc texte est fixe ici (width:200px;) tu peux te permettre de mettre la valeur en dur (qui au final ne changeait jamais) soit

transform-origin : 180px 20px 0;

PS : Pour les prefix selon la doc tu peux normalement te contenter de -webkit- et -ms-
http://caniuse.com/transforms2d
http://www.w3schools.com/cssref/css3_pr_transform-origin.asp
Modifié par _laurent (23 Jul 2014 - 09:55)

Ca marche nickel comme ça, merci _laurent !