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:
    178
    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 867
    J'aime reçus:
    247
    une url ?
     
  3. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 160
    J'aime reçus:
    178
    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 867
    J'aime reçus:
    247
  5. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 160
    J'aime reçus:
    178
    Merci ! Liens bons à conserver dans un coin !
     
  6. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 309
    J'aime reçus:
    63
  7. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 160
    J'aime reçus:
    178
    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 de redirection incontrôlé URL Rewriting et .htaccess Hier à 14:32
WordPress Problème sitemap site multilingue Crawl et indexation Google, sitemaps 26 Juillet 2021
Problème site:pronostics-courses.com Administration d'un site Web 19 Juillet 2021
Problème récent de Crawl Google Crawl et indexation Google, sitemaps 7 Juillet 2021
Search Console Problème d'indexer d'une page sur Google Référencement Google 20 Juin 2021
Search Console Problème de version de langue dans les résultats de recherche Google Référencement international (langues, pays) 17 Juin 2021
Problème suivi Analytics avec AMP Débuter en référencement 12 Juin 2021
Problème suivi GTM : url lancées, cookies absents. Développement d'un site Web ou d'une appli mobile 29 Mai 2021
Problème avec Sirdata... Administration d'un site Web 25 Mai 2021
Search Console Problème d'indexation : Détectée, actuellement non indexée Référencement Google 16 Mai 2021