Une question de css pour un style avec div.

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Une question de css pour un style avec div.

    Bonjour à tous,

    je sais que ce forum est consacré à Joomla mais je pose notre question malgré tout.
    Elle est relative au css. Nous ne sommes pas spécialistes du tout. Nous avons trouvé une solution mais elle est lourde et complexe. Elle fonctionne bien.

    Nous avons créé un nouveau style pour nos articles de blog. Son but est de mettre en avant une phrase importante qui doit être bien visible.

    Voici le style :

    hr.gp-txt-important03-top {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    color:#333399;
    width: 50%;
    margin-top: 2.0em;
    margin-bottom: 2.0em;
    }

    hr.gp-txt-important03-bottom {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    color:#333399;
    width: 50%;
    margin-top: 2.0em;
    margin-bottom: 2.0em;
    }


    .gp-txt-important03 {
    font-family: 'Raleway';
    font-size: 1.7em;
    font-weight: bold;
    width: 70%;
    margin: auto;
    text-align:center;
    }

    Voici comment nous l'intégrons dans nos pages HTML :

    <hr class="gp-txt-important03-top">
    <div class="gp-txt-important03">
    Ceci est une phrase importante.
    </div>
    <hr class="gp-txt-important03-bottom">

    Comme vous le voyez c'est un peu lourd. Nous pensons qu'il est possible de juste écrire :

    <div class="gp-txt-important03">
    Ceci est une phrase importante.
    </div>

    Mais nous n'arrivons pas à trouver la syntaxe.
    Si quelqu'un pouvait nous donner la solution ce serai super.

    Merci par avance pour votre aide
    Isa
    Dernière édition par Isabelle62 à 09/09/2019, 14h23
    Isabelle G.
    www.guillenphoto.com

  • #2
    Bonjour,

    Cela doit pouvoir se régler avec des ::before et ::after.

    Code:
    .gp-txt-important03 {
    font-family: 'Raleway';
    font-size: 1.7em;
    font-weight: bold;
    width: 70%;
    margin: auto;
    text-align:center;
    }
    .gp-txt-important03::before {
    content:'';
    display:block;
    margin-left:auto; /* centrage */
    margin-right:auto; /* centrage */
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    color:#333399;
    width: 50%;
    margin-top: 2.0em;
    margin-bottom: 2.0em;
    }
    .gp-txt-important03::after {
    content:'';
    display:block;
    margin-left:auto; /* centrage */
    margin-right:auto; /* centrage */
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    color:#333399;
    width: 50%;
    margin-top: 2.0em;
    margin-bottom: 2.0em;
    }
    Pascal
    Dernière édition par pmleconte à 09/09/2019, 07h57
    If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

    Commentaire


    • #3
      cherche des tutos sur le "gradient border-color"
      en css, tu n'auras qu'un seul bloc, avec un border-top et un border-bottom , le tout en dégradé.
      ce sera le code le plus court
      aidons nous les uns les autres ...

      https://www.web54.fr

      Commentaire


      • #4
        Bonjour à tous les deux,

        nous vous remercions pour vos deux messages. C'est très gentil d'avoir répondu aussi vite.

        Nous avons adpoté la solution de Pascal. Elle fonctionne parfaitement bien. C'est super et plus simple à utiliser en HTML.

        Merci aussi à vous Papaye. Nous avions regardé ce dont vous parlez mais nous n'avons jamais réussi à le mettre en oeuvre. Les tutos sont souvent complexes et couvrent le domaine en général.
        Nous voulions quelque chose de simple, d'élégant, de particulier.

        Merci à vous deux pour votre aide.
        Bonne journée
        Isa
        Isabelle G.
        www.guillenphoto.com

        Commentaire

        Annonce

        Réduire
        Aucune annonce pour le moment.

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X