Partage
  • Partager sur Facebook
  • Partager sur Twitter

Changement d'emplacement de titres involontaire

Emplacements changés après modification d'une classe de paragraphe

Sujet résolu
    8 juillet 2024 à 22:04:57

    Bonjour,

    Ce sujet fait suite à un autre. Au départ j'avais les codes HTML et CSS suivant dont le problème est que j'avais une phrase qui s'affichait en haut de la page, là ou je ne vouais pas : 

    code HTML :

    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Site vitrine pour commencer</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <!-- <script>
            window.onscroll = function() { toggleHeader() };
    
            function toggleHeader() {
                var header = document.getElementById("header");
                var sticky = header.offsetTop;
    
                if (window.pageYOffset > sticky) {
                    header.classList.add("fixed");
                } else {
                    header.classList.remove("fixed");
                }
            }
    
            document.addEventListener("DOMContentLoaded", function() {
                const anchorLinks = document.querySelectorAll('a[href^="#"]');
                const offset = 300;
    
                anchorLinks.forEach(link => {
                    link.addEventListener("click", function(event) {
                        event.preventDefault();
                        const targetId = this.getAttribute("href").substring(1);
                        const targetElement = document.getElementById(targetId);
    
                        if (targetElement) {
                            const elementPosition = targetElement.getBoundingClientRect().top;
                            const offsetPosition = elementPosition + window.pageYOffset - offset;
    
                            window.scrollTo({
                                top: offsetPosition,
                                behavior: "smooth"
                            });
                        }
                    });
                });
            });
        </script> -->
    </head>
    <body>
        <header class="navbar fixed-header header" id="header">
            <div class="logo">
                <img src="images/logo.jpg" alt="Logo du site">
            </div>
            <nav>
                <ul>
                    <li><a href="#accueil">Accueil <span class="counter"></span></a></li>
                    <li><a href="https://www.tartine-et-chocolat.com/collections/chemises-bebe-garcon">Bébé <span class="counter">(0-36 mois)</span></a></li>
                    <li><a href="https://www.tartine-et-chocolat.com/collections/chemises-enfant-garcon">Enfant <span class="counter"> (3-11 ans)</span></a></li>
                    <li><a href="https://www.laredoute.fr/pplp/100/368/cat-147142.aspx#">Ados <span class="counter">(12-16 ans)</span></a></li>
                    <li><a href="#nouveautes">Nouveautés <span class="counter"></span></a></li>
                    <li><a href="#contact">Contact <span class="counter"></span></a></li>
                </ul>
            </nav>
        </header>
        <section id="accueil" class="header-section">
            <div class="contient">
                <div class="caleche">
                    <div class="col-2">
                        <h1>Slogan</h1>
                        <p class="plusGrand">Phrase d'introduction</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus. Nulla scelerisque laoreet libero sit amet finibus. Aenean posuere dapibus blandit. Praesent ut mi diam. Suspendisse lacinia pulvinar tellus a scelerisque. Mauris non augue risus. Praesent eget risus ultricies, consectetur dolor tempus, cursus eros. Donec tellus lorem, ultrices id pellentesque eget, ultricies sed quam. Mauris interdum lobortis magna in faucibus. Nam rutrum, lorem a varius vestibulum, nunc mi lacinia dui, at faucibus elit lacus pellentesque nisl. Suspendisse eget vestibulum metus. Praesent euismod condimentum consectetur. Cras tempus luctus ante vitae tempor. Duis vitae finibus metus. Quisque pharetra, sapien eu condimentum fermentum, quam ipsum maximus ante, vitae aliquet orci justo nec nisl.</p>
                        <a href="#populaires">Voir &#8594;</a>
                    </div>
                    <div class="col-2">
                        <img src="images/mobile_ligne_bio.webp" alt="landing image">
                    </div>
                </div>
            </div>
        </section>
        <section class="categories">
            <div class="container">
                <h2 class="section-title" id="nouveautes">Nouveautés</h2>
                <div class="rang">
                    <div class="col-4 colonne">
                        <img src="images/push_robe.jpg" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>
                        <h3>Nom du produit</h3>
                        <h4>Prix du produit</h4>
                    </div>
                    <div class="col-4 colonne">
                        <img src="images/produit1.jpg" alt="">
                        <p class="ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>
                        <h3>Nom du produit</h3>
                        <h4>Prix du produit</h4>
                    </div>
                    <div class="col-4 colonne">
                        <img src="images/push_robe.jpg" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>
                        <h3>Nom du produit</h3>
                        <h4>Prix du produit</h4>
                    </div>
                    <div class="col-4 colonne">
                        <img src="images/push_robe.jpg" alt="">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>  
                        <h3>Nom du produit</h3>
                        <h4>Prix du produit</h4>
                    </div>
                </div>
            </div>
        </section>
        <section id="populaires" class="featured-products populaires">
            <div class="container">
                <center>
                    <h3>Populaires</h3>
                </center>
                <div class="rang">
                    <div class="col-4 colonne" style="position: relative;">
                        <a href="/" class="categorie">
                            <img src="images/produit3.jpg" alt="produit 3">
                        </a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>
                        <h3>Catégorie 1</h3>
                        <div class="rating">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star-half-alt"></i>  
                            <i class="fa-regular fa-star"></i>
                        </div>
                        <h4>Prix du produit</h4>
                    </div>
                    <div class="col-4 colonne">
                        <a href="/" class="categorie">
                            <img src="images/produit4.jpg" alt="produit 4">
                        </a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>
                        <h3>Catégorie 2</h3>
                        <div class="rating">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star-half-alt"></i> 
                            <i class="fa-regular fa-star"></i>
                        </div>
                        <h4>Prix du produit</h4>
                    </div>
                    <div class="col-4 colonne">
                        <a href="/" class="categorie">
                            <img src="images/produit5.jpg" alt="produit 5">
                        </a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>
                        <h3>Catégorie 3</h3>
                        <div class="rating">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star-half-alt"></i> 
                            <i class="fa-regular fa-star"></i>
                        </div>
                        <h4>Prix du produit</h4>
                    </div>
                    <div class="col-4 colonne">
                        <a href="/" class="categorie">
                            <img src="images/produit6.jpg" alt="produit 6">
                        </a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>
                       
    

    code CSS : 

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
    
    body{
        font-family: 'Poppins', sans-serif;
        background:#c56810;
    }
    
    *{
        margin:0;
        padding:0;
        box-sizing: border-box;
    }
    
    /**********************************/
    /*en-tête*/
    .header {
        overflow: hidden;
        background-color: #17a72a;
        /* padding: 20px 10px; */
        /* margin-top: -10px; */
        align-items: center;
        background:#c56810;
    }
    /**********************************/
    
    .navbar{
        display: flex;
        align-items:center;
        padding-left:20px;
        padding-top:20px;
        position: relative;/*pour réparer l'en-tête*/
        width: 100%;
        background:#c56810;
    } 
    
    .logo img{
        width:145px;
        height: 120px;
        margin-top:-10px;
        border-radius: 25px;
        /* margin-left:-30px; */
    }
    
    /* Ajouter du padding à droite */
    nav {
        flex: 1; /* Permet d'occuper tout l'espace à l'horizontal */
        display: flex;
        justify-content: flex-end; /* Aligne les liens à droite */
        padding-right: 80px; /* Ajuster cette valeur selon les besoins */
        padding-left: 20px; /* Ajouter ceci pour ajuster l'espace à gauche */
    }
    
    nav ul {
        /*pouvoir de modifier flex par inline-block*/
        display: flex;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    
    /* Style pour chaque élément de la liste */
    nav ul li {
        /*en fonction de si c'est flex ou inline-block, cela change les barres séparantes*/
        display: flex;
        align-items: center; 
    
        /* Espace entre les éléments */
        margin-right: 20px; 
    }
    
    /* Style pour les liens */
    nav ul li a {
        text-decoration: none;
        color: rgb(0, 0, 0);
        position: relative;
    
        /* Rendre le lien un bloc pour que le span soit en dessous */
        display: block; 
    
        /* Centrer le texte et le span */
        text-align: center; 
    }
    
    /* Ajouter une barre verticale sauf pour le dernier élément */
    nav ul li:not(:last-child)::after {
        content: "|";
        margin-left: 10px;
        color: rgb(0, 0, 0);
    }
    
    /* Style pour les chiffres */
    nav ul li a .counter {
        font-size: 0.8em;
        color: rgb(0, 0, 0);
        display: block; 
        /* Ajouter un peu d'espace entre le texte et les chiffres */
        margin-top: 5px; 
    }
    
    .container{
        max-width:1200px;
        margin: 0 auto;
        padding-left: 25px;
        padding-right: 25px;
        background:#c56810;
    }
    
    .contient{
        max-width:1200px;
        margin: 0 auto;
        padding-left: 25px;
        padding-right: 25px;
        background:#c56810;
    }
    
    .caleche {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Change from space-around to space-between */
        flex-wrap: nowrap; /* Prevent wrapping to maintain horizontal alignment */
    }
    
    .caleche h1, p, a {
        margin: 0; /* Remove default margin to ensure tight alignment */
    }
    
    .row{
        display:flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
        /* à ajuster selon les besoins */
        gap: 100px;
    }
    
    .rang{
        display:flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    
    .col-2{
        flex-basis: 50%;
        min-width: 300px;
    }
    
    .col-2:first-child {
        margin-right: 200px; /* Ajuster cette valeur selon les besoins */
    }
    
    .col-2 img{
        width:100%;
        padding: 30px 0;
    }
    
    .col-2 h1{
        font-size:50px;
        line-height: 60px;
        margin:25px 0;
    }
    
    .col-2 a{
        display: inline-block;
        text-decoration: none;
        padding:10px 30px;
        background-color:rgb(0, 0, 0);
        color:#fff;
        border-radius: 30px;
        margin-top: 25px;
        transition: background-color 0.7s;
    }
    
    .col-2 a:hover{
        background-color: rgb(28, 105, 150);
    }
    
    p{
        color:rgb(0, 0, 0)
    }
    
    .header-section{
        margin-top: -30px;
        background: #c56810;
    }
    
    /* style de la section categories */
    .categories{
        margin:70px 0;
    }
    
    .col-3{
        flex-basis:30%;
        min-width: 250px;
        margin:auto;
    }
    
    .col-3 img{
        width:100%;
    }
    
    .container h2{
        text-align: center;
        font-size:2.2rem;
        color:rgb(0, 0, 0);
        margin: 50px 0;
    }
    
    
    /* il faut écrire le nom complet des icônes pour changer leur couleur avec des
    "." à la place des espaces*/
    .fa-solid.fa-star {
        color: #FFD700;
    }
    .fa-solid.fa-star-half-alt{
        color: #FFD700;
    }
    .fa-regular.fa-star{
        color: #FFD700;
    }
    
    header img{
        margin-right: 20px;
    }
    
    /* Style pour l'image user */
    header img[alt="User icon"] {
        border-radius: 50%;
    }
    
    /* Style de l'en-tête */
    .fixed {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #c56810; /* Couleur de fond beige */ /* Un fond pour couvrir les éléments derrière */
        z-index: 1000; /* S'assurer qu'il soit au-dessus des autres éléments */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optionnel: Ajoutez une ombre pour un effet visuel */
        transition: top 0.3s;
    }
    
    /*Style de contact*/
    /*style des 3 cadres*/
    .conteneur {
        display: flex;
        justify-content: space-between; /* Espace entre les cadres */
        align-items: stretch; /* Les cadres s'étendent verticalement */
        padding: 20px;
        background-color: #c71111;
        width: 100%;
    }
    
    .contenant {
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 25px;
        padding-right: 25px;
        background: #c56810
    }
    
    .contenant h2 {
        text-align: center;
        font-size: 2.2rem;
        color: rgb(0, 0, 0);
        margin: 50px 0;
    }
    
    .contenant2 {
        display: flex;
        justify-content: space-between; /* Espace entre les cadres */
        align-items: stretch; /* Les cadres s'étendent verticalement */
        padding: 20px;
        background-color: #af6117; /* Fond beige */
        width: 100%;
    }
    
    .cadre {
        flex: 1; /* Chaque cadre prend un espace égal */
        margin: 0 10px; /* Espace entre les cadres */
        background-color: #833838; /* Couleur de fond des cadres */
        border: 2px solid #000; /* Bordure noire */
        padding: 20px;
        text-align: center; /* Centrer le texte à l'intérieur des cadres */
        height:330px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Place les éléments au début du cadre */
        overflow: hidden; /* Assure que le contenu ne dépasse pas le cadre */
    }
    
    .cadre h4,
    .cadre h5 {
        margin: 0 0 10px 0; /* Ajoute un espace en dessous des titres */
    }
    
    .cadre img {
        max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur du conteneur */
        max-height: 100%; /* S'assure que l'image ne dépasse pas la hauteur du conteneur */
        margin-top: 10px; /* Espace entre les titres et l'image */
        align-self: center; /* Centrer l'image horizontalement */
        object-fit: contain; /* Garde l'aspect ratio de l'image */
        height: auto;
    }
    
    /*style du formulaire et de la map*/
    input[type=text], select, textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid rgb(105, 45, 45);;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
    }
    
    input[type=submit] {
        background-color: #230655;
        color: rgb(122, 26, 26);
        padding: 12px 20px;
        border: none;
        cursor: pointer;
    }
    
    input[type=submit]:hover {
        background-color: #000000;
    }
    
    .column {
        width: calc(50% - 22px);
        margin-top: 6px;
        padding: 20px;
        box-sizing: border-box;
    }
    
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .encadre {
        border-radius: 5px;
        background-color:rgb(187, 50, 95);
        padding: 10px;
        border: 2px solid #000000; /* Cadre noir de 2px */
        margin: 10px; /* Espace autour des cadres */
    }
    
    h3{
        /* text-align: center; */
        color : rgb(0, 0, 0);
    }
    
    /* classe du titre "nouveauté" */
    .section-title {
        margin-top: none; /* Ajustez cette valeur selon vos besoins */
    }
    
    .plusGrand {
        font-size: 18px; /* Augmente la taille du texte à 18 pixels */
    }
    
    /*images des catégories*/
    .categories img {
        height: 350px; /* Ajustez cette hauteur selon les besoins */
        object-fit: cover; /* Assure que l'image conserve son rapport d'aspect et couvre toute la zone définie */
        width: 100%; /* Assure que l'image s'étend sur toute la largeur du conteneur */
    }
    
    /* images des nouveautés */
    .nouveautes img {
        height: 250px; /* Ajuster cette hauteur selon les besoins */
        object-fit: cover; /* Assure que l'image conserve son rapport d'aspect et couvre toute la zone définie */
        width: 100%; /* Assure que l'image s'étend sur toute la largeur du conteneur */
    }
    
    /* images des nouveautés */
    .populaires img {
        height: 350px; /* Ajuster cette hauteur selon les besoins */
        object-fit: cover; /* Assure que l'image conserve son rapport d'aspect et couvre toute la zone définie */
        width: 100%; /* Assure que l'image s'étend sur toute la largeur du conteneur */
    }
    
    @media screen and (max-width: 600px) {
        .column, input[type=submit] {
            width: 100%;
            margin-top: 0;
        }
    }
    
    
    /* lorem ipsum sur les images***************************** */
    /*modifie le mode de la deuxième div*/
    .flex{
        display:flex;
    }
    
    .col-4 p {
        position: absolute;
        /* position: relative; */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%); /*150 en relative et 60 en absolute*/
        width: fit-content;
        max-width: 100%;
        color: rgb(0, 0, 0);
        opacity: 0;
        transition: 4s ease;
        padding: 10px;
        text-align: center;
    }
    
    .col-4:hover p {
        opacity: 1;
    }
    
    .colonne:hover p {
        opacity: 1;
    }
    
    .col-4 img {
        width: 100%;
        transition: filter 0.4s ease;
    
        filter:brightness(70%);
    }
    
    .col-4:hover img {
        filter: brightness(100%);
    }
    /* section des produits les plus populaires */
    .col-4 {
        flex-basis: 25%;
        min-width: 200px;
        padding:15px;
        transition: transform 0.3s;
    }
    
    /* .col-4 img{
        width:100%;
        filter:brightness(40%);
        transition:4s ease;
    } */
    
    .col-4:hover{
        transform: translateY(-10px);
    }
    
    
    /* Réduire l'espace entre l'accueil et nouveauté****************** */
    #nouveautes {
        margin-top: 20px; /* Réduire cette valeur pour diminuer l'espace */
    }
    
    .header-section {
        margin-bottom: 20px; /* Réduire cette valeur pour diminuer l'espace */
    }
    
    /* icone téléphone, mail et adresse */
    .iconetel{
        width:75%;
    }
    
    /* mapimage */
    .imageMap{
        width:100%;
        height:100%;
    }

    Résultat en vidéo : - GIF - Imgur

    J'ai reçu comme instruction de modifier la classe du paragraphe du conteneur col-4 qui était en absolue en relative dans le code CSS. Et comme le texte qui devait être au milieu des images à bougé, j'en ai profité également pour modifier le "transform: translate(-50%, -60%);" en "transform: translate(-50%, -150%);" : 

    .col-4 p {
        /* position: absolute; */
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -150%); /*150 en relative et 60 en absolute*/
        width: fit-content;
        max-width: 100%;
        color: rgb(0, 0, 0);
        opacity: 0;
        transition: 4s ease;
        padding: 10px;
        text-align: center;
    }

    La phrase a bien disparue comme voulu mais le soucis est que suite à cette modification, les titre h3 et h4 qui au départ étaient bien positionnés se sont placés beaucoup plus bas : 

    emplacement de départ : 

    emplacement des titres au départ

    emplacement des titres au départ plus bas

    vidéo avec l'emplacement des titres suite à la modification au début du visionnage et montrant la phrase qui ne s'affiche plus comme voulu à la fin du visionnage : Imgur: The magic of the Internet

    Quelqu'un aurait-il une idée de comment pourrais-je m'y prendre pour replacer mes titres svp ?

     Cordialement,

    -
    Edité par 1Stark 17 juillet 2024 à 0:06:34

    • Partager sur Facebook
    • Partager sur Twitter
      13 juillet 2024 à 15:14:22

      Hello,

      Alors ton message est super complet, mais il est un peu trop complet, alors si tu n'as pas encore de réponse et si tu travailles toujours dessus, il serait plus agréable que tu nous donnes un code plus concis, c'est-à-dire juste ce qui est nécessaire pour comprendre le problème.

      Soit, touts les selecteurs qui ont un rapport avec le texte affiché sur les T-Shirt, et seulement la partie de l'HTML qui créer l'erreur (soit la section avec le T-shirt)

      • Partager sur Facebook
      • Partager sur Twitter
        14 juillet 2024 à 23:39:23

        Bonsoir,

        Toutes mes excuses pour la confusion. J'ai pensé que les aideurs voudraient reproduire le problème en local pour identifier le soucis que je n'ai pas su repérer. Les sections dans lesquelles survient le problème sont celle qui s'appelle "categories" et de celle qui s'appelle "featured-products populaires". Sachant que les deux sections ont le même problème, voici la première avec le nom "categories" avec deux conteneurs au lieu de 4 : 

        <section class="categories">
                <div class="container">
                    <h2 class="section-title" id="nouveautes">Nouveautés</h2>
                    <div class="rang">
                        <div class="col-4 colonne">
                            <img src="images/push_robe.jpg" alt="">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>
                            <h3>Nom du produit</h3>
                            <h4>Prix du produit</h4>
                        </div>
                        <div class="col-4 colonne">
                            <img src="images/produit1.jpg" alt="">
                            <p class="ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>
                            <h3>Nom du produit</h3>
                            <h4>Prix du produit</h4>
                        </div>
                    </div>
                </div>
        </section>

        Sachant que ces mêmes sections ont en commun d'avoir les classes "rang", "colonne", "container" et "col-4", je suppose que le soucis vient de l'une d'elles que voici :

        .rang{
            display:flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        /* ancienne position : position: absolute; */
        .col-4 p { 
            position: relative;
            top: 50%;
            left: 50%;
            /* 150 en relative et 60 en absolute */
            transform: translate(-50%, -150%); 
            width: fit-content;
            max-width: 100%;
            color: rgb(0, 0, 0);
            opacity: 0;
            transition: 4s ease;
            padding: 10px;
            text-align: center;
        }
        
        .col-4:hover p {
            opacity: 1;
        }
        
        .colonne:hover p {
            opacity: 1;
        }
        
        .col-4 img {
            width: 100%;
            transition: filter 0.4s ease;
        
            filter:brightness(70%);
        }
        
        .col-4:hover img {
            filter: brightness(100%);
        }
        .col-4 {
            flex-basis: 25%;
            min-width: 200px;
            padding:15px;
            transition: transform 0.3s;
        }
        .col-4:hover{
            transform: translateY(-10px);
        }

        Les textes que je cherche à remettre en place sont des h3 et h4.  J'ai testé ce cela donnerait si j'enlevai chacune de ces classes mais je n'ai pas réussi à diagnostiquer d'où vient l'effet qui les décale vers le bas.

        Cordialement, 


        -
        Edité par 1Stark 14 juillet 2024 à 23:45:40

        • Partager sur Facebook
        • Partager sur Twitter
          16 juillet 2024 à 10:46:03

          Salut

          Dans le premier code, il y a un style="position: relative;" dans le HTML ligne 115 qui traîne, ce ne serait pas là le problème ?

          -
          Edité par Ymox 16 juillet 2024 à 10:46:26

          • Partager sur Facebook
          • Partager sur Twitter
            16 juillet 2024 à 23:59:26

             Bonsoir,

            J'ai modifié la ligne en question comme ceci pour tester ce que cela donnerait mais rien n'a changé : 

            <div class="col-4 colonne"> <!-- à cette ligne se trouvait "style="position: relative;"" -->
                                <a href="/" class="categorie">
                                    <img src="images/produit3.jpg" alt="produit 3">
                                </a>
                                <!-- reste de la div -->

            Cordialement,

            • Partager sur Facebook
            • Partager sur Twitter
              17 juillet 2024 à 7:18:31

              Un des problèmes est qu'on n'a pas les images, donc on ne peut pas tester le rendu. Mais avec ce que j'ai au niveau HTML, les balises <img /> sont définies à 350 pixels de haut (.populaires .img, ..categories .img) et font grosso modo 258 pixels de large. Or, cela ne correspond pas au ratio des images dans ta capture, où elles semblent plus larges que hautes, seulement ces marges sont relativement proches de ce à quoi je m'attendrais si elles étaient affichées au bon ratio.

              Une piste serait d'utiliser les outils de débogage de ton navigateur. Fais un clic droit sur l'espace qui te gêne et sélectionne « Inspecter ». Non seulement tu pourras voir quel élément HTML créé cet espace, mais en plus tu pourras déterminer quelle règle CSS fait cela.

              • Partager sur Facebook
              • Partager sur Twitter
                19 juillet 2024 à 0:54:01

                Bonjour,

                Voici un fichier zip contenant les images téléchargeables grâce à un lien swisstransfer disponible un mois jusqu'au 18/08/2024 ici.

                En utilisant les outils de débogage de mon navigateur, le meilleur résultat que j'ai réussi à obtenir à mon niveau après avoir ciblé les div les une après les autres jusqu'à arriver aux images et aux titres, est lorsque j'ai réussi à réduire l'espace en décochant "font-family" contenu dans le selecteur du body :

                J'ai également réussi visibiliser les paddings mais pas l'espace entre les titres et les images qui devraient s'afficher en jaune ou en marron d'après ce que j'ai compris : 

                Cordialement,

                -
                Edité par 1Stark 19 juillet 2024 à 0:55:11

                • Partager sur Facebook
                • Partager sur Twitter
                  19 juillet 2024 à 9:55:03

                  D'accord, le souci est bien ce positionnement relatif, mais en conjonction de transform: translate, ce qui certes déplace l'élément, mais par contre fait que l'espace nécessaire reste là où l'élément se trouve dans le DOM. Cela se voit bien avec Firefox qui, au survol de la propriété CSS depuis l'inspecteur, affiche l'emplacement réel en jaune et l'emplacement après translation en bleu, avec guide des coins.

                  Dans un premier temps, je proposerais de revenir à un positionnement absolu et de jouer avec le positionnement vertical après translation, second paramètre de translate(…).

                  Mais probablement qu'en ajoutant un élément qui contiendrait l'image et le paragraphe, élément qui lui serait en positionnement relatif, avec le paragraphe en absolu, permettrait quelque chose de plus académique.

                  Néanmoins, le CSS n'est pas ma meilleure compétence, si quelqu'un d'autre avait une meilleur idée, je pense que ce serait plus pertinent  :)

                  • Partager sur Facebook
                  • Partager sur Twitter
                    20 juillet 2024 à 0:01:02

                    Bonsoir,

                    Merci bien. Grâce à cette précieuse information, j'ai tenter d'ajouter une marge négative sur les h3 et h4 de col-4 comme ceci : 

                    .col-4 h3,h4{
                        margin-top: -75px; /* Marge négative pour combler l'espace */
                    }

                    Comme le titre "Populaire" était aussi affecté par les modifications, je l'ai changé en h2 comme ceci : 

                    <center>
                        <h2>Populaires</h2> 
                    </center>

                    Les titres h3 et h4 semblaient encore se superposer alors j'ai ajouté un double <br> derrière chaque div contenant la classe "rating" comme ceci : 

                    <div class="col-4 colonne">
                                        <a href="/" class="categorie">
                                            <img src="images/produit6.jpg" alt="produit 6">
                                        </a>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor magna et elit vestibulum faucibus.</p>
                                        <h3>Catégorie 3</h3>
                                        <div class="rating">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star-half-alt"></i> 
                                            <i class="fa-regular fa-star"></i>
                                        </div>
                                        <br><br>
                                        <h4>Prix du produit</h4>
                    </div>

                    Voici le résultat final qui me paraît convenable : 

                    Je reste toutefois à l'écoute d'éventuelles remarques.

                    Cordialement,

                    -
                    Edité par 1Stark 20 juillet 2024 à 0:05:09

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Changement d'emplacement de titres involontaire

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                    • Editeur
                    • Markdown