Partage
  • Partager sur Facebook
  • Partager sur Twitter

HTML5 semaine 4

Exercice 4

BenJi26
13 juillet 2019 à 16:37:15

Bonjour, je reste bloqué à l'exercice de la semaine 4 depuis 2 jours. J'ai effectué plusieurs possibilités en vain.

Pouvez vous m'aider svp? 

J'ai indiqué les codes sur css comme sur le cours mais rien ne se passe.

J'ai cherché sur le forum mais je n'ai rien trouvé vu chacun fait à sa manière.

Merci

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<link rel="stylesheet" href="style-cv.css" />

<title>Mon CV</title>

</head>

<body>

<div class="liseret"></div>

<header>

<h1> La Provence </h1>

<p1>

Responsable d'établissements de location saisonnière , Apprenti</p1>

<p></p>

</header>

<a href="images/Moi.jpg"><img src="images/Moi-mini.jpg" class="float" alt="Photo de Benjamin" /></a>

<div id="conteneur">

<section>

<section id="experience">

<h3>Mon expérience </h3>

<ul>

<li><strong>De 2011 à aujourd'hui</strong> : Le public</li>

<li><strong>De 2016 à aujourd'hui</strong> : Responsable de trois établissements de location saisonnière24</li>

</ul>

</section>

<section>

<section id="competences">

<h3>Mes compétences</h3>

<ul>

<li>Management, comptabilité, gestion</li>

</ul>

</section>

<section>

<h3>Ma formation</h3>

<section id="formation">

<p>Apprentissage sur le terrain</p>

<p>Formation Bac pro comptabilité</p>

</section>

</div>

<body>

</html>

CSS

@font-face {

    font-family: 'ambleregular';

    src: url('fonts/Amble-Regular-webfont.eot');

    src: url('fonts/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),

         url('fonts/Amble-Regular-webfont.woff2') format('woff2'),

         url('fonts/Amble-Regular-webfont.woff') format('woff'),

         url('fonts/Amble-Regular-webfont.ttf') format('truetype'),

         url('fonts/Amble-Regular-webfont.svg#ambleregular') format('svg');

    font-weight: normal;

    font-style: normal;

}

h3

{

color : red ;

}

.float

{

    border:2px ridge black;

    float:right;

    margin-top:-129px;

    vertical-align:top;

    box-shadow:112px 2px 8px blue;

}

header

{

text-align: center;

width: 100%;

height: 100%;

}

#conteneur

{

    margin: 10%;

    display:flex;

    justify-content: space-between;

}

.liseret

{

position: fixed;

    left: 1%;

    bottom: 1%;

    top:1%;

    width: 80px;

    height: 80%px;

    background: black;

    border-radius: 5px;

}

section

{

    display: inline-block;

    width:040%;

    margin: 03%;

}

html

{

    height: 100%;

}

html, #liseret, body

{

    display: flex;

    flex-direction: column;

    height: 100%;

}

/* On adapte l'affichage aux petites résolutions */

@media screen and (max-width : 800px)

{

  section {

    display : block;

  }

  #competences, #experience, #formation {

    margin : 0;

  }

  #lisere {

    float : none;

    display : none;

  }

}

  • Partager sur Facebook
  • Partager sur Twitter
UmmZ
13 juillet 2019 à 17:00:47

Salut,

sur quoi es-tu bloquer exactement ?

  • Partager sur Facebook
  • Partager sur Twitter
AbcAbc6
13 juillet 2019 à 18:03:40

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

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

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 : HTML5 semaine 4)

Bonjour, tu as différentes erreurs passe ton code au validateur pour les voir et les corriger => https://validator.w3.org/

La balise <p1> n’existe pas.

Tu as un paragraphe vide => à supprimer

Tu ne fermes pas correctement tes balises.

Pourquoi une <section> dans une <section> ? Tu n’as pas besoin de ça pour cet exercice.

En CSS choisi ton unité : tu ne peux avoir height: 80%px; La aussi le validateur détecte ce genre d’erreurs. => http://jigsaw.w3.org/css-validator/ 

Écrit d’abord un code HTML correct, valide et fonctionnel. Et seulement après tu peux écrire le CSS pas avant.

  • Partager sur Facebook
  • Partager sur Twitter
MilenAtanasov
14 juillet 2019 à 0:51:03

Erreurs:
- TROP de "<section>
- code illesible - structures mieux, regardes un fois en plus les videos pendant les formations

Reparer tous les sections:
<section>
<section id="competences">
...
</section>
<section>
<h3>...</h3>
<section id="formation">
<p>...</p>
<p>...</p>
</section>

Le resultat :

sections

-
Edité par MilenAtanasov 14 juillet 2019 à 0:56:55

  • Partager sur Facebook
  • Partager sur Twitter