Sujets similaires

Bonjour chers amis !

J'ai un petit soucis ^^ J'ai utilisé le code d'Orange : ICI , pour faire une fiche de PV's. Et j'aimerais mettre à la place de l'avatar 200x320, un gif 500x200.

Donc je voudrais savoir si il existe un moyen de tourner l'image à 90° ; car je me vois mal faire des gifs pour les 20 PV's dans la bonne dimension.

J'espère être compréhensible ^^

Merci d'avance Rotation d'une image à 90° [problème résolu] 3517359236

Rotation d'une image à 90° [problème résolu] 3517359236

Salut, essaye ce code :

Code:: -moz-transform: rotate(90deg) ;
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg) ;
-ms-transform: rotate(90deg);
transform: rotate(90deg);

Merci

Bonjour !

Hé bien, dans la mesure où le code d'Orange est prévu pour une image dans ce sens là, ne vas tu pas au devant de gros soucis esthétiques si tu décides de changer le sens de l'image ?

Pour répondre à ta question, c'est possible, mais ça implique de refaire le code x_x Ça casse un peu le principe du coup.

En fait, vu que c'est une image en largeur, il n'y a plus besoin d'un tableau, on va le faire sauter et mettre les éléments les uns au dessus des autres :

Donc cette partie :

Code:: <table class="cssactif_pv" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="right" valign="bottom" class="cssactif_pv_header" style="background-image: url(http://img10.hostingpics.net/pics/279002welling_2.png);">Lellia</td><td valign="top"><div class="cssactif_pv_titre"><h1>Prénoms & Nom</h1>
feat. Célébrité, Libre</div><div class="cssactif_pv_content"><em>Appartenance</em>: Groupe
<em>Date de naissance</em>: 01/01/0001 (100 ans)
<em>Métier</em>: Parmi ceux disponibles
<em>Idéologie</em>: Détails
<em>Précisions</em>: Autres détails
<em>Personnalité</em>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in vehicula enim. Mauris non justo est, vitae congue lacus. Nulla molestie sodales ornare. Fusce nisi massa, tempus in viverra at, dictum id risus. Sed sit amet elementum nisl. Donec at mauris dui, quis tristique orci.
<em>Liens</em>:
<div class="infobulle">
<img src="http://i28.tinypic.com/33eseiq.jpg" />
<div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div><div class="infobulle">
<img src="http://i28.tinypic.com/33eseiq.jpg" />
<div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div><div class="infobulle">
<img src="http://i28.tinypic.com/33eseiq.jpg" /><div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div><div class="infobulle">
<img src="http://i28.tinypic.com/33eseiq.jpg" />
<div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div></div></td></tr></table>

Devient ceci :

Code:: <div class="cssactif_pv"><div class="cssactif_pv_header" style="background-image: url(http://img10.hostingpics.net/pics/279002welling_2.png);">Lellia</div><div class="cssactif_pv_titre"><h1>Prénoms & Nom</h1>
feat. Célébrité, Libre</div><div class="cssactif_pv_content"><em>Appartenance</em>: Groupe
<em>Date de naissance</em>: 01/01/0001 (100 ans)
<em>Métier</em>: Parmi ceux disponibles
<em>Idéologie</em>: Détails
<em>Précisions</em>: Autres détails
<em>Personnalité</em>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in vehicula enim. Mauris non justo est, vitae congue lacus. Nulla molestie sodales ornare. Fusce nisi massa, tempus in viverra at, dictum id risus. Sed sit amet elementum nisl. Donec at mauris dui, quis tristique orci.
<em>Liens</em>:
<div class="infobulle">
<img src="http://i28.tinypic.com/33eseiq.jpg" />
<div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div><div class="infobulle">
<img src="http://i28.tinypic.com/33eseiq.jpg" />
<div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div><div class="infobulle">
<img src="http://i28.tinypic.com/33eseiq.jpg" /><div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div><div class="infobulle">
<img src="http://i28.tinypic.com/33eseiq.jpg" />
<div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div></div></div>

La classe td.cssactif_pv_header doit être changée en div.cssactif_pv_header et... j'en ai assez fait, partant de là je te laisse personnaliser ladite classe pour que ça marche Wink

Edit : Oui, ya aussi la méthode d'Hiro, mais je ne sais pas si c'était vraiment ce dont il était question XD De toute façon, j'utilise pas cette technique elle est incompatible IE.

J'ai essayer les deux code ... aucun des deux ne fonctionne !

Le premier d'Hira, n'a eu aucun effet.

Et le deux de Christa me donne ça :

Rotation d'une image à 90° [problème résolu] Impecr10

Rotation d'une image à 90° [problème résolu] Impecr10

Alors que je voudrais que ça donne ça :

Rotation d'une image à 90° [problème résolu] Impecr11

Là j'ai modifier mon gif, je l'ai tourner ! Mais c'est un boulot monstre quand on a 20 PV's a faire ^^

AAAAH tout de suite c'est plus clair. Non, on peut pas tourner ton gif avec du code (c'est une image de fond), tu vas devoir le faire à la main toi même.

Enfin, remarque, essaie avec le code d'Hiro dans la classe dont je t'ai parlé dans mon précédent message.

J'ai presque réussi, mais ça me fait des gros marge de chaque coté ^^ je trouve pas comment les enlever !

Rotation d'une image à 90° [problème résolu] Impecr12

Rotation d'une image à 90° [problème résolu] Impecr12

Mon CSS

Code:: /*page accueil trans*/
.accueil .forumline{
background-color: transparent !important;
border: none !important;
}
.accueil .row1{
background-color: transparent !important;
border: none !important;
}

.accueil td.catHead{
background-image: none !important;
background-color: transparent !important;
border: none !important;
}

/*liens non soulignés etc*/
a:link {text-transform: lowercase; letter-spacing: 1px; text-decoration: none !important;}
a:visited {text-transform: lowercase; letter-spacing: 1px; text-decoration: none !important;}
a:hover {text-transform: lowercase; letter-spacing: 1px; text-decoration: none !important;}
a:active {text-transform: lowercase; letter-spacing: 1px; text-decoration: none !important;}

@import url(http://fonts.googleapis.com/css?family=Alex+Brush);

/*titre des cate*/
.titre { /* Titre non survolé, normal*/
display: block;
font-family:'Alex Brush', cursive;
font-size: ;190%/* Grosseur du texte soit 100%, 190% étant plus gros */
text-decoration: none; /* Décoration du texte : overline */
text-transform: ; /* Uppercase, capitalize, none, lowecase */
border-bottom: 2px dotted #COULEUR; /* 2px : épaisseur du trait ; dotted : en pointillé */
text-align: center ;/* Alignement du texte : left, right, center ou justify */
font-size: 36px;
color: #f5e4bc; /* Couleur du texte */
}

.titre:hover { /* Titre survolé */
color: #ef797f ; /* Couleur du texte au survol */
text-transform: none;
border-bottom: 2px dotted #COULEUR; /* 2px : épaisseur du trait ; dotted : en pointillé */
}

@import url(http://fonts.googleapis.com/css?family=The+Girl+Next+Door);

/*Titre des sous-forum*/
.titre2 { /* Titre non survolé, normal*/
display: block;
font-family:'The Girl Next Door', cursive;
font-size: ;190%/* Grosseur du texte soit 100%, 190% étant plus gros */
text-decoration: none; /* Décoration du texte : overline */
text-transform: ; /* Uppercase, capitalize, none, lowecase */
border-bottom: 2px dotted #COULEUR; /* 2px : épaisseur du trait ; dotted : en pointillé */
text-align: left ;/* Alignement du texte : left, right, center ou justify */
font-size: 18px;
color: #f5e4bc; /* Couleur du texte */
}

.titre2:hover { /* Titre survolé */
color: #ef797f ; /* Couleur du texte au survol */
text-transform: none;
border-bottom: 2px dotted #COULEUR; /* 2px : épaisseur du trait ; dotted : en pointillé */
}

/*QEEL*/

.statistiques {
background-color: #70554B;
overflow:auto;
max-height: 200px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 4px dotted #F5E4BC;
padding:10px;
margin:10px;
font-family:'The Girl Next Door', cursive;
text-align:left;
}

.groupes {
font-family:'The Girl Next Door', cursive;
font-size:16px;
font-weight:bold;
font-style:italic;
text-transform:lowercase;
text-decoration: none!important;
margin-left: 20px;
letter-spacing:1px;
}

.catqeel {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
padding:10px;
background-color:#70554B;
}

/*page d accueil*/

.MessAccueil {
position:relative; /* On fixe la div comme 'point de repère' */
width:780px;
height:592px;
}

.ImgAccueil {
/* tout ce que t'as mis dans l'attribut "style" de l'image */
}

.BoiteAccueil1 {
overflow : auto;
position:absolute; /* positionnement absolu par rapport à notre repère précédemment établi */
left:259px;
top : 137px;
width:421px;
height:141px;
font-family: 'The Girl Next Door', cursive; /* police */
font-size:14px;
color: #70554B;
text-align : justify;
letter-spacing: -1px;

}

.BoiteAccueil2 {
overflow : auto;
position:absolute; /* positionnement absolu par rapport à notre repère précédemment établi */
left:324px;
top : 329px;
width:176px;
height:73px;
font-family:'The Girl Next Door', cursive; /* police */
font-size:14px;
color: #70554B;
text-align : justify;
letter-spacing: -1px;
}

/* ------------- FICHE PV-RPG
Créee par Orange de CSSActif (http://www.css-actif.com)
Merci de conserver cette mention par respect ----------- */
.cssactif_fiche, .cssactif_pv { /* Fond de la fiche */
background-color: #836454; /* Couleur de fond */

-webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
-moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */

-webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */

}

div.cssactif_fiche_header { /* En-tête avec image de fond */
background-repeat: none; /* Empêche la répétition de l'image du header */
background-position: top center; /* Postionne l'image du header en haut, au center */

height: 200px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande */

border-bottom: 15px double #F5E4BC; /* Bordure au bas du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style) */

/* Bordures supérieures arrondies (voir: http://border-radius.com/) */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;

}

div.cssactif_pv_header { /* En-tête avec image de fond */
background-repeat: no-repeat; /* Empêche la répétition de l'image du header */
background-position: top center; /* Postionne l'image du header en haut, au center */
border-top: 15px double #F5E4BC; /* Bordure côté du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style) */

-moz-transform: rotate(90deg) ;
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg) ;
-ms-transform: rotate(90deg);
transform: rotate(90deg);

width: 500px; /* Donne la largeur de la bannière latérale (Largeur de l'avatar) */
height: 200px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande (Hauteur de l'avatar) */

/* Bordures gauche arrondies (voir: http://border-radius.com/) */
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;

text-shadow: 1px 1px 0px #000; /* Ombre du texte */
font-size: 10px; /* Taille du texte: TAILLEpx */
}

div.cssactif_pv_titre h1, div.cssactif_fiche_titre h1 { /* Titre prénoms & nom */

font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */

font-size: 32px; /* Taille du texte: TAILLEpx */

text-shadow: 1px 1px 0px #000; /* Ombre du texte */

color: #F5E4BC; /* Couleur du texte */

margin: 0; /* Supprime la marge par défaut de l'élément h1 */

text-align: right; /* Aligne le titre à droite */
text-transform: uppercase; /* Met le titre en majuscules */

}

div.cssactif_fiche_titre, div.cssactif_pv_titre { /* Titre + feat */
/* Positionne le titre "à cheval" sur la bordure */
position: relative;
top: -18px;

text-align: right; /* Aligne le texte à droite */

padding-right: 20px; /* Défifine une marge interne */
color: #CCCCCC; /* Couleur du feat */
}

.cssactif_pv h2, div.cssactif_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
background-color: #976935; /* Couleur du fond des sous-titres */
border-color: #E2BF6D; /* Couleur de la bordure */
border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS GAUCHE & DROITE */
border-style: solid; /* Style de la bordure */

-webkit-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */

text-align: center; /* Aligne le titre au centre */
text-transform: uppercase; /* Met le titre en majuscules */
font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #F5E4BC; /* Couleur du titre */
margin: 0; /* Supprimer marge */
font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
font-weight: normal; /*Épaisseur du texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
letter-spacing: 5px; /* Espacement des caractères */

}

.cssactif_pv_content, .cssactif_fiche_content { /* Contenu */
padding: 10px; /* Marge interne */
text-align: justify; /* Justifie le texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
}

.cssactif_pv em, .cssactif_fiche em { /* Libellés */
font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #F5E4BC; /* Couleur du titre */
font-style: normal;
text-transform: uppercase;

}

div.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
display: inline-block; /*Place les icones un à côté de l'autre */
margin: 10px; /* marge entre les icones */
border: 1px solid #333; /* bordure des icones */

-webkit-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */

}

div.infobulle img {
height: 50px;
width: 50px;
}

div.infobulle div{
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;

width: 300px; /* Largeur de l'infobulle */

top: 50px; /* on positionne notre infobulle */
left: 0px;

background-color: #836454; /* Couleur de fond */

-webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
-moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */

-webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
border-left: 6px double #F5E4BC;
padding: 10px; /* marge interne de l'infobulle */
}
/* ------------- FIN FICHE PV-RPG */

/*avatar profil coulissant*/
/* Code par Hiro pour CSSACTIF
Merci de ne pas supprimer cette mention
(http://www.css-actif.com) */

#englob { /* Encadrement global des 2 divs */
position:relative;
width:200px;
height:320px;
border:5px solid #F1E0B9; /* La vilaine bordure rouge */
overflow:hidden; /* Permet de cacher ce qui dépasse */
}

.imgp {
background:#70554B; /* le bg de la div qui contient l'avatar */
position:absolute; /* Laissez comme ceci */
top:0;/* Laissez comme ceci */
left:0;/* Laissez comme ceci */
width:100%;/* Laissez comme ceci */
height:100%;/* Laissez comme ceci */
z-index:1;/* La position par rapport à l'autre div qui contient les infos */
-webkit-transition:all 0.5s;/* Laissez comme ceci */
-moz-transition:all 0.5s;/* Laissez comme ceci */
-o-transition:all 0.5s;/* Laissez comme ceci */
-ms-transition:all 0.5s;/* Laissez comme ceci */
transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .imgp {
margin-top:320px; /* Lorsque la souris passe sur la div #englob, on fait glisser l'image vers le bas de 200px */
}

.infosp {
background:#624B3F; /* le bg de la div qui contient les infos*/
position:absolute;/* Laissez comme ceci */
top:0;/* Laissez comme ceci */
left:0;/* Laissez comme ceci */
width:100%;/* Laissez comme ceci */
height:100%;/* Laissez comme ceci */
z-index:0;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/
opacity:0;/* on met l'opacité à zero pour un effet stylé ;) */
margin-left:-200px;/* on décale la div de 200px, elle est invisible grâce a l'overflow:hidden de #englob */
-webkit-transition:all 0.5s;/* Laissez comme ceci */
-moz-transition:all 0.5s;/* Laissez comme ceci */
-o-transition:all 0.5s;/* Laissez comme ceci */
-ms-transition:all 0.5s;/* Laissez comme ceci */
transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .infosp {
opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */
margin-left:0px;/* et on décale cette div à 0px (position par défaut) */
}

MA Fiche :

Code:: <table class="cssactif_pv" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td><div class="cssactif_pv_header" style="background-image: url(http://25.media.tumblr.com/tumblr_m4mwr1nMhB1qbyzl7o1_500.gif);">Lellia</div></td><td valign="top"><div class="cssactif_pv_titre"><h1>Prénoms & Nom</h1>
feat. Célébrité, Libre</div><div class="cssactif_pv_content"><em>Appartenance</em>: Groupe
<em>Date de naissance</em>: 01/01/0001 (100 ans)
<em>Métier</em>: Parmi ceux disponibles
<em>Idéologie</em>: Détails
<em>Précisions</em>: Autres détails
<em>Personnalité</em>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in vehicula enim. Mauris non justo est, vitae congue lacus. Nulla molestie sodales ornare. Fusce nisi massa, tempus in viverra at, dictum id risus. Sed sit amet elementum nisl. Donec at mauris dui, quis tristique orci.
<em>Liens</em>:
<div class="infobulle">
<img src="http://25.media.tumblr.com/tumblr_m6cfklHz1q1qi059ho2_250.gif" />
<div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div><div class="infobulle">
<img src="http://25.media.tumblr.com/tumblr_m5f1i5hoiD1qi059ho5_250.gif" />
<div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div><div class="infobulle">
<img src="http://i28.tinypic.com/33eseiq.jpg" />
<div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div><div class="infobulle">
<img src="http://i28.tinypic.com/33eseiq.jpg" />
<div><a href="#Lien">Nom & prénom</a> - Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante.</div>
</div></div></td></tr></table>
<div class="cssactif_pv">
<h2>Résumé de l'histoire</h2><div class="cssactif_pv_content">Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque sodales sollicitudin nunc at porta. Integer convallis mollis arcu, id cursus risus venenatis ac. Sed gravida, magna et molestie tempor, ante eros dignissim enim, sit amet volutpat elit nulla sit amet magna. Fusce varius, tellus eget tincidunt semper, quam magna tincidunt nisl, imperdiet condimentum lectus orci et neque. Nullam et erat quam, ac condimentum magna. Donec lobortis dapibus eros, vitae blandit felis faucibus eu. Nulla ipsum velit, posuere vel malesuada eu, rutrum et odio. Maecenas arcu augue, blandit a porta sit amet, vulputate non purus. Nullam quis elit quis sem blandit varius sit amet vitae lacus. Suspendisse potenti. Suspendisse fringilla lacinia sagittis.

<div style="font-size: 10px; text-align: center;">The secret circle - saison2 soutient la création; cette fiche a été codée par Orange de <a href="http://www.css-actif.com">CSSActif</a></div>
</div></div>

Oui, c'est normal, si je me souviens bien même quand tu "tournes" un élément, sa taille d'origine entre toujours en ligne de compte, bidouille toujours ta classe cssactif_pv_header en réduisant la taille pour commencer (width et height) ?

J'ai réussi !!!

J'ai ajouté un "margin : -120px" et ça fonctionne !

Merci de votre aide !!!

Yop'
Je vois que le problème est résolu, alors je classe !
Merci de l'avoir signalé Rotation d'une image à 90° [problème résolu] 926145

Rotation d'une image à 90° [problème résolu]

Rotation d'une image à 90° [problème résolu]

Sujets similaires

Sujets similaires

Partenaires Or