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 119
    J'aime reçus:
    169
    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 688
    J'aime reçus:
    203
    une url ?
     
  3. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 119
    J'aime reçus:
    169
    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 688
    J'aime reçus:
    203
  5. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 119
    J'aime reçus:
    169
    Merci ! Liens bons à conserver dans un coin !
     
  6. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 211
    J'aime reçus:
    44
  7. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 119
    J'aime reçus:
    169
    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 htaccess Développement d'un site Web ou d'une appli mobile Hier à 21:32
Search Console Problème indexation très faible Crawl et indexation Google, sitemaps 19 Mai 2020
Problème de preg_match(). Développement d'un site Web ou d'une appli mobile 15 Mai 2020
ovh probleme redirection multiples Problèmes de référencement spécifiques à vos sites 1 Mai 2020
Problème OVH et Problèmes de WHOIS Demandes d'avis et de conseils sur vos sites 30 Avril 2020
Problème url blog Demandes d'avis et de conseils sur vos sites 29 Avril 2020
Problème site lent Problèmes de référencement spécifiques à vos sites 26 Avril 2020
Problème avec la search console Crawl et indexation Google, sitemaps 21 Avril 2020
Problème modification code Adsense AdSense 21 Avril 2020
Problème indexation page d'accueil incompatible mobile Crawl et indexation Google, sitemaps 19 Avril 2020
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice