Menu
Posez votre question Signaler

Mon liseré fait tout descendre... [Résolu]

-
Créer un site Posez votre question Signaler
Bonjour à tous,
je suis en train de suivre des cours de HTML5 et de CSS3.
Lors d'un exercice, on me demande de faire un CV et un liseré tout à gauche.
J'ai commencé à coder ma page WEB mais lorsque j'ai regardé le résultat, le liseré fait tout descendre.
J'ai cherché pendant des heures mais je n'ai pas trouvé le solution...

Mon code HTML : 
<!--<!DOCTYPE html>-->
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mon CV</title>
        <link rel="stylesheet" href="code.css">
    </head>
    <body>
    <header>
            <h1>Sylvain</h1>
    </header> 
    <div class="liseret"></div>
    <section class="pres">
            <p>
                    Je suis passioné de l'automation, de l'informatique et de la macrophotographie.
               </p>
    
            <a href="tete-grande.png" target="_blank"><img src="tete-petite.png" alt="tete-petite.png" tittle="Aggrandir" width="100px" height="100px" /></a>
    </section>
    <div class="conteneur">   
    <section class="elements">
        <h2>Mon expérience</h2>
      
        <p>
            A vrai dire... Je n'en ai pas beaucoup car je n'ai que 15 ans et je suis en 4ème secondaire.
        </p>
    </section>
    <section class="elements">
     
        <h2>Mes compétences</h2>
      <ul>
       <p>Par contre, j'ai des compétences, mes passions</p>
       <p>J'ai trois passions :</p>
       <li>L'automation : les chaines de productions ou il y a des robots. (ce que j'apprends à l'école)</li>
       <li>L'informatique : je ne sais pas faire deux choses à la fois à l'école, du coup, j'apprends ca ici !!! ;-)</li>
       <li>La macrophtographie : la, je connais deja tout, j'en pratique souvent</li>
      </ul>
      <p>Voila les secteurs dans lesquels je suis compétent !!! :-)</p>
    </section>
    <section class="elements">
        <h2>Ma formation</h2>
            
               <p>Malheureusement, je n'ai que l'école</p>

    </section>
</div>

</body>
</html>
<bold>

Mon code CSS :</bold> 
@font-face {
 font-family: police;
 src: url(police.otf),
   url('police.woff') format('woff'),
         url('police.ttf') format('truetype'),
         url('police.svg') format('svg');

}
header
{
 background-color: #8e8e8e;
}
h1, h2
{
 color: #0055c0;
}
h1
{
 font-size: 65px;
 width: 2000px;
 text-align: center;
}
h2
{
 font-size: 40px;
}
p, ul
{
 font-color: white;
 text-shadow: 5px 5px 5px;
 font-size: 25px;
}
body
{
 background-image: url(fond.png);
 margin: 0px;
}
.pres
{
 font-size: 30px;
 text-align: center;
 width: 1000px;
 margin: auto;
}
.conteneur
{
 width: 2000px;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-items: stretch;

} 
.elements
{
 width: 400px;
 background-color: lightslategray;
 border: black solid;
 border-radius: 5px 5px 5px 5px;
}
.liseret
{
 background-color: dimgrey;
 float: left;
 width:100px;
 height: 1000px;
}



Merci d'avance
Afficher la suite 

Votre réponse

Répondre au sujet

1 réponse

Signaler Commenter la réponse de Traxmix
Messages postés
457
Date d'inscription
mardi 12 mars 2013
Dernière intervention
13 février 2019
 32
0
Merci
Salut,
sur ton code CSS, dans la class liseret essai de rajouter "position:fixed" ou "position:relative" ou "position:absolute".
Signaler Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme -
Salut,
TU M'AS SAUVÉS LA VIE....euh non....MON SITE !!!!!

"position:fixed" et "position:absolute" ont fonctionné, mais pas "position:relative".
Pour agrandir mes connaissance en CSS :
Pourrait-tu me dire ce que ces trois propriétés signifient ?
Et pourquoi "position:relative" n'as pas fonctionné ?


Bien à toi :-);-)
Signaler Commenter la réponse de Traxmix
Traxmix
Messages postés
457
Date d'inscription
mardi 12 mars 2013
Dernière intervention
13 février 2019
 32 -
Au plaisir alors :)
Regarde ici tout est expliqué: http://fr.learnlayout.com/position.html
Signaler Commenter la réponse de Traxmix
Traxmix
Messages postés
457
Date d'inscription
mardi 12 mars 2013
Dernière intervention
13 février 2019
 32 -
"position:Relative" n'a pas vraiment de différence que la position par défaut. Tu comprendras mieux sur le lien envoyé.
Signaler Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme -
OK merci encore !!!!

Bien à toi
Commenter la réponse de Traxmix

Votre réponse

Répondre au sujet
Posez votre question