Notion conteneur et éléments

Sujet résolu

4 février 2020 à 18:30:18

Bonjour à tous,

Je suis arrivé au chapitre "Mise en page avec FlexBox" et je butre sur l'exercice qui consiste à afficher un conteneur avec 3 éléments.

On m'indique une partie de l'HTML mais je na'rrive pas à trouver le reste, ainsi que le fichier CSS pour obtenir ce qui s'affiche dans ma pièce jointe.

Si j'avais un exemple je pourrai ensuite continuer ce cours.

Merci par avance à tous.

Gérard LAFONT

AbcAbc6

4 février 2020 à 18:42:53

Bonjour, quel est le code HTML et CSS que vous avez écrit?

Ceci est basique l'image montre le comportement par défaut des block, donc jusque la cela devrait être compréhensible.

>>> Si je mets une bordure au conteneur, une taille et une couleur de fond aux éléments, on va vite voir comment ils s'organisent :

A cette étape du cours vous devriez être capable de réaliser cela sans que l'on vous donne tout cuit le code correspondant. Si c'est cette partie qui vous bloque, renvoyer les chapitres précédant.

Le CSS de la partie flexbox est expliqué plus bas dans la page.

-
Edité par AbcAbc6 4 février 2020 à 18:43:38

Gérard LAFONT

6 février 2020 à 14:37:53 - Message modéré pour le motif suivant : Merci d'utiliser le bouton code du forum pour insérer votre code

Gérard LAFONT

Frogweb

6 février 2020 à 15:06:52

Salut,

il faut que tu revois les bases.

La classe que tu as mis dans le code html sur tes éléments est "element".
Donc dans ta CSS, pour les cibler, c'est :

.element {
  ...
}

Et tu as deux id identiques, ce n'est pas correct. Un nom d'id doit être unique dans une page.

-
Edité par Frogweb 6 février 2020 à 15:08:44

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

AbcAbc6

6 février 2020 à 16:19:36

Bonjour,

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 Code 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>.

Liens conseillés

Règles générales du forum

Bonjour, inutile d'aller plus avant dans le cours il faut que tu revoies les chapitres précédant.

Une class dans la CSS s'écrit avec un point puis le nom de la class et les propriétés/valeurs dans les accolades.

Tu ne peux avoir plusieurs balises avec le même identifient donc pas deux balise avec id="conteneur". >

On ne place pas de <div> dans un paragraphe, ni tout autre block. Ici le paragraphe n'a pas lieu d'être.

Après le </body> vient obligatoirement un </html> et rien d'autre.

Passe ton code au validateur pour voir et corriger tes erreurs => https://validator.w3.org/

-
Edité par AbcAbc6 6 février 2020 à 16:22:17

Gérard LAFONT

6 février 2020 à 17:49:09 - Message modéré pour le motif suivant : Merci d'utiliser le bouton code du forum pour insérer votre code

Gérard LAFONT

AbcAbc6

6 février 2020 à 17:53:25

Mon message plus haut n'est pas clair?

Pour poster du code sur le forum, merci d'utiliser l'outil d'intégration de code inclut dans le forum. (en choisissant le bon langage). Merci de respecter les règles du forum.

En image cela donne :

-
Edité par AbcAbc6 6 février 2020 à 17:59:04

Gérard LAFONT

7 février 2020 à 17:47:01

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="proprietes-conteneur.css" />
		<title>Conteneur</title>
		</head>
		<body>
<div> id="conteneur"</div>
    <div>class="element">Elément 1</div>
    <div>class="element">Elément 2</div>
    <div>class="element">Elément 3</div>
	</body>
</html>

 .element
{
	color: blue;
	border: 3px blue solid;
}

Gérard LAFONT

Frogweb

7 février 2020 à 17:57:56

Gérard LAFONT a écrit:

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="proprietes-conteneur.css" />
		<title>Conteneur</title>
		</head>
		<body>
<div> id="conteneur"</div>
    <div>class="element">Elément 1</div>
    <div>class="element">Elément 2</div>
    <div>class="element">Elément 3</div>
	</body>
</html>

 .element
{
	color: blue;
	border: 3px blue solid;
}

Non.

correction :

<div id="conteneur">
    <div class="element">Elément 1</div>
    <div class="element">Elément 2</div>
    <div class="element">Elément 3</div>
</div>

Class et id sont des attributs, il doivent être à l'intérieur de la balise ouvrante.
Et la div conteneur est là pour englober les autres div, donc elle doit être fermée après les autres div.

-
Edité par Frogweb 7 février 2020 à 17:58:43

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Gérard LAFONT

9 février 2020 à 13:10:02

Merci,

Je crois avoir compris cette fois. Cela fonctionne. Je vais enfin pouvoir continuer.

Cordialement.

Gérard LAFONT

AbcAbc6

9 février 2020 à 13:13:10

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e