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 162
    J'aime reçus:
    174
    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 782
    J'aime reçus:
    223
    une url ?
     
  3. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 162
    J'aime reçus:
    174
    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 782
    J'aime reçus:
    223
  5. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 162
    J'aime reçus:
    174
    Merci ! Liens bons à conserver dans un coin !
     
  6. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 240
    J'aime reçus:
    53
  7. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 162
    J'aime reçus:
    174
    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ème page destination groupe d'annonces Google Ads AdWords Lundi à 10:54
Problème de trafic incorrect (plus de 3000€) / RPM à 35€ AdSense Vendredi à 17:27
Problèmes d'indexations de Google Crawl et indexation Google, sitemaps 19 Octobre 2020
Problème d'indexation pour de nombreuses pages Débuter en référencement 10 Octobre 2020
Microdonnées : problème avec product Débuter en référencement 6 Octobre 2020
Probléme de texte gras, code HTML Demandes d'avis et de conseils sur vos sites 5 Octobre 2020
Search Console J'ai un problème : 5 pages indexés et 43 exclues Crawl et indexation Google, sitemaps 2 Octobre 2020
Search Console Problème d'indexations de pages produits Crawl et indexation Google, sitemaps 30 Septembre 2020
Search Console Probleme redirection nom de domaine et indexation google Crawl et indexation Google, sitemaps 16 Septembre 2020
Problème passerelle sur Prestashop e-commerce 8 Septembre 2020