[HTML]+[CSS] Compréhension avec "Flexbox" - - Balises par OrbiOS - page 1

Bonjour à tous,

Je participe à la formation dévelpper web junior depuis une semaine et je bloque sur un cours

Je n'arrive pas à appliquer le principe des "blocks" et de "flexbox". J'ai beau mettre <div id> et <div class> impossible de mettre en pratique le cours " Faite votre mise en page avec Flexbox".

Sûrement une erreur dans mes codes mais je ne trouve pas.

Une âme charitable pour me montrer les fautes ?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style-cv.css" />
        <title>CV de Monsieur Shigeru Miyamoto</title> <!-- Vive Nintendo !:D--->
    </head>

    <body>

    	<header>
            <p class= "Entete"><h1>Monsieur Shigeru Miyamoto</h1></p><br /><br />
            <p class= "Citation" >"Les jeux vidéos sont mauvais pour vous. C'est ce qu'ils disaient du rock-n-roll..."</p>
        </header>
            <div class= "Photoprofil"><a href="Images/Shigeru_Miyamoto_XL.jpg"><img src="images/Shigeru_Miyamoto_L.jpg" alt="Photo_de_presentation" title="Ma photo" /></a></div>


                <br />
                <p><hr></p>
                <br />

        <nav>
            <section>
            <center><p>Liens vers les sections:</p>
                <p><ol>
                <li><a href="#Formations">Mes formations</a></li>
                <li><a href="#Competences">Mes compétences et récompenses</a></li>
                <li><a href="#Creations">Mes expériences et créations</a></li>
                </ol></p></center>
            </section>
        </nav>

                <br />
                <p><hr></p>
                <br />

    <div id="conteneur">
        <div class="element">
            
        <section>
            <center><p><h2>Présentation succinte:</h2></p>
            <p class= "Présentation">Je suis né le 16 novembre 1952 à Sonobe au Japon et je suis créateur et producteur de jeu-vidéo depuis 1977.
            <p class= "Présentation">Je suis un grand passionné de ce monde, aime l'innovation dans les domaines technologiques et adore les mangas.
            <p class= "Présentation">Depuis 1977, je suis le PDG de l'entreprise DG Nintendo EAD.<br /></p>
            <img src="Images/Nintendo_Logo_L.png" height="150" width="350" alt="LogodeNintendo"title="Logo de Nintendo" />
            <figcaption>Le logo de mon entreprise.</figcaption></center>
        </section>

        </div>

        <div class="element">

        <section>
    	   <center><p><a id="Formations"><h3>Mes formations:</h3></a></p>
            <p><ul>
            <li>1965 - Ecole Générale de Sonobé / Japon</li>
            <li>1977 - Université des beaux-arts de Kanazawa / Japon</li>
            <li>1978 - Ecole de Designer Industriel / Japon</li>
            </ul></p><center>
        </section>

        </div>

        <div class="element">

        <section>
        <center><p><a id="Competences"><h3>Mes compétences et récompenses:</h3></a></p>
            <p><ul>
                <p class="infos">Principales compétences:</p>
                <li>Concepteur de jouets en bois</li>
                <li>Principales compétences:</i>
                <li>Designer industriel</li>
                <li>Concepteur de jeux vidéo</li>
                <li>Producteur de jeux vidéo</li>
                <li>Responsable créatif</li>
                <li>Directeur Général</li></p><br />

                <p class="infos">Principales récompenses:</p>
                <li>1998 - AIAS Hall of Fame / USA</li>
                <li>2006 - Chevalier des Arts et des Lettres / France</li>
                <li>2007 - Lifetime Achievement Award / USA</li>
                <li>2010 - BAFTA Games Awards / USA</li>
                <li>2010 - Prix Princesse des Asturies / Espagne</li>
            </ul></p></center>
        </section>

        </div>

        <div class="element">

        <section>
            <center><p><a id="Creations"><h3>Mes expériences et créations:</h3></a></p>
                <p><ol>
                <p class="infos">Expériences:</p>
                <li>1977 - Stagiaire chez Nintendo</li>
                <li>1979 - Arcade developer chez Nintendo R&D1</li>
                <li>1993 - Responsable Nintendo Analysis & Development</li>
                <li>2015 - Directeur de Nintendo</li></ol>
            
                <ol>
                <p class="infos">Exemples de mes créations:</p>
                <li>1981 - Donkey Kong</li>
                <li>1982 - Popeye</li>
                <li>1983 - Mario Bros</li>
                <li>1986 - The Legend of Zelda</li>
                <li>1992 - Yoshi</li>
                </ol></p></center>
        </section>

        </div>

        <p><center>Plus de mes créations <a href="https://fr.wikipedia.org/wiki/Ludographie_de_Shigeru_Miyamoto"title="Ma ludographie"target="_blank">sur cette page</a>.
        </center></p>

    </div>

        <footer>
            <p class="conclusion"><center>Je vous invite à vous rendre sur ma page <a href="https://fr.wikipedia.org/wiki/Shigeru_Miyamoto"title="Ma Page Wikipédia"target="_blank">Wikipédia</a> si vous souhaitez en savoir plus sur moi.</center></p>

            <p class="conclusion"><center>Je suis à votre disposition et reste joignable sur mon adresse <a href="mailto:service@nintendo.de">courriel</a>.</center></p>

            <p class="conclusion"><center>Cordialement,<br /> </center></p>

            <p class="conclusion"><center>Monsieur Miyamoto.<br /></center></p>

            <center><img src="Images/Signature.png"alt="Signature_de_Miyamoto" title="Ma signature" /></center>
        </footer>


        <br />
        <p><hr></p>
        <br />


    
    </body>
</html>

body
{
	font-size: 1.1em;
}

h1
{
	text-shadow: #0066B4 1px 0 10px;
	text-align: center
}

section 

{
	width: 500px;
	border: 5px inset #EE161F;
	text-align: left;
	padding: 12px;
	margin: auto;
}

@font-face 
{
    font-family: 'roboto_condensedregular';
    src: url('Police/RobotoCondensed-Regular-webfont.eot');
    src: url('Police/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Police/RobotoCondensed-Regular-webfont.woff2') format('woff2'),
         url('Police/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('Police/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('Police/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body

{
	font-family: 'roboto_condensedregular', Verdana, Arial, serif;
}

body

{
	background-image: url("Images/mario.png");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top right;
	background-color: #BDBDBD  
}

.Entete
{
	text-align: center;
	font-style: oblique;
}

.Citation
{
	text-align: center;
	font-style: oblique;
	border: inset #0066B4;
	color: #0066B4
}

.Photoprofil
{	width: 300px;
	margin: auto;
	border: inset #EE161F;
	box-shadow: 6px 6px 6px #EE161F;
	text-align: center;
	padding: 25px;}

.Présentation
{
	text-align: center;
	font-style: oblique;
	color: #EE161F
}

.Formation
{
	text-align: center;
}


.infos
{
	text-align: center;
	text-decoration: underline;
}

.Competences
{
	text-align: center;
}

.Creations
{
	text-align: center;
}


.conclusion
{
	text-align: center;
	font-style: oblique;
}

a
{
	text-decoration: none;
	color: #EC1B24
}

a:hover 
{
	text-decoration: underline;
	color: #0066B4
}

a:visited
{
	color: #894B2B


{
	width: 80%;
  	padding: 20px;
  	border: 1px solid #666;
  	background: #ffffff;
}

#conteneur
{
	text-align: center;
	font-style: oblique;
	border: inset #0066B4;
	color: #0066B4
}

Merci !

OrbiOS

10 avril 2019 à 6:27:41

Mewen_bzh

10 avril 2019 à 8:58:37

Bonjour,

Je dois avouer ne pas être certain de comprendre ta question. Si flexbox ne marche pas, c'est peut être parce qu'à aucun moment dans ton CSS tu n'utilises les propriétés de ce module ?

Je te conseille également de revoir tes codes HTML et CSS car il y a encore plusieurs erreurs un peu partout (surtout dans le HTML). Tu devrais utiliser les validateurs HTML (https://validator.w3.org/#validate_by_input) et CSS (https://jigsaw.w3.org/css-validator/#validate_by_input) du W3C pour identifier tes erreurs.

Je ne réponds pas aux messages privés.

FloJDM

10 avril 2019 à 9:32:24

Salut,

Attention à l'indentation du code ;-)

Je suis pratiquement sûr qu'une meilleur indentation te permettra de mieux comprendre tes erreurs.

Et effectivement comme le dit Mewen, pas de mention de flex dans ton code CSS.

( PS : Fais attention, la balise <center> c'est un peu comme le dab, ça mérite la sentence ultime en 2019 )

-
Edité par FloJDM 10 avril 2019 à 9:33:50

-> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

11 avril 2019 à 16:08:46

Salut à vous !

Merci pour vos réponses

Pour répondre à tes interrogations Mewen_bzh, j'avais ajouté les balises

#conteneur

{

display: flex;

}

Mais je ne voyais aucun résultat... J'étais en train de me demander justement si une erreur ne venais pas du code qui empêche "display: flex;" d'agir.

FloJDM, qu'est ce que tu veux dire par "indentation" ? Tu parle de rangement ?

12 avril 2019 à 9:10:55

Les sections dans tes div qui ont la class element devraient être décalés, du coup si tu a mis le display: flex sur le #conteneur c'est toutes tes div qui ont la class element qui seront sujet à ce positionnement combine ça avec un justify-content puis un align-items

[HTML]+[CSS] Compréhension avec "Flexbox" -

Balises

[HTML]+[CSS] Compréhension avec "Flexbox" -

Supprimer

Modérer

Signaler le message aux modérateurs