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>
Merci de colorer votre code à l'aide du bouton Code
Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.
Mauvais titre
Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.
Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).
De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.
Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.
Pour modifier votre titre, éditez le premier message de votre sujet.
(titre originel : css Flexbox)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Bonjour, j'ai essayé plusieurs choses et decidé de récrire que le passage qui me pose problème afin d'y voir plus clair. Mon soucis est que je n'arrive en réalité pas à placer mon texte "text1" au dessus de la photographie 1 dans une zone flexbox avec 3 div.
Il disparaît sous la photographie.
voici mon code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Find the precious</title>
<link rel="stylesheet" href="findThePrecious.css">
</head>
<body>
<div id="sectionmostwanted">
<div class="item">
<img src=http://images.innoveduc.fr/integration_gandalf.png alt="the wizard">
</div>
<p class=text1> The caca on the city </p>
<div class="item">
<img src=http://images.innoveduc.fr/integration_gandalf.png alt="the wizard"> </div>
<div class="item">
<img src=http://images.innoveduc.fr/integration_gandalf.png alt="the wizard"> </div>
</div>
</body>
</html>
Je pense que tu devrais utiliser les listes (ul, li etc..) . Par contre là où où ton code pose problème c'est quand tu donnes une classe à une balise p , on ne peut pas faire ça !!
Oui j'ai rien dit pour balise p , comme elle ne marchait pas dans son cas enfin sur mon pc du moins et que j'en utilise jamais .
Si je conseille les liste c'est pour qu'il puisse revoir son arborescence. Ainsi il aurait tout de suite vu comment résoudre le problème , enfin je pense .
Dommage que le site soit un peu cassé et que je puisse pas supprimer ce que j'ai dit sur la balise p
css Flexbox
× 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.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)