Bonjour,

Je suis le cours html5/css3 et au chapitre 3, on nous demande de mettre en page notre CV

• A gauche, un liseret (purement décoratif, mais vous pouvez aussi mettre des informations à l'intérieur)
• A droite, le contenu de votre CV, qui contiendra à l'intérieur, de gauche à droite les sections suivantes :
  • Mon expérience
  • Mes compétences
  • Ma formation

le liseret je n'en parle même pas car je suis incapable de le faire mais je pensais avoir compris le inline-block mais il s'avère que non. Mes <div> ne se mettent pas de gauche à droite.

Une bonne âme pour m'expliquer ce que je fais mal?

Salut,

tes div doivent avoir le même parent direct pour que le inline-block fonctionne.
Ce qui n'est pas le cas puisque chacune ont un parent différent des autres.

Pour que ça fonctionne il faudrait que tes 3 div soient dans la même section ou, en gardant ton code html, que tu applique le inline-block aux 3 sections.

C'est quoi cette histoire de liseret ? mets le lien de la partie du cours.

-
Edité par Frogweb 22 janvier 2015 à 17:18:23

Merci pour ta réponse.

je te joint le lien: http://exercices.openclassrooms.com/assessment/188?login=573535&tk=5e3e378904376beea0f68b611ce9f842&sbd=2015-01-01&sbdtk=44afa302ee0babc982a2750262cab817&subscriptionId=394277

c'est l'activité de la partie 3 à rendre (mettre en forme son CV): http://exercices.openclassrooms.com/assessment/188?login=573535&tk=5e3e378904376beea0f68b611ce9f842&sbd=2015-01-01&sbdtk=44afa302ee0babc982a2750262cab817&subscriptionId=394277

pas sûr que tu ais accès si t'es pas inscrit au cours, aussi je te joins la copie écran

Ok donc c'est la bande noire à gauche.
Tu y a réfléchi un peu ?

Tu as réussi à régler ton problème avec inline-block ?

suis dessus. Revient vers toi soon.

ronamazona a écrit:

C'est quoi cette histoire de liseret ?

bonjour, j'ai eu du mal à capté ce  qu’étais ce liseret, un sujet existe la dessus. http://openclassrooms.com/forum/sujet/liseret-activite-cv-semaine-3

-
Edité par casperweb 22 janvier 2015 à 17:53:28

J'ai opté pour mettre tous les div dans la même section mais c'est pas encore ça:

code html:

<section>

        <div id="mon_experience">
                    <h3>Mon expérience</h3>
                   <ul>
            <li><p><strong>De janvier 2012 à juin 2014</strong>: Ingénieur Responsable Validation d'application tablettes et smartphones<br/> au                         sein de la société Bouygues Telecom</p></li>
            <li><p><strong>De juin 2007 à mai 2010</strong>: Chef de projet homologation des dispositifs de marque Motorola sur le réseau<br/>                         historique Telefonica</p></li>
            <li><p><strong>De juillet 2006 à juin 2007</strong>: Mobile Devices Project Manager pour la société Orange Spain</p></li>
           </ul>
                  
                </div>
   
                <div id="mes_competences">
                    <h3>Mes compétences</h3>
            <ul>
                <li>Wireshark</li>
                <li>Codeblocks</li>
                <li>Eclipse</li>
                <li>UPnP/DLNA</li>
            </ul>
                  
                </div>
   
                <div id="ma_formation">
                    <h3>Ma Formation</h3>
                    <p>10 ans de cours du soir au CNAM pour obtenir le diplôme d'ingénieur</p>
                </div>
     </section>

partie du code css:

/* CORPS */
#mon_experience, #mes_competences, #ma_formation

{
    display: inline-block;
    vertical-align: top;
    text-align: justify;
}

#mon_experience
{
    <div style="float: left; width: 30%;">
    </div>
  
}

#mes_competences
{
    <div style="float: left; width: 30%;">
    Au milieu
    </div>
}

#ma_formation
{
    <div style="float: right; width: 30%;">
    Tout à droite
    </div>
}

Pour ce qui est du liseret, je pensais mettre un <aside> mais je préfère corriger mon premier problème d'abord

Tu étais bien partie au début avec inline-block. Inutile de les mettre en float.

Et ta CSS est bizarre non ? Pourquoi y a t-il les balises div ?

Avec le code html que tu fournis tu n'as besoin que de ça :

#mon_experience, #mes_competences, #ma_formation
{
   display: inline-block;
   vertical-align: top;
   width:30%
}

Et enlève les <br /> et les <p> dans les <li>, tu n'en a nul besoin.

PS : text-align: justify est à éviter sur le web.

-
Edité par Frogweb 22 janvier 2015 à 18:15:36

J'ai trouvé le problème pour les inline-block. Il manquait une virgule à la fin.

code css mauvais:

/* CORPS */
#mon_experience, #ma_formation, #mes_competences

code css bon:

/* CORPS */
#mon_experience, #ma_formation, #mes_competences,

Une misérable virgule m'a fait tourner en bourrique.

Merci pour le coup de main.

Bonjour,

Avez-vous trouvé une solution pour le liseret ? Matthieu précise dans l'énoncé de l'exercice que l'on peu lui mettre une taille fixe, en pixels. Mais je n'aime pas cette méthode, ce n'est pas 'adaptatif'. Quelqu'un a trouver un moyen de rendre la hauteur dynamique, en fonction du contenu de la page ?

Il ne me reste que ça pour compléter l'exercice. 

Merci d'avance !

antoinedelrue a écrit:

Bonjour,

Avez-vous trouvé une solution pour le liseret ? Matthieu précise dans l'énoncé de l'exercice que l'on peu lui mettre une taille fixe, en pixels. Mais je n'aime pas cette méthode, ce n'est pas 'adaptatif'. Quelqu'un a trouver un moyen de rendre la hauteur dynamique, en fonction du contenu de la page ?

Il ne me reste que ça pour compléter l'exercice. 

Merci d'avance !

display: table-cell.

Bonjour,

Je voudrais des précisions pour la notation et le terme "sémantique". On parle par exemple de <section>. Perso, je me suis inspiré du modèle des blocs du chapitre 3 et il n'y avait pas de <section>. J'ai réutilisé la vidéo et mis des <div> avec un nom de class, ce qui m'a permis de tout mettre en place. Est-ce que le div de la video est correct pour la sémantique? J'attend votre avis pour faire les corrections des exercices.

Merci

Bonsoir, 

J'essaye également de mettre mon CV en forme de blocs mais je n'y arrive pas.

Voilà mon code HTML

<html>

<head>

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

<h4>Garance Coste </h4> </head> </br> 

<body> <p> Traductrice, interprète et professeur, rédactrice occasionnelle </p> </br>

<p> 

<a href="Images/photo_normale.jpg"><img src="Images/photo_mini.jpg" alt="Photo CV" title="Cliquez pour agrandir" /></a>

</p> </br>

<section>

   <div id="mon_experience">

 <h1> <strong> Mon expérience </strong> </h1> </p> </br> 

<ul> 

<li> <strong> De janvier à juin 2017: </strong> Stage de traduction chez Babel, Santander, Espagne </li>

<li> <strong> De juin à août 2016: </strong> Stage de traduction chez Vétérinaires sans Frontières, Barcelone, Espagne </li>

<li> <strong> De janvier à juin 2014: </strong> Au-pair à Perth, Australie </li>

</ul> </div> </br>

<div id="ma_formation"> 

<h2> <strong> Ma formation </strong> </h2> </p> </br>

<ul>

<li> <strong> 2016-2018: </strong> Master en traduction spécialisée et d'interprétation de liaison, ESTRI, Lyon, France </li>

<li> <strong> 2013-2016: </strong> Double-licence Traduction et Relations Internationales Langues Etrangères Appliquées, ESTRI, Lyon, France </li>

<li> <strong> 2013 </strong> Baccalauréat scientifique Mention anglais européeenne </li>

</ul> </div> </br> 

<div id= "mes_competences">

<p> <h3> <strong> Mes compétences </strong> </h3> </p> </br>

<ul> 

<li> Pack Office, Trados, InDesign </li>

<li> PHP (<a href="https://openclassrooms.com">OpenClassrooms</a>) </li>

<li> Certificat des Premiers Secours </li>

</ul> </div> </section>

</body>

Et voilà mon code CSS

#mon_experience, #ma_formation, #mes_competences, 

{

   display: inline-block;

   vertical-align: top;

   width:30%

}

Quelqu'un peut m'expliquer pourquoi ça ne fonctionne pas s'il-vous-plaît ?

Merci d'avance

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. Me contacter par MP si besoin.