Bonjour, je galère à insérer une div dans une div sans quelle dépasse du conteneur. J'aimerais que la div "itemtext" ne dépasse pas de la photographie présente dans la div item. J'ai peut être mal fait quelque chose dans la construction de mon code. Merci pour votre aide,

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="findmypreciouscss.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Pacifico&display=swap" rel="stylesheet"> 
<title> Find the precious</title>
</head>
<body>
<div id="blocentier">
    <header> <!--Ici le header -->
        <nav> <!--avec la navigation de la page-->
            <ul>
                <li><a href="#"> FindThePrecious.com </a></li> 
                <li><a href="#sectionFellows">Fellows </a></li> 
                <li><a href="#Ring">The Ring</a></li> 
                <li><a href="#reward">Get My Reward</a></li> 
                <li><a href="#hunters">Best Hunters</a></li> 
                <li><a href="#army">Join the army</a></li>   
                <li><a href="#contactus">Contact Us</a></li>   
            </ul>
        </nav>
                        <!--Ici les images dans le header qui bougent-->
       <div id="imagesslide"> 
           <image src=> </image>
       </div> 
    </header>

    <section id="sectionFellows">  <!-- debut de la section fellows-->
        <h2> Fellows wanted dead <span> (or alive if you want to eat them later)</span></h2>
            <ul>            <!--Ici les liens vers les différentes catégories  de bestioles-->
                <li><a href="#sectionmostwanted"> Most Wanted</a></li>
                <li> <a href="#sectionmostdangerous"> Most Dangerous</a></li>
              <li> <a href="#sectionmostdangerous"> Already captured </a></li>
            </ul>
     <!-- ici placer les items des bestioles selon leurs catégories-->
        <div id="sectionmostwanted">
         
          <div class="item">
               <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf">
          <div class="itemtext">
            <p>reward <span>1000</span><br/> golden coins</p>
            </div>
            <p class="nomrew">Gandalf</p>
            
      </div>
         
     
           <div class="item" 
               <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf">
           <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf">
          </div>
         <div class="item" 
               <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf">
      
            <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf">
          </div>
        
      </div>
            
        <div id="sectionmostdangerous">
            <div class="item1">
                <a href="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200" alt="PHOTO"></a>
            </div>  
            <div class="item1">
                <a href="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200" alt="PHOTO"></a>
            </div>  
            <div class="item1">
                <a href="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200" alt="PHOTO"></a>
            </div>  
       </div>

        <div id="sectionalreadycaptured">
            <div class="item3">
                <a href="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200" alt="PHOTO"></a>
            </div>  
            
            <div class="item3">
                <a href="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200" alt="PHOTO"></a>
            </div>  
          <div class="item3">
                <a href="https://via.placeholder.com/200"> <img src="https://via.placeholder.com/200" alt="PHOTO"></a>
            </div> 
        </div>
    </section> <!-- fin de la première section avec les bestioles -->
    
    <article id="reward"> <!--Début de la section reward -->
        <h2> I have captured one of them, how to get my reward ?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Ut bibendum, quam a pellentesque laoreet, mauris lacus rhoncus sapien, quis efficitur metus leo ut nibh. 
            Sed euismod placerat turpis, in fermentum augue blandit in. Mauris rhoncus ipsum felis, nec iaculis elit dictum semper.
             Maecenas iaculis, eros id viverra iaculis, urna nibh suscipit neque, a ultricies massa mi eu justo. Nulla facilisi. 
             In hac habitasse platea dictumst. Cras eget congue leo, nec euismod tellus. Sed turpis purus, placerat a egestas non, maximus non nulla.
              Phasellus efficitur sodales urna, sed efficitur massa porttitor a.
         </p>
         <a href="https://via.placeholder.com/140"> <img src="https://via.placeholder.com/140" alt="PHOTO"></a>
         <input class="Contact us"
                type="button"
                value="Contact Us">
    </article>

    <section id="hunters"> <!--Ici les Hunters-->
        <h2> Best hunters</h2>
            <div id="perso1">
                 <h6>ElvisKiller33</h6>
                 <a href="https://via.placeholder.com/40"> <img src="https://via.placeholder.com/40" alt="PHOTO"></a>
                 <input class="like"
                type="button"
                value="Like">
            </div>
            <div id="perso2">
                    <h6>Goblin45</h6>
                    <a href="https://via.placeholder.com/40"> <img src="https://via.placeholder.com/40" alt="PHOTO"></a>
                    <input class="like"
                     type="button"
                     value="Like">
            </div>
        </section> <!-- fin de la div Hunters-->

    <section id="Ring"> <!--début de la section avec ring-->
        <h2>About The Ring</h2>
            <article id="capabilities">
                <h3>Ring Capabilities</h3>
                    <p>What can our master Sauron do with the ring ?</p>
                        <table>
                            <thead>
                                <tr>
                                    <td> Feature</td>
                                    <td>Description</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Main</td>
                                    <td>One ring to rules them all</td>
                                </tr>
                                <tr>
                                        <td>Invisibility</td>
                                        <td>You can't see me</td>
                                </tr>
                                <tr>
                                        <td>Power</td>
                                        <td>Destroy the world</td>
                                </tr>

                            </tbody>
                        </table>
            </article>
            <article>
                <h3>Why the ring is awesome ?</h3>
                    <p> My precioooooooooooooooooousssssssssss! Hrk Hrk, we want our preeeeeciouuuuuuuussss !!</p>
                    <span> Golum</span>
                    <a href="https://via.placeholder.com/15"> <img src="https://via.placeholder.com/15" alt="PHOTO"></a>
            </article>
    </section>
    <section id="army">
        <h3>Join the Mordor Army, we need you!</h3>
        <a href="https://via.placeholder.com/140"> <img src="https://via.placeholder.com/140" alt="PHOTO"></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Ut bibendum, quam a pellentesque laoreet, mauris lacus rhoncus sapien, quis efficitur metus leo ut nibh. 
                    Sed euismod placerat turpis, in fermentum augue blandit in. Mauris rhoncus ipsum felis, nec iaculis elit dictum semper.
                     Maecenas iaculis, eros id viverra iaculis, urna nibh suscipit neque, a ultricies massa mi eu justo. Nulla facilisi. 
                     In hac habitasse platea dictumst. Cras eget congue leo, nec euismod tellus. Sed turpis purus, placerat a egestas non, maximus non nulla.
                      Phasellus efficitur sodales urna, sed efficitur massa porttitor a.</p>
                      <input class="more"
                      type="button"
                      value="More info on SauronRulesThemAll.com">
    </section>
    <section id="contactus">
            <h1> Contact us</h1>
         <form method="post" action="traitement.php">
            <label for="email">Your email</label> : <input type="email" name="email" id="email" />
            <label for="address">Your address</label> : <input type="text" name="address" id="address" />
       <label for="choix">What have you seen ?</label><br />
       <select name="choix" id="choix">
           <option value="I have seen one of them">I Have seen one of them</option>
           <option value="mother">I have seen your mother</option>
           <option value="lol">I seen nothing</option>
   </select>
       
           <label for="form-message">Message:</label>
           <textarea id="form-message" name="message"></textarea>   
      
</form>
    </section>

    <footer>
        <nav>
            <ul>
                <li><a href="#aboutus">Abount Us </a></li> 
                <li><a href="#sectionFellows">Fellows </a></li> 
                <li><a href="#army">Join the army</a></li> 
                <li><a href="#faq">FAQ</a></li> 
                <li><a href="#rewardconditions">Reward conditions</a></li> 
                <li><a href="#rewardconditions">Legal mentions</a></li> 
                <li><a href="https://sauron4Ever.com"> Sauron4Ever.com</a>  </li> 
                <li><a href="https://twitter.com/?lang=fr"> Follow him also on twitter</a>  </li> 
            </ul>
        </nav>
    </footer>
</div>
</body>
</html>

Le Css

/*
style.css
---------   Par 
*/
 

/* Ici on vas placer les généralités de la page web */
body
{
    background-color: hsla(hue, saturation, lightness, alpha)
}
@font-face
font-family : cursive;  
ul, li
{
    list-style: none;
}
p
{
    color: darkgray;
    text-align: justify;
}

h1,h2
{
    color: burlywood;
    font-size: 35px;
    text-align: center;
}
#blocentier
{
    width: 98%;
    margin:auto;
}   

/* Ici on s'interesse au header */
#imagesslide
{

    margin-top: 10px;   
    height: 280px;
    border-radius: 5px;
    background: url("https://indestructiblemoii.files.wordpress.com/2018/10/16049943lpw-16050485-article-jpg_5455487.jpg") no-repeat;
    background-size: 100%;
    box-shadow: 0px 4px 4px #9e9691;
    margin-bottom: 25px;
}
/* Ici on s'interesse au nav*/
nav
{
    display: flex;
    justify-content: space-around;
    list-style: none;
}

nav li
{
    display: inline;
    margin-right: 13px;
}
nav :link
{
    color: rgb(223, 161, 6);
}
nav :visited
{
    color: rgb(175, 0, 175);
}
nav a:hover
{
    color: rgb(211, 253, 22)    ;
    border-bottom: 4px solid rgba(246, 211, 53, 0.89);
    font-style: italic;
    font-size: 10px;
  
    }


/* ICI sectionFellows */
#sectionFellows span
{
    font-size: 18px;
}
#sectionFellows li  /* ICI nav sectionFellows */
{
    display: inline;
    justify-content: space-around;
    
}
#sectionFellows ul
{
    
    display: flex;
    justify-content: space-around;
    
}
#sectionFellows a:hover
{
    color: red    ;
    border-bottom: 4px solid rgba(246, 211, 53, 0.89);
    font-style: italic;
    font-size: 10px;
    }
/* Ici la section Captured aide ici https://www.tiloweb.com/css/redimensionner-rogner-des-images-en-css*/

#sectionmostwanted
{
    display:flex;
    flex-direction:row;
    justify-content: space-around;
    margin:auto;
    border:5 px;
    width: 80%;
    height: 85%;
}
.item {
    display: flex;
    margin:1px;
    background-size: cover;
    opacity: 0.5;
    text-align: center;
  border: 8px solid blue;
}
.item:hover
{
    opacity: 1;
}

.itemtext 
{
    display: inline-block;
    padding:10px;
    color: black;
    font-size: 15px;
    background: white;
    border-radius: 6px;
    border: 8px solid green;
}
.itemtext  span
{
    color: orangered;
}
.itemtext:hover 
{
    opacity:0;
}
.nomrew
{
    position: relative;
    top: 10px;
    color: white;
    font-size: 19px;
}
#sectionmostdangerous
{
display:flex;
    justify-content: space-around;
    margin:auto;
    border: ;
    width: 85%;
    height: 85%;
 }


.item1 {
  
    margin:5px;
    background-size: cover;
    width: 200px;
    height: 200px;
    }
 #sectionalreadycaptured
{
display:flex;
    justify-content: space-around;
    margin:auto;
    border: ;
    width: 85%;
    height: 85%;
 }
.item3
{
  margin:5px;
    background-size: cover;
    width: 200px;
    height: 200px;
}

GaetanBasset

19 juin 2019 à 15:50:53

Lamecarlate

19 juin 2019 à 15:58:54

Bonjour,

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet : https://openclassrooms.com/forum/sujet/css-flexbox-5 (je changerai l'url ici quand le titre aura été changé, comme demandé)

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Forums des Zéros

CSS FLEXBOX DIV

DIV dans une Div

Doublon

CSS FLEXBOX DIV

DIV dans une Div

Doublon

Supprimer

Modérer

Signaler le message aux modérateurs