IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Centrage texte vertical dans un ribbon


Sujet :

Centrer un élément en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Septembre 2011
    Messages : 81
    Par défaut Centrage texte vertical dans un ribbon
    Bonjour,

    Je suis entrain de réaliser un ribbon pour mettre par dessus des containers.

    Cependant je rencontre un problème de mise en forme pour le centrage du texte présent dans le ribbon.
    Sur google chrome tout est parfait (comme toujours) mais par contre sur IE ça décale le texte avec la présence d'un fond noir qui n'est pas présent dans le css en principe.

    Voici le code html

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="ribbon"><span class="ribbon-text">New</span></div>

    Et le css :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    .ribbon {
    	position: absolute;
    	z-index: 9999;
        width: 25px;
    	height: 75px;
        margin: 0;
    	top: 0px;
    	right: 20px;
        background: rgb(97,205,245);
    	opacity: 0.85;
        border-left: 1px dotted #FFF;
        border-right: 1px dotted #FFF;
        box-shadow: 3px 0 0 rgb(97,205,245),
                    -3px 0 0 rgb(97,205,245);
    	-moz-box-shadow: 3px 0 0 rgb(97,205,245),
                   		 -3px 0 0 rgb(97,205,245);
    	-webkit-box-shadow: 3px 0 0 rgb(97,205,245),
                  		   -3px 0 0 rgb(97,205,245);
        -webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
    }
    .ribbon-text {
    	position: relative;
    	display: block;
    	font-family: 'confortaa-light';
    	font-size: 14px;
    	font-weight: normal;
    	color: #FFF;
    	line-height: 75px;
    	letter-spacing: 2px;
    	-webkit-transform: rotate(-90deg);
    	-moz-transform: rotate(-90deg);
    	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    	-webkit-touch-callout: none;
    	-webkit-user-select: none;
    	-khtml-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    	text-decoration: none;
    }
    .ribbon:after,
    .ribbon:before {
        border-top: 15px solid rgb(97,205,245);
        content: '';
        height: 0;
        position: absolute;
        top: 100%;
        width: 0;
    }
    .ribbon:after {
        border-left: 20px solid transparent;
        right: -4px;
    }
    .ribbon:before {
        border-right: 20px solid transparent;
        left: -4px;
    }
    Et la démo ici : http://fiddle.jshell.net/MRHjV/4/

    En espérant que l'on puisse m'aider!

    Merci d'avance!

    EDIT: les ombres ne marchent pas non plus sur IE

  2. #2
    Membre très actif

    Avatar de nicosmash
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2012
    Messages
    395
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2012
    Messages : 395
    Par défaut
    Bonjour,

    Pour ma part j'utilise :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .align_center
    {
    	text-align: center;
    }
    Cordialement.

  3. #3
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Septembre 2011
    Messages : 81
    Par défaut
    Merci. Mais un text-align: center; ne change rien.

    EDIT: j'ai l'impression que tout le problème vient de la rotation sous IE :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  4. #4
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Septembre 2011
    Messages : 81
    Par défaut
    Avec ce code la rotation du text est bonne maintenant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    .ribbon {
    	position: absolute;
    	z-index: 9999;
        width: 25px;
    	height: 75px;
        margin: 0;
    	top: 0px;
    	left: 20px;
        background: rgb(97,205,245);
    	opacity: 0.85;
        border-left: 1px dotted #FFF;
        border-right: 1px dotted #FFF;
        box-shadow: 3px 0 0 rgb(97,205,245),
                    -3px 0 0 rgb(97,205,245);
    	-moz-box-shadow: 3px 0 0 rgb(97,205,245),
                   		 -3px 0 0 rgb(97,205,245);
    	-webkit-box-shadow: 3px 0 0 rgb(97,205,245),
                  		   -3px 0 0 rgb(97,205,245);
        -webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
    }
    .ribbon-text {
    	position: relative;
    	display: block;
    	font-family: 'confortaa-light';
    	font-size: 14px;
    	font-weight: normal;
    	color: #FFF;
    	line-height: 75px;
    	letter-spacing: 2px;
    	-webkit-transform: rotate(-90deg);	
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    	-webkit-touch-callout: none;
    	-webkit-user-select: none;
    	-khtml-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    	text-decoration: none;
    }
    .ribbon:after,
    .ribbon:before {
        border-top: 15px solid rgb(97,205,245);
        content: '';
        height: 0;
        position: absolute;
        top: 100%;
        width: 0;
    }
    .ribbon:after {
        border-left: 20px solid transparent;
        right: -4px;
    }
    .ribbon:before {
        border-right: 20px solid transparent;
        left: -4px;
    }
    Demo : http://fiddle.jshell.net/MRHjV/5/

    par contre j'ai toujours pas d'ombre sous IE...

  5. #5
    Membre très actif

    Avatar de nicosmash
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2012
    Messages
    395
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2012
    Messages : 395
    Par défaut
    Essayer juste d'afficher un :

    Hello world

    avec de l'ombre voir si IE le prend en compte.
    J'avais des soucis identiques avec les bords arrondis

    Vous pouvez essayer avec quelques choses comme :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    p
    {
        text-shadow: 2px 2px 4px black;
    }
    ...
    p
    {
        box-shadow: 6px 6px 6px black inset;
    }

  6. #6
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Septembre 2011
    Messages : 81
    Par défaut
    Merci mais ça n'a pas de rapport avec le box-shadow.
    Il s'agit d'un problème sous IE avec le filter :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    filter: 
      progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=10);
    En ajoutant un outline à la place du box-shadow pour la deuxième bordure, je n'arrive pas à appliquer un ombrage correct sous IE. L'ombrage sous IE via filter me supprime les deux triangles du bas...

    Exemple sans box-shadow avec le outline: http://fiddle.jshell.net/MRHjV/9/

    Tant pis les utilisateurs d'IE n'auront pas de shadows!

    Merci pour l'aide en tout cas!

Discussions similaires

  1. Text vertical dans Tkinter canvas text
    Par jcgarreau dans le forum Tkinter
    Réponses: 4
    Dernier message: 15/08/2009, 00h29
  2. [QuickReport]sens du text vertical dans etat portrait
    Par alili mostafa dans le forum QuickReport
    Réponses: 3
    Dernier message: 14/03/2009, 09h12
  3. texte vertical dans un etat ou formulaire
    Par sakia dans le forum VBA Access
    Réponses: 5
    Dernier message: 19/11/2007, 15h49
  4. Texte vertical dans un état Access
    Par mariannesq dans le forum IHM
    Réponses: 3
    Dernier message: 15/01/2007, 17h20
  5. Texte vertical dans un TCanvas
    Par FredericB dans le forum C++Builder
    Réponses: 6
    Dernier message: 22/05/2006, 18h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo