Déplacer un élément flexbox par AntoineGarcia15 - page 1

Bonjour,

Désolé de ne pas vous avoir répondu rapidement. Mais j'étais tellement content que vous ayez résolu mon problème, j'ai Continué mon site pendant quelques heures.

Je suis vraiment désolé pour le code.

Je ne sais pas si je peux continuer ici, mais j'aurais un dernier problème svp.

J'aimerais coller mes deux lignes " découvrez l'univers Marvel " et "devenez incollable sur l'univers, ses personnages et ses films..."

j'aimerais également que ça tienne sur une ligne.

Et j'aurais une dernière question svp : pour la texture : pour qu'elle colle les bords et le menu horizontal.

Merci beaucoup !

Après ça, promis j'aurais fini.

Bonne soirée

Ps: Soyez indulgent sur le code svp, je commence juste

<!DOCTYPE html>
<html lang="fr">
<head>
    
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="style.css" meta charset="UTF-8" media="all">
</head>
<body>
    <header>
          
            <nav>
                <a href="#Marvel univers"> MARVEL univers</a>
                <a href="#personnages">personnages</a>
                <a href="#cinéma">cinéma</a>
                <a href="#contact">contact</a>
            </nav>
          
    </header>
<main>
 <figure>
    <img src="texture.jpeg" alt="">
    <figcaption>
        <p>DÉCOUVREZ L'UNIVERS  MARVEL !</p>
        <p>Devenez incollable sur l'univers Marvel, ses personnages et ses films...</p>
    </figcaption>
   
   <!--<h1 id=um> DECOUVREZ L'UNIVERS  MARVEL ! </h1>
    <h3 id= incollable> Devenez incollable sur l'univers Marvel, ses personnages et ses films...</h3>--> 
</figure>
    <div class="détail">
    <h2 id="lPE"> LES PERSONNAGES EMBLEMATIQUES </h2>
    <img class="image" src="iron-man.png" alt="">

<p>Iron man</p>
<p> Anthony "tony" Stark, alias Iron
Man, est un super-Héros évoluant
dans l'univers Marvel de la maison
d'édition Marvel Comics.</p>
    <button class="détail" type="button"> détail </button>
    <img src="spiderman.png" alt="">
<p>Spiderman</p>
<p>Peter Parker. allias Spider-Man. est un superheros evoluant
    dans l univers Marvel de la maison d'édition Marvel Comics</p>
    <button class="détail" type="button"> détail </button>
    <img src="captain-america.png" alt="">
<p> Captain America </p>
<p> Captain America est un super-héros de bande dessinée évoluant dans l'univers Marvel de la maison d'édition Marvel Comics</p>
    <button class="détail" type="button"> détail </button>
    <img src="thor.png" alt="">
<p> Thor</p>
<p> Thor est une divinité et un super-héros évoluant dans l'univers Marvel de la maison d'édition Marvel Comics.</p>
    <button class="détail" type="button"> détail </button>
</div>
<h2> ADAPTATION AU CINEMA </h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XMOjYBDMbL0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p> Iron Man</p>
<p> Thor est une divinité et un super-héros évoluant dans l'univers Marvel de la maison d'édition Marvel Comics</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XMOjYBDMbL0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Captain America</p>
<p> Thor est une divinité et un super-héros évoluant dans l'univers Marvel de la maison d'édition Marvel Comics. </p>
<h2>A VENIR</h2>
    <table>
        <tr>
            <td>Nom du film</td>
            <td>Date de sortie</td>
        </tr>
        <tr>
            <td>Captain Marvel</td>
            <td>8 mars 2019</td>
        </tr>
        <tr>
            <td>Avengers: infinity War-Part 2</td>
            <td>3 mai 2019</td>
        </tr>
        <tr>
            <td>Spider-Man: Far from Home</td>
            <td>5 juillet 2019</td>
        </tr>
        <tr>
            <td>Guardians of the Galaxy Vol.3</td>
            <td>2020</td>
        </tr>
    </table>
<h2>CONTACTEZ-NOUS</h2>
<h2>STUDIOS MARVEL</h2>
  

<form method="POST" action="jsp.php">
        
        <label for="inputfirstname">Votre prénom :</label>
        <input type="text" id="inputfirstname">

        <label for="inputemail">Votre email :</label>
        <input type="email" id="inputemail">

        <label for="selectevenement"> Objet de la demmande :</label>
            <select name="" id="selectevenement">
                <option>Evénement</option>
            </select>

        <label for="votremessage">Votre message :</label>
        <textarea name="" id="votremessage" cols="30" rows="4">Saisissez ici votre message</textarea>
    </form>

    <button>Envoyer</button>

    <h2>STUDIOS MARVEL</h2>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58290.89924470706!2d-118.44846089934462!3d33.966046575723745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6312170bff57f5f8!2sManhattan%20Beach%20Studios!5e0!3m2!1sfr!2sfr!4v1630834912509!5m2!1sfr!2sfr" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

    Copyright 2018 ...
    


 </main>
 </body>
</html>

@font-face {
    font-family: 'Bebas';
    src: url('Bebas.woff2') format('woff2'),
        url('Bebas.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
    
body{
    margin: 0;
  }
  nav{
    padding: 15px;
    display: block;
    align-items: center;
    justify-content: flex-end;
    background-color: #ea222d;
    font-size: 17px;
   
  }
  nav a:first-child{
    margin: 0 auto 0 0;
    font-family: bebas;
    font-size: 22px;
  }
  nav a {
    color: white;
    padding: 10px;
    text-decoration: none;
    font-family: roboto;
    
  }

  figure{
    position: relative;
  }
  figure img{
    display: block;
    max-width: 100%;
    height: auto;
    

  }
  figure figcaption{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  figure figcaption p{
    color: #ea222d;
    background-color: white;
    font-family: roboto;
    font-size: 60px;
   
   
  }
  figure figcaption p + p{
    color: white;
    background-color: #ea222d;
    font-size: 35px;

Merci beaucoup !

-
Edité par AntoineGarcia15 18 septembre 2021 à 18:41:44

AntoineGarcia15

18 septembre 2021 à 11:55:06

J'ai un problème qui me tracasse depuis quelques jours sur mon exercice d'application. J'ai un menu horizontal. Sur ce menu horizontal j'ai mis quatre éléments sur la droite. Seulement j'aimerais qu'il y ait un élément sur les quatre qui aille à gauche. (en utilisant flexbox si possible).

Au passage j'aimerais également savoir comment on peut mettre du texte sur une image : j'aimerais qu'il y ait deux lignes sur l'mage dont une qui aurait une couleur de police différente.

En espèrent avoir été clair.

J'ai essayé de mettre une image, mais meme en la redimensionnant elle était trop grande.

Merci beaucoup

Cordialement

Lord Morpheus

18 septembre 2021 à 12:14:14

Je peu te proposer rapidement ceci : https://jsfiddle.net/qLrebmoc/

A toi ensuite d'adapter en fonction de ton code!

Je te conseil également d'aller lire les règles du forum concernant la demande d'aide. Tu aurai du nous poster ton code HTML et CSS via l'outil </> lorsque tu postes ton message. Une image ne nous permet pas de comprendre rapidement ton code!

-
Edité par Lord Morpheus 18 septembre 2021 à 12:15:09

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

18 septembre 2021 à 18:39:18

21 septembre 2021 à 19:32:08

Svp vous pourriez me répondre ?

AbcAbc6

21 septembre 2021 à 22:12:36

Bonsoir,

Passez votre code au validateur pour voir vos erreurs et les corriger => https://validator.w3.org/

meta charset="UTF-8" c'est une balise <meta> cela n'a rien a faire dans une balise <link>

Votre bouton en dehors du formulaire ne sert à rien, il ne soumettra pas le formulaire. Pas de name au textarea?

Pour votre problème si vous utiliser des propriétés CSS du module flexbox, celui-ci doit être indiqué dans la propriété display (votre sélecteur nav).

"DÉCOUVREZ L'UNIVERS MARVEL !" Pour moi ce n'est pas un paragraphe c'est un titre de niveau 1.

-
Edité par AbcAbc6 21 septembre 2021 à 22:13:13

Déplacer un élément flexbox

Déplacer un élément flexbox

Supprimer

Modérer

Signaler le message aux modérateurs