Jump to content
Nenex

Rotation d'une balise span

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.

 

Edited by Nenex

Share this post


Link to post
Share on other 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

Edited by sparh

Share this post


Link to post
Share on other 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:

Share this post


Link to post
Share on other 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.

Edited by Nenex

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...