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>
- 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 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>
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 :
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 :)
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...
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.
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 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>
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
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
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Junior MOISE
Developer Web
TechMaster Web