[Résolu] Transition de texte à un autre endroit - Transition non-voulue difficile à diagnostiquer par 1Stark - page 1

Bonjour,

Le but est de créer le début d'un site vitrine pour une boutique de vêtement. Voici le début du 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="/">Bébé <span class="counter">(0-36 mois)</span></a></li>
                <li><a href="/">Enfant <span class="counter"> (3-11 ans)</span></a></li>
                <li><a href="/">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">
                    <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>

voici l'intégralité du 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;
}

/* 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);
}

/* 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;
    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; /* Ajuster cette valeur selon les besoins */
}

.plusGrand {
    font-size: 18px; /* Augmente la taille du texte à 18 pixels */
}

/*images des catégories*/
.categories 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 */
}

/* 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;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    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(40%);
}

.col-4:hover img {
    filter: brightness(70%);
}

/* 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%;
}

Je veux qu'un texte lorem ipsum s'affiche sur les images avec une transition lorsque l'on place le curseur dessus mais le problème est que lorsque l'on survol une image dans la section "nouveautés" puis que l'on remonte tout de suite dans l'accueil, il y a une phrase lorem ipsum qui s'affiche à l'écran avant de disparaître. Au début, j'ai soupçonné que le soucis venait du javascript dans le head donc je l'ai mis en commentaire, mais ce n'est pas le cas. L'apparition et la disparition du lorem ipsum vient bien de la partie suivante mais je n'ai pas réussi à diagnostiquer ce qui provoquait l'apparition de texte dans la section "accueil" quand on revient de la section "nouveautés":

.col-4 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    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;
}

Quelqu'un arrive-t-il par hasard à voir d'où émane ce problème s'il vous plaît ?

Cordialement,

-
Edité par 1Stark 3 juillet 2024 à 21:18:59

1Stark

3 juillet 2024 à 21:11:31

Domi65

4 juillet 2024 à 15:14:03

Bonjour.

Les p placés dans les conteneurs de classe col-4 sont placés en position absolue.

Un élément positionné en absolu a comme référence de positionnement son plus proche parent positionné. Et dans ton code, il n'y en a pas. C'est donc la balise la plus éloignée, à savoir le body qui fait référence. D'où le fait que tu les retrouves en haut de page.

Ajoute à ta classe col-4 la déclaration position: relative et les choses devraient rentrer dans l'ordre.

8 juillet 2024 à 20:30:24

Merci, effectivement la phrase n'apparaît plus lorsque je change le bout de code en question comme ceci :

.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;
}

Toutefois un nouveau problème qui survient dont il vaudrait peut-être mieux que j'ouvre un autre sujet.

-
Edité par 1Stark 9 juillet 2024 à 18:53:11

Transition de texte à un autre endroit

Transition non-voulue difficile à diagnostiquer

Transition de texte à un autre endroit

Supprimer

Modérer

Signaler le message aux modérateurs