Faire un liseret pour son CV (semaine 3 du cours)

Sujet résolu

30 mars 2017 à 9:28:38

Bonjour à tous.

Au début, je n'arrivais pas à faire mon liseret, donc j'ai fait des recherches pour apprendre comment le faire. Maintenant, j'y arrive. Le seul problème, c'est que lorsque je veux mettre qu'il fasse toute la page en hauteur (100%), il ne s'affiche pas. Il ne fonctionne que lorsque je mets des px.

Mon code HTML:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css" />
		<title> CV de Jason Bafort</title>
	</head>
	<body>
		<div class=liseret>
		</div>
		<div class=container>
		<p class=image> <br /> <br /> 
		<a href="Photo.jpg"><img src="Photo_mini.jpg" alt="Photo de moi" title="Cliquez pour agrandir" /></a><br />Etudiant, Apprenti codeur.</p>
		<h1> Jason Bafort </h1>
		<h2> Mon expérience </h2>
		<p> blablabla </p>
		<h2> Mes compétences </h2>
		<p> blablabla</p>
		<h2> Ma formation </h2>
		<p>blablabla</p>
		</div>
	</body>
</html>

Mon code CSS:

@font-face {
	font-family: "Source Sans Pro"
	src: url('Source Sans Pro.otf')
}

h1
{
	text-align: center;
	color: red;
	border: 2px red solid
}

h1
{
	box-shadow: 3px 3px 3px red
}
.image
{
	text-align: right;
	float: right;
}

.intro
{
	text-align: right;
	float: right;
}

h2
{
	font-family: 'Source Sans Pro'
}

h2
{
	text-decoration: underline;
}
body
{
	height: 100%;
	margin: 0;
}
.liseret
{
	float: left;
	width: 10%;
	height: 100%;
	background: red;
}

.container
{
	margin-left: 250px;
}

Là, mon liseret ne s'affiche pas. Par contre, si je remplace

.liseret
{
	float: left;
	width: 10%;
	height: 100%;
	background: red;
}

par

.liseret
{
	float: left;
	width: 10%;
	height: 500px;
	background: red;
}

Le liseret va s'afficher, mais il va s'arrêter en plein milieu de la page, et ça fait assez moche.

Je ne vois pas ce qui cloche dans mon code...Si vous pouvez m'éclairer, merci!

Jean-patrick_Lamoureux

12 août 2018 à 14:33:57

Bonjour,

Je sais pas si tu à trouver une solution.

Pour que le liseret s'affiche des le début de ma page, j'ai simplement placer le code <div class="liseret"> </div>

en premeiere ligne dans mon code html juste en dessous de <body> ce qui donne

<body>

</body>

J'espere que sa t'aidera si tu n'avais pas encore la solution.

exen

12 août 2018 à 14:40:03

Bonjour,

@Jean-patrickLamoureux

Si depuis Mars 2017 il n'avais pas trouvé, il vaudrait mieux qu'il abandonne de suite, tout ca pour dire nous somment en pleins déterrage de post là.

C'est gentil de ta part de vouloir répondre, mais prend le temps de regarder les dates des posts quand tu le fait.

Compos sui.