Partage

[HTML & CSS] Activité HTML5 - Semaine 3

Créer des blocs a la verticale

Sujet résolu

Anonyme

26 mai 2018 à 18:31:20

Bonjour,

Je n'ai pas trouvé réponse a mon problème alors je poste ici excusez moi s'il existe déjà un sujet traitant celui si.

Je suis en train des suivre le cours sur le HTML et le CSS, et la je suis en train de réaliser les activités.

J'ai réussi l'activité 1,2 mais au 3ème je bloque. Pour la 3ème activité il faut que fasse des blocs alignés verticalement hors les miens sont alignés horizontalement.

Voici mon code HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="style.css"/>
        <link rel="icon" type="image/png" href="images.png" />
        <title>Activité CV</title>
    </head>

    <body>
    <div id="wrapper">
   <div class="sidebar" id="sidebar">
   </div><!-- commentaire qui supprime l'espace indésirable du au inline-block
   --><section id="content">

<a href="images.png"> <img src="images_mini.png" alt="user" title="Cliquez pour agrandir"/> </a>

<h1 class="textalign"> User (nom de la personne) </h1>
<p class="textalign"> J'aime l'informatique </p>

 
<section id="content">
<h2> Mon expérience </h2>
<ul>
    <li> <strong> De 2015 à 2016 : </strong> Je faisais des vidéos <br> sur youtube pour la 1ère fois pour montrer <br> <a href="https://www.youtube.com/channel/UCLdrBJ_BUH7l4qOeo1P9rBw"> mes speed arts (designer) </a> </li> <br>
    <li> <strong> De 2016 à 2017 : </strong> Je faisais des vidéos <br> de mes meilleurs moment de ma <br> <a href="https://www.youtube.com/c/Divlo"> chaine youtube </a> </li> <br>
    <li> <strong> De 2017 à 2018 : </strong> J'apprend les langages <br> de programmation tels que : le HTML et CSS <br> puis plus tard  :  PHP, SQL, C++, Phyton </li> <br>
</ul>
</article>

<section id="content">
<h2> Mes Compétences </h2>
<ul>
    <li>HTML5 & CSS3</li>
    <li>Libre Office</li>
    <li>Camatsia studio 8</li>
    <li>Photoshop CS6</li>
</ul>
</article>

<section id="content">
<h2> Ma formation </h2>
<p> J'apprends beaucoup de choses sur OpenClassrooms. </p>
</article>

    </body>
</html>

Voici le code CSS :

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

p, h1, h2, ul
{
  font-family: 'ambleregular', Verdana, sans-serif, Arial, "Arial Black"
}

strong
{
  font-weight: bold;
}

h2
{
  color: #6E6E6E;
}

.textalign
{
  text-align: center;
}

img
{
	float: right;
	border: 3px #2E9AFE solid;
	box-shadow: 2px 2px 2px black;
}

body 
{
  background-color: #d2dade;
}

section
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

html, body , #wrapper {
    height: 100%;
    margin: 0;
    padding: 0;
} 
 
.sidebar {
background-image:url(papier-peint.jpg);
    width: 100px;
     height: 100%;
}   
 
#content, #sidebar { 
    display: inline-block;
    vertical-align: top;
}

Je croyais qu'il fallait utiliser Flexbox. Je l'ai mal utilisé ?

Merci pour vos réponses

-
Edité par Anonyme 26 mai 2018 à 18:31:38

Zoki_Marciano

26 mai 2018 à 20:02:12

Salut, un résumé :

- un id est à usage unique la tu utilises le même plusieurs fois

- tu ne fermes pas tes balises systématiquement et c'est obligatoire.

- les expériences ne doivent pas être dans un menu ça ne sert à rien avec flexbox.

Remet un coup de propre dans ton code et fais un découpage logique. Essai et met ton code ici pour qu'on t'aide.

-
Edité par Zoki_Marciano 26 mai 2018 à 20:09:45

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Anonyme

26 mai 2018 à 21:11:17

Zoki_Marciano a écrit:

Salut, un résumé :

- un id est à usage unique la tu utilises le même plusieurs fois

- tu ne fermes pas tes balises systématiquement et c'est obligatoire.

- les expériences ne doivent pas être dans un menu ça ne sert à rien avec flexbox.

Remet un coup de propre dans ton code et fais un découpage logique. Essai et met ton code ici pour qu'on t'aide.

-
Edité par Zoki_Marciano il y a environ 1 heure

Ah oui effectivement merci ! J'avais oublié de fermer les balises section, j'ai re nettoyer mon code ducoup et j'ai supprimer certain element car je m'en sortais pas dans mon propre code :euh: Sinon tu m'as dit que les expériences ne doivent pas être dans un menu bah c'est le but de l'activité... sinon explique comment je pourrais faire pour faire une liste.

Voici mon nouveau code :

Code HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="style.css"/>
        <link rel="icon" type="image/png" href="images.png" />
        <title>Activité CV</title>
    </head>

    <body>

<a href="images.png"> <img src="images_mini.png" alt="user" title="Cliquez pour agrandir"/> </a>

<h1 class="textalign"> User (nom de la personne) </h1>
<p class="textalign"> J'aime l'informatique </p>

 
<div class="conteneur">

<section class="element">
<h2> Mon expérience </h2>
<ul>
    <li> <strong> De 2015 à 2016 : </strong> Je faisais des vidéos <br> sur youtube pour la 1ère fois pour montrer <br> <a href="https://www.youtube.com/channel/UCLdrBJ_BUH7l4qOeo1P9rBw"> mes speed arts (designer) </a> </li> <br>
    <li> <strong> De 2016 à 2017 : </strong> Je faisais des vidéos <br> de mes meilleurs moment de ma <br> <a href="https://www.youtube.com/c/Divlo"> chaine youtube </a> </li> <br>
    <li> <strong> De 2017 à 2018 : </strong> J'apprend les langages <br> de programmation tels que : le HTML et CSS <br> puis plus tard  :  PHP, SQL, C++, Phyton </li> <br>
</ul>
</section>

<section class="element">
<h2> Mes Compétences </h2>
<ul>
    <li>HTML5 & CSS3</li>
    <li>Libre Office</li>
    <li>Camatsia studio 8</li>
    <li>Photoshop CS6</li>
</ul>
</section>

<section class="element">
<h2> Ma formation </h2>
<p> J'apprends beaucoup de choses sur OpenClassrooms. </p>
</section>

</div>

    </body>
</html>

Code CSS :

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

p, h1, h2, ul
{
  font-family: 'ambleregular', Verdana, sans-serif, Arial, "Arial Black"
}

strong
{
  font-weight: bold;
}

h2
{
  color: #6E6E6E;
}

.textalign
{
  text-align: center;
}

img
{
	float: right;
	border: 3px #2E9AFE solid;
	box-shadow: 2px 2px 2px black;
}

body 
{
  background-color: #d2dade;
}

section
{
    display: flex;
    flex-direction: row;
}

.conteneur
{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.element
{

}

Pour l'instant pour .element j'ai rien mit et j'ai enlever le liséréje le mettrai plus tard

Ducoup j'ai quand même un problème, j'aimerais que mes éléments (mes expériences, mes compétences, ma formation) saute d'une ligne avec le titre car pour l'instant ca donne ca :

alors que j'aimerais que sa soit comme ca :

Merci pour vos réponses

-
Edité par Anonyme 26 mai 2018 à 21:14:49

Lamecarlate

26 mai 2018 à 21:14:38

Bonjour,

Merci d'utiliser la mise en forme de 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: c;">Votre code ici</pre>.

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

Anonyme

26 mai 2018 à 21:19:41

Lamecarlate a écrit:

Bonjour,

Merci d'utiliser la mise en forme de 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: c;">Votre code ici</pre>.

J'ai mit mon code comme ca avec l'utilitaire qu'il faut...

-
Edité par Anonyme 26 mai 2018 à 21:19:52

Zoki_Marciano

26 mai 2018 à 21:38:18

Autant pour moi ok pour le menu, alors pour que t'y arrives il faut que tu découpes ta section comme ceci :

<section class="container">
  <article class="experiences">
    <!-- ICI TON MENU -->
  </article>
  <article class="competences">
    <!-- ICI TON MENU -->
  </article>  
  <article class="formations">
    <!-- ICI TON MENU -->
  </article>
</section>

En suite tu met la section container en display flex etc... tu vois ce que je veux dire?

-
Edité par Zoki_Marciano 26 mai 2018 à 21:39:32

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Anonyme

26 mai 2018 à 22:01:57

Zoki_Marciano a écrit:

Autant pour moi ok pour le menu, alors pour que t'y arrives il faut que tu découpes ta section comme ceci :
<section class="container">
  <article class="experiences">
    
  </article>
  <article class="competences">
    
  </article>  
  <article class="formations">
    
  </article>
</section>
En suite tu met la section container en display flex etc... tu vois ce que je veux dire?

-
Edité par Zoki_Marciano il y a 5 minutes

Merci je me rapproche de ce que j'aimerais avoir mais j'ai un problème avec mon liséré il ne se met pas en haut.

Mon code HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="style.css"/>
        <link rel="icon" type="image/png" href="images.png" />
        <title>Activité CV</title>
    </head>

    <body>

<div class="sidebar">
            sidebar
</div>

<a href="images.png"> <img src="images_mini.png" alt="user" title="Cliquez pour agrandir"/> </a>

<h1 class="textalign"> User (nom de la personne) </h1>
<p class="textalign"> J'aime l'informatique </p>

 
<div class="container">

  <article class="experiences">
    <h2> Mon expérience </h2>
<ul>
    <li> <strong> De 2015 à 2016 : </strong> Je faisais des vidéos <br> sur youtube pour la 1ère fois pour montrer <br> <a href="https://www.youtube.com/channel/UCLdrBJ_BUH7l4qOeo1P9rBw"> mes speed arts (designer) </a> </li> <br>
    <li> <strong> De 2016 à 2017 : </strong> Je faisais des vidéos <br> de mes meilleurs moment de ma <br> <a href="https://www.youtube.com/c/Divlo"> chaine youtube </a> </li> <br>
    <li> <strong> De 2017 à 2018 : </strong> J'apprend les langages <br> de programmation tels que : le HTML et CSS <br> puis plus tard  :  PHP, SQL, C++, Phyton </li> <br>
</ul>
  </article>

  <article class="competences">
   <h2> Mes Compétences </h2>
<ul>
    <li>HTML5 & CSS3</li>
    <li>Libre Office</li>
    <li>Camatsia studio 8</li>
    <li>Photoshop CS6</li>
</ul>
  </article>

<article class="formations">
<h2> Ma formation </h2>
<p> J'apprends beaucoup de choses sur OpenClassrooms. </p>
</article>

</div>

    </body>
</html>

Mon code CSS :

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

p, h1, h2, ul
{
  font-family: 'ambleregular', Verdana, sans-serif, Arial, "Arial Black"
}

strong
{
  font-weight: bold;
}

h2
{
  color: #6E6E6E;
}

.textalign
{
  text-align: center;
}

img
{
	float: right;
	border: 3px #2E9AFE solid;
	box-shadow: 2px 2px 2px black;
}

body 
{
  background-color: #d2dade;
}

section
{
    display: flex;
    flex-direction: row;
}

.container
{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.sidebar {
  margin-top: 0;
   float: left;
    width: 200px;
    height: 100%;
    background: black;
}

html, body {
    height: 100%;
    margin: auto;
    margin-top: 0px;
}

Zoki_Marciano

26 mai 2018 à 22:22:26

Il faut que tu rajoutes margin:0; sur ton h1 dans ton css. Au passage utiliser des float c'est le mal

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Anonyme

26 mai 2018 à 22:35:00

Zoki_Marciano a écrit:

Il faut que tu rajoutes margin:0; sur ton h1 dans ton css. Au passage utiliser des float c'est le mal

Bon bah merci beaucoup pour ton aide j'ai réussi ducoup

ouai je sais les float c'est le mal moi je trouve pas tant que ca mais ouai vaut mieux utiliser le plus possible flex box. Sur ce je met le sujet en résolu

Zoki_Marciano

26 mai 2018 à 23:04:09

De rien

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

jumoyz

24 juin 2019 à 17:23:50

Bonjour tout le monde,

Je n'ai pas reussi l'activite. Est-il possible de le refaire?

Junior MOISE

Developer Web

TechMaster Web

AbcAbc6

24 juin 2019 à 17:30:08

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

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

[HTML & CSS] Activité HTML5 - Semaine 3

Créer des blocs a la verticale

Merci d'utiliser la mise en forme de code

Merci d'utiliser la mise en forme de code

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs