Partage
  • Partager sur Facebook
  • Partager sur Twitter

positionnement

Aide organiser son CV

AdriRzp
    15 septembre 2017 à 12:42:11

    Bonjour, je viens à l'aide après une multitude d'essai non concluant, il y'a 2 choses principales que je ne comprends pas :

    1°: Pourquoi mes blocs ne vont pas jusqu'en bas de page alors qu'ils n'ont aucune restriction de taille.

    2° : Pourquoi mon "body" ne veut pas se positionner en colonne avec la fonction flex-direction:column; 

    -
    Edité par AdriRzp 15 septembre 2017 à 12:47:00

    • Partager sur Facebook
    • Partager sur Twitter
    heisenberg1932
    • HTML / CSS
      15 septembre 2017 à 13:43:28

      Salut

      Pas très pratique de voir le code comme ça.
      Tu devrais le copié/coller. Il y a un bouton "code". Met le tiens dedans.

      Déja on evite de mettre du css sur la balise body.

      puis je vois un element "page" avec un flex direction: row ??

      • Partager sur Facebook
      • Partager sur Twitter
      AdriRzp
        15 septembre 2017 à 15:02:15 

        Mon code Html: 
        La Balise page sert à regrouper les balises Nav et Conteneur/body afin de créer un bloc sur le côté gauche.
        <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css"/>
    <title>Mon Cv en Ligne</title>
 </head>
 
 <page>
    <nav>
        <div class="element"></div>
    </nav>

    <body> 
         
    <conteneur>    
      <header>  
        <h1>Adriano Sombre</h1>
    <p>Technicien matériaux, Skiman, Future développeur</p>
    <p class="image"> <a href="image/panda_roux.jpg"><img class="myphoto"src="image/panda_roux_mini.jpg" alt="Photo Personnel" title="Cliquez pour agrandir" /></a></p><br />
</header>
      
      

<section>
    <div class="formation">
    <h2>Mes Formations</h2>
    <ul>
        <li>Bts Traitement des matériaux</li>
        <li>Licence Pro ingénierie des matériaux nouveaux</li>
        <li>CQP Skiman</li>
        <li>Module Ruby (Code Academy)</li>
    </ul>
    </div>

    <div class="experience">
    <h2>Mon Expérience</h2>
    <ul>
        <li>2012-2013 : Dessinateur Industriel dans l'industrie nautique sur un projet de Yatch de 26m <a href="yatch.html">(regardez par vous même)</a></li> 
        <li>2013-2015 : Skiman en magasin Skiset à Font-Romeu</li>
        <li>2016-2017 : Responsable de magasin Skiset à Méribel</li>  
    </ul>
</div>

<div="competence">
    <h2>Mes Compétences</h2>
    <ul>
        <li>Autonome sur Catia V5</li>
        <li>Vendre, louer, réparer, rider : Ski & snowboard</li>  
    </ul>    
</div>
</section>

<footer>
<p><a href="mon_cv.zip" >Téléchargez le code de mon CV</a></p>
<p><a href="mon_cv_CSS.zip">Téléchargez le code de mon CV/CSS</a></p>
</footer>
</conteneur>
    </body>
</page>
    </html>

        Mon Code CSS:
        @font-face {
        font-family: 'cac_champagneregular';
        src: url('fonts/cac_champagne-webfont.eot');
        src: url('fonts/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/cac_champagne-webfont.woff2') format('woff2'),
        url('fonts/cac_champagne-webfont.woff') format('woff'),
        url('fonts/cac_champagne-webfont.ttf') format('truetype'),
        url('fonts/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
        font-weight: normal;
        font-style: normal;
        }
        /* apparence général */
        page{
        display:flex;
        flex-direction:row;
        }
        body {
        background: url(image/fond.jpg) fixed ; /* Volontairement faux */
        }
        conteneur{
        display: flex;
        flex-direction:column;
        }
        nav {
        width:30%;
        background:black;
        border:2px black solid;
        }

        /* header mis en forme*/
        h1{
        margin:0;
        font-size:100px;
        text-align:center ;
        color: red;
        font-family: 'cac_champagneregular',serif;
        }
        header p{
        margin:0;
        text-align: Center;
        font-weight: bold;
        font-size:20px;
        }

        .myphoto{
        position:absolute;
        top:0;
        right:0;
        border: solid black 2px;
        box-shadow: 3px 3px 3px black;

        }
        /* header positionnement */
        header{
        height: 20%;
        display: flex;
        flex-direction:column;
        position:relative;
        }
        /* section mise en forme */
        h2{
        color: red;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-style:italic;
        font-size: 30px;
        }
        ul{
        font-size:18px;
        font-weight: bold;
        }

        a:hover{
        color: green;
        }

        /* section positionnement */

        section{
        height:70%;
        display:flex;
        flex-direction: row;
        border: 2px black solid;
        }
        .formation {
        order:3;
        flex:1;
        }
        .competence {
        flex:1;
        }
        .experience {
        flex:1;
        }
        section h2{
        text-align:center;
        }
        /* pied de page */

        footer{
        height:10%;
        }




        -
        Edité par AdriRzp 15 septembre 2017 à 15:03:59

        • Partager sur Facebook
        • Partager sur Twitter
        exen
          15 septembre 2017 à 23:14:32

          Bon déja tu a une balise center avec une majuscule ca va pas le faire.

          Ton liserer pense à lui coller une valeur fixe ou un max-width histoire que ça ne sois pas trop large en l'étirant .

          Alors la balise <page> dans head... je ne connais pas si tu pouvais m'expliquer à quoi ca sert ce serais super.

          Ton conteneur heuu... pas vraiment utile

          pense plus

          photo

          header

          section

          section

          section

          Après  pour flex pense à wrap

          Bon la déjà t'a pas mal à faire lol :D Look aussi ici le poste de4N42K1

          • Partager sur Facebook
          • Partager sur Twitter

          Compos sui.

          heisenberg1932
          • HTML / CSS
          AdriRzp
            16 septembre 2017 à 17:38:54

            j'ai fini par résoudre le problème tout seul :

            -la marge du bas était dû au pourcentage indiqué pour "header" "section" et "footer". Donc en supprimant ces pourcentages tous s'est mi en place correctement, et les blocs sont allé jusqu'en bas de page grâce à un height donné à mon bloc nav.

            -Mon bloc page me servait à insérer à l'intérieur NAV et Conteneur. Afin d'avoir un menu Nav à gauche qui prend la longueur de la page et sur sa droite Mes blocs en colonne.(C'était ma logique pour ranger au mieux mes blocs). 

            Merci pour vos réponses, je prends note de tous ces conseils

            • Partager sur Facebook
            • Partager sur Twitter

            positionnement

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur ●
            • Markdown