[Resolu] Rotation de 30deg en CSS3 fait sortir l'élément de son bloc

Bonjour,

Dans le cadre d'un développement de site web multilingue pour un agent immobilier, je suis amené à afficher une liste de biens. Si un bien est vendu ou loué, je dois faire apparaître un petit bandeau sur la vignette présentant le bien dans la liste. Ce bandeau doit être affiché dans le coin supérieur gauche de l'image et incliné à 30°.

Avant de se lancer dans des images qui représentent chacune un statut possible dans une langue possible (sachant qu'on doit pouvoir ajouter des langues facilement), j'ai tenté une approche en CSS3.

J'ai donc réussi à afficher le bloc contenant le texte comme je voulais mais celui -ci dépasse du cadre de l'image.

Je ne sais pas trop comment exprimer ce problème car après avoir lu quelques bons livres CSS3, je me lance enfin et seulement dans l'implémentation.

Voici ce que cela donne à l'écran (Chrome et Firefox) :
.

Le CSS utilisé :

.w2ms-estate-rent-sold-layer {
    -moz-transform: rotate(-30deg) translate(-1em, -2em);
    background: none repeat scroll 0 0 red;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 0;
    line-height: 40px;
    opacity: 0.8;
    position: absolute;
    top: 55px;
    width: 100%;
}

Et enfin -l'url de la page sur laquelle est visible cette transformation (c'est le 9e bien, en bas de la page).

Voila j'espère tout d'abord que ce que je veux obtenir est possible et je vous remercie pour le temps passé à ce problème.
Modifié par Heriquet (12 Jan 2012 - 10:07)

Bonjour,

en ajoutant overflow : hidden sur le conteneur parent(w2ms-estate-summary-image-wrapper), ça ne dépasse plus sur firefox.

Gérer les débordements de contenus grâce à CSS

Super merci !

Désolé d'avoir posté un message alors qu'un tuto existe mais étant novice avec ces nouvelles fonctionnalités, je n'avais aucune idée de comment chercher la solution à mon problème !

Bonne journée !

Bonjour,

une fois la tête plongée dans CSS3, c'est très facile de ne plus penser à des propriétés qu'on connait depuis plus longtemps mais qu'on n'utilise pas tous les jours

Pour information, il y a -transform-origin qui peut t'être utile selon où est placé le texte au départ, la valeur de la rotation, où il doit s'afficher au final, etc. Ex. avec des cellules de tableau.