Partage

Questions MOOC HTML/CSS

4 mars 2018 à 13:56:42

Bonjour,

Merci pour votre avis !

Alors en fait j'ai mis un fond de couleur au liseré. Il n'était pas précisé si il fallait mettre une image ou un fond de couleur, mais le résultat est le même il me semble ?

Dans mon navigateur le liseré s'affiche à gauche et j'ai mes "compétence" "expérience" etc alignés dans le sens horizontal avec la fonction flexbox. Mais peut-être que mon code fonctionne bien avec mon navigateur et mal avec d'autres ? c'est possible ça ? (j'utilise firefox).

Re-voici le code complet du coup :

<!DOCTYPE html>

<html lang="fr">

    <head>

        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>CV</title>

    </head>



    <body id="tst">
        
<!--liseré -->
        <div id="lisere">
        </div>


        <div id="total">

<!--en tête-->
            <header id="titre">
                <h1>Alea Delavie</h1>
                <h3><em>Alea Jacta Est, telle est la question</em></h3> <!--commentaire à la noix-->
    
                <figure>
                    <a href="images/alea_maxi.jpg" title="Cliquez pour agrandir" target="_blank"><img src="images/alea_mini.jpg" alt="Photo d'Alea"/></a>
                </figure>
            </header>

<!--CORPS DU CV-->
            <section id="conteneur">

                <div class="element">
                <p>                      
                    <h4>Mon expérience</h4>
                    <ul>
                        <li class="t"><strong>20/01/2015 au 10/08/2017 : </strong>Dresseuse de licornes</li>
                        <li class="t"><strong>30/02/2013 au 20/08/2015 : </strong>Photographe de dragons</li>
                        <li class="t"><strong>01/03/2011 au 30/08/2013 : </strong>Manager des chats de Tokyo </li>
                    </ul>
                    <br/>
                </p>
                </div>

                <div class="element">
                <p>                      
                    <h4>Mes compétences</h4>
                    <ul>
                        <li class="t">Management des animaux</li>
                        <li class="t">Photographie animalière</li>
                        <li class="t">Psychologie de la licorne</li>
                    </ul>
                    <br/>
                </p>
                </div> 

                <div class="element">
                <p>                      
                    <h4>Ma formation</h4>
                    <ul>
                        <li class="t">Ecole professionnelle de dressage d'animaux ailés</li>
                        <li class="t">Baccalauréat en psychologie des licornes</li>
                        <li class="t">CAP management de félins</li>
                        <li class="t">OpenClassRoom - spécialisation fantastique</li>
                    </ul>
                    <br/>
                </p>
                </div> 

            </section>   



<!--Pied de page-->
            <footer id="footer">

                <p>
                    <br/><br/>Copyright Alea - Tous droits réservés 
                    <br/><a href="mailto:alea_delavie@gmail.com">Me contacter</a>
                </p>
   
            </footer>              
   
        </div>

    </body>

</html>
/*police personnalisée*/
@font-face {
    font-family: 'anagramregular';
    src: url('fonts/Anagram-webfont.eot');
    src: url('fonts/Anagram-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Anagram-webfont.woff2') format('woff2'),
         url('fonts/Anagram-webfont.woff') format('woff'),
         url('fonts/Anagram-webfont.ttf') format('truetype'),
         url('fonts/Anagram-webfont.svg#anagramregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*image de fond*/
body
{
	background: url("images/fond.jpg") no-repeat top right;
}

/*titres*/
h1, h2
{
	font-family: 'anagramregular', georgia, verdana, sans-serif;
	font-size: 4em;
	text-align: center;
	text-shadow: 6px 6px 2px #C390D4;
	text-decoration-line: overline underline;
}
h3
{
	font-family: times new roman, verdana, georgia, arial, sans-serif;
	font-size: 1.5em;
	text-align: center;
	text-shadow: 6px 6px 6px black;
	color: #460980;
	font-style: italic;
}
h4
{
	font-family: 'anagramregular', georgia, verdana, sans-serif;
	font-size: 1.2em;
	text-align: center;
	border: 3px black groove;
	border-radius: 10px;
	color: #460980;
}

/* photo*/
figure
{
	text-align: center;
}

/*paragraphes*/
p
{
	color: black;
	font-family: times new roman, verdana, georgia, arial, sans-serif;
	font-size: 1em;
}
.t
{
	text-align: left;
}

/* dynamique*/
h4:hover
{
	color: #C390D4;
	background-color: black;
}
li:hover
{
	color:  #460980; 
}

/*pied de page*/
#footer
{
    text-align: center;
}
 
/*LISERE*/
#lisere
{
    position: absolute;
    float: left;
     
    width: 10%;
    height: 1200px;
 
    background-color: #460980;
    border-radius: 5px;
}
 
/*titre+contenu*/
#total
{
    position: absolute;
    top:0%;
    bottom:0%;
    left:10%;
    right:0%;
    margin: auto;
}
/*titre+contenu+footer*/
#tst
{
    position: relative;
    margin: 1.5px;
    text-align: center;
}
 
 
/*FLEXBOX CONTENU*/
#conteneur
{
    display: flex;
    justify-content: center;
}
 
.element
{
    padding: 6px;
    margin: 6px;
    background-color: #BFAFE3;
}


Enfin dans tous les cas vous avez raison, dorénavant si je ne suis pas sûre de moi je posterai sur le forum, ne serais-ce que pour m'assurer que j'ai bien compris la consigne.

Merci à vous en tout cas ! Si vous avez d'autres commentaires à ajouter, n'hésitez pas ! Ce qui compte de toute façon n'est pas tant la note, mais la réussite concrète de ce type de structure.

-
Edité par AleaSarah 4 mars 2018 à 14:02:46

4 mars 2018 à 18:40:13

J'ai testé le code complet.

Je n'avais pas vu que la largeur du liseré était définie (c'est moi qui suit allé un peu vite pour le coup :-° ).

J'ai bien le liseré qui s'affiche et les sections affichées côte à côte.

Comme quoi, la réalisation est bonne et le code est bien écrit.

Il peut y avoir des différences d'affichage d'un navigateur à l'autre mais pas de cette ampleur sur un site aussi "basique".

D'ailleurs, vous pouvez essayer vos sites sur différents navigateurs si vous avez des doutes sur des projets plus complexes avec des propriétés css avancées par exemple.

Pour revenir à la question de départ, le site est bien réalisé donc si tout le monde vous a dit que rien ne fonctionnait vous vous êtes probablement trompé de .zip (ce qui est fort dommage), pensez à bien vérifier les prochains ;) .

-
Edité par DheryoLeblanc 4 mars 2018 à 18:41:26

4 mars 2018 à 19:54:27

Merci beaucoup ! Bon ça me rassure, au moins j'ai pas tout compris de travers, c'est déjà ça^^.

5 mars 2018 à 10:26:11 - Message modéré pour le motif suivant : Message complètement hors sujet


9 mars 2018 à 14:13:23

J'ai beau me concentrée je comprend rien du tout, peut être que cette formation est pas faite pour moi?
10 mars 2018 à 5:19:53

Bonjour,

tu ne comprends pas quoi?

Bénédicte
13 mars 2018 à 11:13:11

Tu en es à l'activité 1.?
Bénédicte
13 mars 2018 à 13:43:22

Bonjour,

Si tu as des problèmes de compréhension il ne faut pas hésiter à en parler à expliquer ce que tu ne comprends pas, à demander des précisions, etc etc.

Si tu dis juste "je n'ai pas compris" il nous sera impossible de t'aider car nous ne sommes pas dans ta tête... ;)

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
15 mars 2018 à 22:20:09

Bonjour,

En fait je suis niveau dans ce groupe. Depuis incertaine j'y travail développement web tout seul et j'ai un problème comment on peut imbriqués le balise en HTML et css? Donc j'ai besoin de vos aides, svp

Merci, cordialement!

19 mars 2018 à 15:53:46

bonjour a tous 

je n arrive pas a 

Deux pages situées dans un même dossier pour les lien 

20 mars 2018 à 9:23:30

Bonjour,

Il suffit de créer un dossier sur le bureau (écran d'accueil) de ton ordinateur, que tu nommeras comme tu veux, et dans lequel tu enregistreras tes différentes pages. Du coup, si tu as deux pages (avec, dans la première, des liens vers la seconde, et inversement), il faut que les deux fichiers soient enregistrés dans le même dossier.

4 mai 2018 à 14:58:47

Je veut apprendre la programmation sur mon téléphone techno comment fait pour avoir les logiciels?

Laisse  parlé ton cœur car rien n est impossible pour ce lui qui croix.....
4 mai 2018 à 15:39:27

C'est pas vraiment possible.

Ils existent quelques applications mobiles pour pouvoir compiler / creer un serveur locale mais c'est loin d'etre genial.

Développeur PHP / Symfony en Freelance
5 mai 2018 à 2:59:46

Comment apele t'on les application qui peut nous servir a ce niveau pour la création de développement de web

Laisse  parlé ton cœur car rien n est impossible pour ce lui qui croix.....
5 mai 2018 à 11:19:46

Simplement pour l'HTML et le CSS ? Tu as AWD (IDE) sur Androïd, cela dit je ne sais pas ce que ça vaut.

Mais bon, si tu veux mon avis, il vaut mieux être sur PC, et là tu as pas mal de choix : notepad++, Geany, ...

Pour le php par contre, pour faire des sites dynamiques, il te faudra wampp ou xampp. Je ne sais pas s'il existe de version pour smartphone, de nouveau, ce n'est pas très pratique.

5 mai 2018 à 19:14:08

AmadouCoulibaly14 a écrit:

Je veut apprendre la programmation sur mon téléphone techno comment fait pour avoir les logiciels?


Il te faudra suivre des courses ou plutôt un Parcoure pour ça . jettes un coup d’œil par ici

-
Edité par djlook 5 mai 2018 à 19:18:44

7 mai 2018 à 9:28:17

AmadouCoulibaly14 a écrit:

Je veut apprendre la programmation sur mon téléphone techno comment fait pour avoir les logiciels?


Il te faut apprendre un peu le java.Si ton téléphone est un android il me semble qu'il y a un cours sur le site.

J'avais appris avec l'afpa mais je ne te passerais pas les cours car rien n'était à jour. 

7 mai 2018 à 15:07:55

Bonjour à toutes et tous,
J'ai un petit soucis concernant les flexbox (je mélange encore les propriétés les concernant) et plus précisément le chapitre "pratiquez" juste après.

Dans cet exercice on nous présente un texte, à nous de mettre en forme en CSS. Je m'emploie à faire ce que demande l'exercice et ça coince au moment de valider la dernière étape, Codey (ce satané robot :pirate:) refuse de valider, selon lui mon code ne remplit pas tous les prérequis... Hors je ne comprend pas où j'ai fail parce que visuellement je pense que je ne suis  pas loin.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Le blog trotter</title>
    </head>

    <body>
      <div id="topsection">
        <header>
          <h1>Le blog trotter</h1>
          <p>Je parcours la planète... et vous la fais découvrir !</p>
        </header>
        <nav>
          <ul id="menu">
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Archives</a></li>
            <li><a href="#">Contact</a></li>
        </nav>
      </div>
      <div id="articles">
        
      <h1>La Chine</h1>
      <p class="element_content">Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

      <p class="element_content">Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
        
        
      <h1>L'Espagne</h1>
      <p class="element_content">Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

      <p class="element_content">Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
        
        </div>
      <footer>
        <p>Copyright Le Blog Trotter</p>
      </footer>
        
    </body>
</html>
/* Feuille de style */

#topsection
{
  display: flex;
  justify-content: center;
  align-items: center;
}

#menu
{
  list-style-type : none;
}

#articles
{
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.element_content
{
  max-width: 80%; 
  text-align: justify;
}

footer p
{
  text-align: center;
}

Merci à ceux qui se pencheront sur mon problème.


-
Edité par FlorentWeinsanto 7 mai 2018 à 15:19:06

7 mai 2018 à 15:25:36

Salut,

A première vue tu ne respectes effectivement pas les consignes.

Ce qu'il faut faire : Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page.

Ce que tu fais : Tu mets les paragraphes du contenu en justifié et avec une largeur max de 80% et tu centres le contenu du paragraphe du footer.

Astuces :

- Je viens de refaire le test à l'instant et à aucun moment il n'est nécessaire de rajouter des classes dans le HTML,

- Les changements concernent tous les paragraphes, 

- Centrer un bloc et centrer le contenu d'un bloc sont deux choses différentes.

-
Edité par Mewen_bzh 7 mai 2018 à 15:25:58

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
7 mai 2018 à 16:07:23

@Mewen merci pour les pistes que tu m'as données, effectivement j'avais pas suivi les consignes, j'ai enfin réussi... :D
14 mai 2018 à 13:54:39

bonjour , 

je n'arrive pas à insérer une image pour mon exercice , je suis allée voir sur le forum j ai essayé ce qu'il y a de noté dans différentes réponses mais sans succé , est ce que quelqu'un peut m aider 

<!DOCTYPE html>

<html>

<head>

      <meta charset = "UTF_8" />

      <title> exercice cv </title>

</head>

      <body>

           <h1><strong>Claire de Cordes </strong ></h1>

           <p> formation pour reconvertion professionnelle</br>

      <figure>

           <a href="image/cv.jpg"><img src="image/cvmini.jpg"alt="ma photo"title="cliquez pour agrandir"/></a></p></br>

           <figcaption> ma photo</figcation>

       </figure></br>

     <h2><strong>Mon experience</strong></h2>

           <ul>

              <li>2009 a 2018 assistante manager dans un commerce alimentaire </li>

              <li>2000 a 2009 secretaire dans une idustrie de fabrication de fenetres</li>

              <li>1995 a 2000 operatrice de saisie</li>

           </ul>  

     <h2><strong>Mes competences</strong></h2>

           <ul>

               <li>saisie et mise en forme des documents</li>

               <li>gestion des litiges clients</li>

               <li>Devis et facturation</li>

         </br>

           </ul>

     <h2><strong>Ma formation</strong></h2>

              <p><ul><li> je suis autodidacte</li></ul> </p>

       </body>

mon dossier html et mes photos sont dans un même dossier 

mes dossiers

14 mai 2018 à 14:33:16

Salut,

A priori ton code est bon. Tu devrais afficher les extensions de tes fichiers (Windows ne le fait pas par défaut) et vérifier le nom de tes images ensuite.

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
14 mai 2018 à 14:38:31

Ton code semble fonctionner. Peut-être as tu fais une faute de frappe sur le nom de la photo ? le format est peut-être en jpeg ?
14 mai 2018 à 16:58:16

merci à Mewen-bzh

j'ai fait ce que vous m'avez conseillé, j'ai affiché les extensions des fichiers et cela fontionne, j'ai pu modifier le titre des photos 

cordialement

claire 

-
Edité par claireM2 23 mai 2018 à 15:48:56

14 mai 2018 à 17:09:15

Tu pourrais nous montrer une capture d'écran du dossier qui contient tes images s'il te plaît ?
Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
15 mai 2018 à 14:07:31

Salut ! 

Comment faire pour passer l'examen et obtenir un certificat ?

16 mai 2018 à 11:37:25

Salut,

certains cours te permettent d'avoir un certificat de réussite (sans reconnaissance RNCP).

Tu peux également t'inscrire pour un parcours avec lequel tu pourrais obtenir une certification reconnue.

Anonyme
17 mai 2018 à 17:27:50

Bonjour a vous amis et étudiants d'Openclassrooms je veux apprendre HTML CSS et j'ai besoins d'aide svp!

Questions MOOC HTML/CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown