Aller au contenu
Nenex

Rotation d'une balise span

Noter ce sujet :

Recommended Posts

Salut

 

J'aimerais mettre l'auteur et la licence des photos sur le coté de l'image, verticalement, comme ceci :

 

1467039167.png

 

J'ai donc fait pivoter mon texte de 90°,  avec comme point d'encrage le coin bas gauche. Seulement mon span ne bouge pas, il reste horizontal.

 

Mon code HTML :

<figure>
	<img src="images/accueil/accueil-01.png" alt="ALT" />
	<span class="img-licence">Auteur et licence</span>
</figure>

Mon code CSS :

.img-licence {
	font-size:0.7em;
	text-align:right;
	font-style:italic;
	-moz-transform-origin: 0% 100%;
	-moz-transform: rotate(90deg);
	-o-transform-origin:  0% 100%;
	-o-transform: rotate(90deg);
	-webkit-transform-origin:  0% 100%;
	-webkit-transform: rotate(90deg);
	transform-origin:  0% 100%;
	transform: rotate(90deg);
}

 

Merci d'avance pour votre aide.

 

Modifié par Nenex

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut
 

figure {
  width:490px;
  height:320px;
  border:1px solid #000;
}

.img-licence {
	font-size:0.7em;
	text-align:right;
	font-style:italic;
	-moz-transform-origin: 100% 0%;
	-moz-transform: rotate(90deg);
	-o-transform-origin:  100% 0%;
	-o-transform: rotate(90deg);
	-webkit-transform-origin:  100% 0%;
	-webkit-transform: rotate(90deg);
	transform-origin: 100% 0%;
	transform: rotate(90deg);
  float:right;
  padding-right:10px;
}

Je sais pas  si c'est parfait mais c'est déjà mieux

Modifié par sparh

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci pour ton aide. Je vais me garder ta solution sous le coude, car je vais faire autrement que comme ça. Je vais tout simplement faire un petit montage avec photoshop. C'est aussi rapide et ça ferra mins de code dans mon fichier CSS. Je sais pas pourquoi j'ai voulu utiliser le CSS pour faire ça :rolleyes:

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut lotirim :) . Si tu veux avoir des réponses je te conseille de faire un nouveau message. Car dans ma discussion, les personne susceptible de pouvoir te répondre ne verront pas ton message.

Modifié par Nenex

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×