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 101
    J'aime reçus:
    176
    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 977
    J'aime reçus:
    340
    une url ?
     
  3. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 101
    J'aime reçus:
    176
    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 977
    J'aime reçus:
    340
  5. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 101
    J'aime reçus:
    176
    Merci ! Liens bons à conserver dans un coin !
     
  6. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 356
    J'aime reçus:
    87
  7. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 101
    J'aime reçus:
    176
    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
WordPress Problème affichage style avec Elementor (titre, bordures, separateur) Administration d'un site Web Lundi à 12:12
Problème d'indexation de backlinks Débuter en référencement 24 Juillet 2022
Problème d'indexation de backlinks Problèmes de référencement spécifiques à vos sites 21 Juillet 2022
Probleme de visibilité de ma page Facebook Facebook 5 Juillet 2022
problème avec le développeur Droit du web (juridique, fiscalité...) 22 Juin 2022
Problème désindexation des pages de Google Débuter en référencement 21 Juin 2022
Problème d'indexation de pages sur Google Problèmes de référencement spécifiques à vos sites 31 Mai 2022
problème de redirection non souhaitée Administration d'un site Web 28 Avril 2022
Problème d'indexation Produits Prestashop Crawl et indexation Google, sitemaps 28 Avril 2022
Problème d'affichage des campagnes Google Ads dans un tableau de bord Data Studio AdWords 26 Avril 2022
Problème de vitesse d'affichage des pages sur Analytics Google Analytics 26 Avril 2022
Problème : Google Crawl et Index des pages en No Index et bloqué par le robot.txt Crawl et indexation Google, sitemaps 26 Avril 2022
Problème avec GA4 : nb de visiteurs temps réel et par jour Google Analytics 19 Avril 2022
Problème indexation pages précises en React.js Débuter en référencement 19 Avril 2022
Problème de référencement Demandes d'avis et de conseils sur vos sites 8 Avril 2022
Problème adsence : Annonces ne s'affichent plus AdSense 10 Mars 2022
problèmes procédures stockées Administration d'un site Web 9 Mars 2022
Problème récupération fichier vps Développement d'un site Web ou d'une appli mobile 5 Mars 2022
Problème config postfix. Administration d'un site Web 5 Mars 2022
Search Console Problème d'indexation Crawl et indexation Google, sitemaps 24 Février 2022