Exercice semaine 4 html et css

pouvez -vous m'aider je suis bloqué

Sujet résolu

Anonyme

22 avril 2018 à 19:37:07

Partie Css

@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body
{
background-image: url('images/greyzz.png');
}
h1, h2
{
font-family: 'open_sansregular', 'Arial', 'Arial Black', 'Impact', 'Verdana';
}
h1, h1 + p
{
    text-align: center;
}
img
{
    float: right;
    border: 1px solid black;
    box-shadow: 2px 2px 2px black;
    width: 50px;
}
h2
{
    color: darkblue;
}
section
{
    display: inline-block;
    vertical-align: top;
    width: 30%;
    margin-right: 2%;
}
#liseret, #contenu
{
    display: inline-block;
    vertical-align: top;
}
#liseret
{   
    width: 10%;
    margin-right: 3%;
    height: 500px;
    background-image: url('images/lodyas.png');
    border-radius: 10px;
}
#contenu
{
    width: 85%;
}
@media all and (max-width: 1024px)
{
   #bloc_page
   {
       width: auto;
    {
 }
section h2
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Partie html

<!DOCTYPE html>
<html>
    <head>
   <meta charset="utf-8" />
   <title>Mon CV</title>
   <link rel="stylesheet" href="Style.css" />
   <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />
    </head>
    <body>
   <div id="liseret"></div>
   <div id="contenu">
   <p><a href="images/robot.jpg"><img src="images/robot_mini.jpg" alt="Photo d'un robot" /></a></p>
   <h1>Thomas Lambourdiere</h1>
   <p>Eleve de 4° (13 ans) qui apprend les langages du web.</p>
   <section>
   <h2>Mon Expérience</h2>
   <ul>
   <li><strong>De 2015 à maintenant</strong> : J'apprend les langages du web</li>
   </ul>
   </section>
   <section>
   <h2>Mes Compétences</h2>
   <ul>
   <li>HTML5 et CSS3</li>
   <li>Un peu de Js</li>
   </ul>
   </section>
   <section>
   <h2>Ma Formation</h2>
   <ul>
       <li>J'apprend dans les livres et sur OpenClassrooms</li>
       </ul>
   </section>
   </div>
    </body>
</html>

Je ne comprend pas rien ne change.

-
Edité par Anonyme 22 avril 2018 à 19:43:47

JulienMantovani

22 avril 2018 à 19:46:25

Tu dois passer ton cv en responsive c'est ça ? C'est où que tu bloques ?

Anonyme

22 avril 2018 à 19:55:44

oui c'est ça

JulienMantovani

22 avril 2018 à 19:59:35

En gros tous les paramètres que tu veux changer tu dois les réécrire pour la taille d'ecran que tu veux

si tu veux que ta section soit plus petite :

section
{
    display: inline-block;
    vertical-align: top;
    width: 30%;
    margin-right: 2%;
}

tu réécris la règle que tu veux changer :

@media (max-width: 600px) {
  section {
    width: 20%;
  }
}

Anonyme

22 avril 2018 à 20:03:59

merci et aussi il faut enlever le liseret et mettre les sections à la verticale

JulienMantovani

22 avril 2018 à 20:07:52

En css tu peux bidouiller pas mal de choses et il ya souvent plusieurs solutions, si tu veux masquer le liseret tu peux faire par exemple un truc du genre :

@media (max-width: 600px) {
  #liseret {
    display : none ;
  }
}

Qui a pour effet de ne pas afficher un élément.

( ça ne marchera peut être pas , ça dépend de comment tu as fait ton liseret )

edit : il ya une balise <code> </code> qui s'est rajouté sur mon post, il ne faut pas en tenir compte

-
Edité par JulienMantovani 22 avril 2018 à 20:13:31

Anonyme

22 avril 2018 à 20:24:13

pardon je sais je t'en demande beaucoup je suis jeune j'ai 13 ans et aussi je n'arrive pas à mettre les sections verticalement

JulienMantovani

22 avril 2018 à 20:26:45

Pour ne pas te mâcher le travaille, tu devrais trouver la réponse ici :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox

Anonyme

22 avril 2018 à 20:37:37

oh non stp aide moi stp

JulienMantovani

22 avril 2018 à 20:48:25

Tu dois faire la même chose que précédemment, tu défini ton médiaquerie

@media (max-width: 600px) {
  section {
    et là tu mets ta règle, tu dois utiliser flexbox, et l'alignement vertical
  }
}

Anonyme

22 avril 2018 à 20:51:52

mais ce n'est pas 1024px ??

JulienMantovani

22 avril 2018 à 20:54:28

Je n'ai pas l'exercice sous les yeux, mais ce n'était qu'un exemple , tu peux bien sûr mettre la valeur que tu veux à coté de max-width !

-
Edité par JulienMantovani 22 avril 2018 à 20:54:36

Anonyme

22 avril 2018 à 20:55:21

même avec flexbox cela ne fonctionne pas

JulienMantovani

22 avril 2018 à 20:56:53

tu as noté quoi ?

Anonyme

22 avril 2018 à 21:01:51

un truc avec flex-direction:

JulienMantovani

22 avril 2018 à 21:05:00

Tu as activé flexbox ?

display : flex;

Anonyme

22 avril 2018 à 21:06:55

c'est confus et je n'y arrive pas et j'ai aussi un autre souci mon editeur sublim text m'a zoomé l'écran et je n'arrive pas à dézoomer

JulienMantovani

22 avril 2018 à 21:18:52

#contenu
{
    width: 85%;
}
@media (max-width: 1024px) {
#contenu
  {
  	display : flex ;
    flex-direction: column;
  }
}

Le zoom / dezoom sous sublime text c'est ctrl + molete de la souris

-
Edité par JulienMantovani 22 avril 2018 à 21:19:22

Anonyme

22 avril 2018 à 21:21:50

Merci beaucoup j'espere que je ne t'ai pas trop gonflé

JulienMantovani

22 avril 2018 à 21:23:15

Non on est là pour aider, tu as réussi à avoir ce que tu voulais ?

Anonyme

22 avril 2018 à 21:24:13

Oui c'est bon merci

-
Edité par Anonyme 23 avril 2018 à 11:06:04