Sujet Précédent Sujet Suivant

Superposer du texte sur une image (HTML/CSS)

Fermé
bh_france Messages postés 8 Date d'inscription vendredi 1 février 2019 Statut Membre Dernière intervention 23 juillet 2023 - Modifié le 26 nov. 2022 à 16:23
 Semev - 2 déc. 2022 à 11:31

Bonjour à tous,

Je suis en train de créer mon portfolio.

Je cherche à superposer du texte sur une image mais je n'arrive pas avec le CSS notamment et malgré les recherches sur Internet.

Voici mon code : 

[HTML]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
    <title>Mon Portfolio A.B</title>
</head>
<body>
    <header>
        <nav id="navbar">
            <ul class="nav-list">
                <li><a href="#presentation">Présentation</a></li>
                <li><a href="#parcours-experiences">Parcours</a></li>
                <li><a href="#projets">Projets</a></li>
                <li><a href="#compétences">Compétences</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <div class="photo-nom">
        <img src="./istockphoto-1047259374-612x612.jpeg" alt="code" style="width: 100%; height: 800px;">
        <div class="text">
            <p>Alpha BAH - Développeur en Formation</p>
        </div>
    </div>
    
    <div id="presentation">
        <h2>PRESENTATION</h2>
        <p>Je suis un développeur en devenir.</p>
    </div>

    <div id="parcours-experiences">
        <h2>PARCOURS ET EXPERIENCES</h2>
        <p>Voici mon parcours depuis le début de mes études supérieures</p>
    </div>
 
     <div id="projets">
        <h2>PROJETS</h2>
        <p>Pico-8</p>
        <p>Dataviz</p>
    </div>

    <div id="compétences">
        <h2>COMPÉTENCES</h2>
        <p>HTML, CSS, JAVASCRIPT</p>
    </div>

    <footer id="contact">
        <h2>CONTACT</h2>
        <p>LinkedIn Github</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

[CSS]

/* LE CORPS DE LA PAGE */
body {
    margin: 0;
}

/* BARRE DE NAVIGATION */

nav {
    display: flex;
    justify-content: flex-end;
    background-color: rgb(25, 92, 193);
    width: 100%;
    transition: 0.1s;
}

.nav-list {
    display: flex;
    flex-direction: row;
    margin: 0;
}

.nav-list li a {
    display: block;
    text-decoration: none;
    padding: 25px;
    color: black;
    font-family: "Fredoka One";
}

.nav-list li:hover {
    background-color: gold;
}

.nav-list a:hover {
    color: rebeccapurple;
}

ul {
    text-decoration: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* PHOTO DE CODE */

.photo-nom {
    position: relative;
}

.photo-nom .text {
    position: absolute;
    color: white;
}

/* SECTIONS */

#presentation, #parcours-experiences, #projets, #compétences, footer {
    display: flex;
    align-content: center;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    padding-top: 5%;
    padding-bottom: 5%;
}

#presentation, #projets, #contact {
    background-color: rgb(174, 171, 171);
}

Voici le résultat : 

Votre aide dans ce forum est vraiment le bienvenue :)

Je vous remercie.

A voir également:

1 réponse

Réponse 1 / 1
Semev
2 déc. 2022 à 11:31

Salut,

l'image étant en positionnement relatif et le texte en absolu vous prenez pas la solution la plus facile.

Si vous sortez du flux des éléments de la page(en positionnement relatif ou absolu ce n'est plus le flux normal) il est nécessaire d'indiquer un décalage "relatif" ou "absolu"(par rapport au coin haut-gauche de la page):

.maClasseAbsolu{position:absolute; top:10%;}

indique que les éléments avec la classe maClasseAbsolu seront positionnés à 10% de la hauteur de la page(à partir de x=0,y=0 soit le coin haut à gauche de la page)

.maClasseRelative{position:relative; left:100px;}

indique que les éléments avec la classe maClasseRelative seront positionnés de 100px à gauche par rapport à l'élément précédent du flux.

Le mieux quand on sait pas c'est de regarder des tutos sur des point précis comme ici:

https://www.google.fr/search?q=positionnement+css

Plus simple encore vous utilisez l'image en arrière plan avec la propriété CSS background-image du container voulu et écrire le texte normalement dans la page.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses