Partage

exercice html 5 semaine 3

probleme de mise en page

Sujet résolu

10 avril 2019 à 14:49:20

salut,

j ai du refaire un sujet car mon code ne se copie pas correctement je n arrive pas a centrer mon cv a cote du lisere j envoie une copie du code pour comprendre mon erreur.

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <style>
        h2,h3,h4
        {
            color: green;
        }
        h1,p
        {
            text-align:center;
        }

        body
        {
            background-image: url(https://marieguillaumet.com/wp-content/uploads/2013/12/20131231_watercolour.jpg);
            background-repeat: no-repeat;
            background-position: center;

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

}

h1
{
font-family: 'robotoblack',arial,serif
}

h2,h3,h4
{
border:3px black solid;
border-radius: 20px;
box-shadow: 6px 6px 10px black;
}

#conteneur
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: right;
    height: 800px;
}
.element
{
    height: 800px;
    width: 200px;
}

.element:nth-child(1)
{
background-color: grey;

}
section
{
    display: flex;
    justify-content: center;
}
a
{
    display: flex;
    justify-content: flex-end;
}
article
{
    justify-content: flex-end;
    height: 40%;
    width: 30%;
    align-items: baseline;
    margin-left: 40px;
}
aside h3
{
    justify-content: space-between;
    display: flex;
    height: 40%
    width:30%;
    flex-direction: row;
}
aside h4
{
    flex-direction: row;
    justify-content: space-between;
}
body
{
    margin: auto;
}
   </style>
        <title>mon cv</title>
    </head>

    <body>
        <div id="conteneur">
            <div class="element"></div>
        </div>
        <header>
    <h1>Martin dupont</h1>
    <p>en reconvertion professionelle ancien concierge de salle des fetes.</p>
    </header>
     <p>
    <a href="image/chat.jpg"><img src="image/chatmini2.jpg" alt="photo de mon chat"/></a>
    </p>
<section>
    <article>
    <h2>mon experience </h2>
    <ul>
      <li><strong>de 2016 a 2019</strong>:concierges dans une salle des fetes,entretien des locaux interieur et exterieur plus travaux de bricolages.</li>
    <li><strong> de 2015 a 2016</strong>:agent de production dans une usine de reconditionnement de dvd</li>
    <li><strong> de 2014 a 2015</strong>:agent d entretien en espace vert<li>
    </ul>
    </article>
    <aside>
    <h3>Mes compétences</h3>
    <ul>
      <li>respect des consignes de securites </li>
      <li> connaissance en espace verts</li>
      <li>norme qualité </li>
      <li> acheminer des marchandises en zones d expedition de stockage ou de production.</li>
    </ul>
    </aside>
    <aside>
    <h4> Ma formation</h4>
        <ul>
            <li> bac professionnel en operateur de production pspa</li>
        </ul>
    </aside>
    </section>
    </body>
</html>

exen

10 avril 2019 à 16:10:03

Bonjour,

Peut être que ceci dans un premier temps va pouvoir t'aider

https://openclassrooms.com/forum/sujet/html-css-probleme-cours-semaine-3?page=1

L'image de mon post te montre une structure du html simple

Compos sui.

HervéWohmann

11 avril 2019 à 12:01:35

j ai essaye comme tu m as montre les trois articles sont plus colle un contre l autre c est déjà un debut mais j arrive toujours pas centrer l ensemble pour que sa soit a cote du lisere

-
Edité par HervéWohmann 11 avril 2019 à 12:20:27

exen

11 avril 2019 à 14:24:52

Ce que je voulais te montrer c'est la nomenclature avec la photo de mathieu nebra dessus pour te montrer comment on arrange les objets.

En gros tu as

<body>

<liseré> </liserè>

<img />

<div>titre, sous-titre </div>

</header>

<titres

</article>

</section>

</body>

Compos sui.

HervéWohmann

11 avril 2019 à 14:38:15

c est ce que j ai fait mais c est pas centrer

exen

11 avril 2019 à 14:39:55

fait voir ton code stp

Compos sui.

HervéWohmann

11 avril 2019 à 14:42:50

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <style>
        h2,h3,h4
        {
            color: green;
        }
        header h1,p
        {
            text-align:center;
            margin-top: 0;
            padding-top: 0.67em;
        }

        body
        {
            background-image: url(https://marieguillaumet.com/wp-content/uploads/2013/12/20131231_watercolour.jpg);
            background-repeat: no-repeat;
            background-position: center;
            margin: 0;

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

}

h1
{
font-family: 'robotoblack',arial,serif
}

h2,h3,h4
{
border:3px black solid;
border-radius: 20px;
box-shadow: 6px 6px 10px black;
}

a
{
    display: flex;
    justify-content: flex-end;
}
   article
{
      justify-content: flex-end;
    height: 40%;
    width: 30%;
    align-items: baseline;
    margin-left: 40px;
    display: inline-block;

}
article h3
{
    justify-content: space-between;
    height: 40%
    width:30%;
    flex-direction: row;
    display: inline-block;

}
article h4
{
    flex-direction: row;
    justify-content: space-between;
    display: inline-block;

    }

.lisere
{
    width: 10vw;
    background-color: black;
    height: 99vh;
}

#corps_de_page
{
    display: flex;
}
#corps_principal
{
    flex: 1;
}
   </style>
        <title>mon cv</title>
    </head>

    <body>
            <div class="lisere"></div>
            <div class="corps_de_page">
                <div id="corps_principal">
        </div>
        <header>
    <h1>Martin dupont</h1>
    <p>en reconvertion professionelle ancien concierge de salle des fetes.</p>
    </header>
     <p>
    <a href="image/chat.jpg"><img src="image/chatmini2.jpg" alt="photo de mon chat"/></a>
    </p>
<section>
    <article>
    <h2>mon experience </h2>
    <ul>
      <li><strong>de 2016 a 2019</strong>:concierges dans une salle des fetes,entretien des locaux interieur et exterieur plus travaux de bricolages.</li>
    <li><strong> de 2015 a 2016</strong>:agent de production dans une usine de reconditionnement de dvd</li>
    <li><strong> de 2014 a 2015</strong>:agent d entretien en espace vert<li>
    </ul>
    <h3>Mes compétences</h3>
    <ul>
      <li>respect des consignes de securites </li>
      <li> connaissance en espace verts</li>
      <li>norme qualité </li>
      <li> acheminer des marchandises en zones d expedition de stockage ou de production.</li>
    </ul>
    <h4> Ma formation</h4>
        <ul>
            <li> bac professionnel en operateur de production pspa</li>
        </ul>
    </article>
    </section>
    </body>
</html>

exen

11 avril 2019 à 15:23:12

Tiens une base simple;

Je te laisse voir pour le placement des objets à fenêtre réduite, soit avec flex soit avec @media

Compos sui.

HervéWohmann

11 avril 2019 à 15:33:19

merci c est déjà beaucoup mieux mais il faut pas les valeurs en pourcentages

exen

11 avril 2019 à 15:47:24

pour ???

Compos sui.

HervéWohmann

11 avril 2019 à 16:02:52

je suis entrain de modifie et de tout mettre en pourcentages a par le lisere.

derniere question je voudrais descendre l article plus bas avec margin et padding sa peut fonctionne?

exen

11 avril 2019 à 16:11:08

Oui apres pourquoi chercher à coller des % obligatoirement, avec vh et vw tu va travailler vis à vis du viewport en général c'est quand même mieux.

Tiens pour te compliquer la tache et en plus je viens de te coller un %

section{

            margin-top: 90px;
            margin-left: 2%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }
        article{
            width: 280px;
            min-width: 150px;
            display: flex;
        }

Compos sui.

HervéWohmann

11 avril 2019 à 16:13:45

merci beaucoup pour ton aide j ai fini le tp.

exen

11 avril 2019 à 16:19:48

Bonne chance pour la suite , mais n'esite pas a trfiquer ton cv voir comment ca réagis avec certains changement:

en plus d'ici quelque site sympa :

https://la-cascade.io/tag/flexbox/

https://developer.mozilla.org/fr/docs/Web/CSS

http://www.frogweb.fr/

https://www.zonecss.fr/

Compos sui.