Problème de hauteur de ligne

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par indigene, 7 Mars 2020.

  1. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 160
    J'aime reçus:
    179
    Bonjour. J'ai besoin d'un peu d'aide au niveau css

    Quand je met un texte entre quotes il y a un décalage au niveau de la dernière ligne

    [​IMG]

    Ce décalage est du à la quote qui est avec une taille 3em

    Code:
    <i class="fa fa-quote-right fa-3x offset-fluid">
    Code:
    .fa-3x { font-size: 3em; }
    J'ai défini offset-fluid comme ceci :
    Code:
    .offset-fluid { display:inline-block; position:relative;top:30px;left:15px; }
    .offset-fluid:after{content:'';display:block;height:0.8em;}
    Avant j'utilisais un offset positionnel après un saut de ligne

    Code:
    .row-fluid .offset4 {
        margin-left: 36.75213675213675%;}
    
    Le problème avec l'offset positionnel c'est qu'il n'arrive pas forcément à la fin de la ligne suivant la largeur de l'écran. Donc je préfère le positionnement à la suite de la ligne.

    Une solution serait de ne pas utiliser font-size 3em mais font-size 1em pour ne pas augmenter la hauteur de la ligne mais dans ce cas les quotes seraient toutes petites.

    Existe-t-il une solution css pour positionner ma quote exactement à la fin de la ligne (sans positionnement fixe) et sans faire augmenter sa hauteur ?
     
  2. Furtif
    Furtif WRInaute accro
    Inscrit:
    9 Août 2005
    Messages:
    2 936
    J'aime reçus:
    279
    une url ?
     
  3. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 160
    J'aime reçus:
    179
    Entre temps j'ai trouvé une parade mais ce n'est pas très propre car ça ne fonctionne qu'en utilisant un style et pas une classe. Mais je ne suis vraiment pas doué en css. J'en fait par obligation.

    Voici la page d'exemple : http://www.dramatic.fr/goetie-p22.html

    J'ai ajouté style="line-height:0.3em;" et ça semble faire ce que je voulais.

    Sur cette autre page j'en ai plein : http://www.dramatic.fr/exorcisme-p3.html
     
  4. Furtif
    Furtif WRInaute accro
    Inscrit:
    9 Août 2005
    Messages:
    2 936
    J'aime reçus:
    279
  5. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 160
    J'aime reçus:
    179
    Merci ! Liens bons à conserver dans un coin !
     
  6. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 367
    J'aime reçus:
    74
  7. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 160
    J'aime reçus:
    179
    argh la pop-up orange en plein milieu sur le premier site :eek:

    Merci pour ton aide en tous cas. Oui, j'utilise bootstrap. Mais finalement je vais rester avec mon style=line-height car c'est la solution la plus simple pour m'éviter d'avoir à tout modifier sur des centaines de pages. J'ajoute ma classe offset-fluid et le style avec line-height et ça fonctionne. Et je le fais seulement quand c'est nécessaire. Sinon je peux conserver des choses comme offset4, offset5, pull-right. C'est donc très souple d'utilisation. Mais le line-height je suis obligé de le mettre en style car dans le fichier css il se trouve annulé par une autre déclaration qui vient directement de bootstrap.

    J'utilise déjà blockquote pour d'autres mises en forme
     
Chargement...
Similar Threads - Problème hauteur ligne Forum Date
Problèmes dans le méta-titre / description + Sitemap Référencement Google Hier à 11:12
Problème paramétrage HTTP2 sur Nginx Administration d'un site Web 22 Novembre 2021
Search Console Problèmes réguliers d'ergonomie mobile sans modification Problèmes de référencement spécifiques à vos sites 18 Novembre 2021
Problème title/H1 thème Astra Problèmes de référencement spécifiques à vos sites 30 Octobre 2021
Search Console Problème avec page ads.txt Référencement Google 23 Octobre 2021
Problèmes avec OVH. Le café de WebRankInfo 8 Octobre 2021
Authentification forte : problème de paiement ? e-commerce 7 Octobre 2021
Multiples problèmes sur GA Google Analytics 28 Septembre 2021
Problème avec tag manager pixel Facebook Référencement Google 25 Septembre 2021
Problème d'indexation Google : que faire ? Crawl et indexation Google, sitemaps 21 Septembre 2021