Mon liseré fait tout descendre...
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
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 :
Mon code CSS :</bold>
Merci d'avance
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
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 :-);-)
Regarde ici tout est expliqué: https://fr.learnlayout.com/position.html
Bien à toi