Partage

Éxercice 2 du cours, problème de police + question

20 avril 2017 à 19:09:36

Bonjour, 

Je rencontre un problème au niveau de la police que je doit mettre en place pour l'exercice...

Pour commencer voici la police en question : 

http://www.dafont.com/messenger-pigeons.font

Pour le moment, j'ai télécharger la police, je l'ai installer sur mon PC, et j'ai placer le fichier "Messenger Pigeons Personal Use.TTF" dans un dossier à la racine de mon cv.

Je vous met les codes plus bas, pourriez vous me dire ce que j'ai mal fait svp... 

1. A la base je souhaitais mettre tous les titres dans cette police. (donc h1, h2)

2. Comment puis-je faire pour que mon BG s'étire sur toute la longueur de la page sans lui définir une hauteur de 720px ?

3. J'ai un soucis sur sublime text uniquement dans l'onglet css... si je veux écrire entre deux lettres, la suite s'efface automatiquement donc je doit ré écrire tout le reste de la phrase, c'est très ennuyant !

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css" />
	<title>Document</title>
</head>
<body>

	<center>
		<p>
			<h1>MARTIN Yvan</h1>
			Bonjour à tous, je viens de commencer la formation HTML d'OpenClassroom !<br /><br />
		</p>
	</center>

	<a href="images/ppgrand.png"><img src="images/ppmini.png"></a>

	<p>
<h2>Mon expérience</h2>
		<li><strong>D'hier a aujourd'hui :</strong> J'ai commencer le cours d'Openclassroom !</li>
		<li><strong>D'il y'a quelques temps à avant-hier :</strong> J'ai commencer à m'intéresser au DEV Web.</li>
		<li><strong>D'il y'a fort fort longtemps à il y'a quelques temps :</strong> Tiens, l'informatique est ma passion depuis tout petit, ça me plairait de bosser dans cettre branche, il n'est jamais trop tard !</li>
	</p>


	<p>
<h2>Mes compétences</h2>
		<li>Langage HTML 5</li>
		<li>Langage CSS 3</li>
		<li>Bientôt le PHP et le JS !</li>
	</p>


	<p>
<h2>Ma formation</h2>
		Je commence tout juste la formation d'OpenClassroom, et je trouve que je m'en sort bien, mais ce n'est que le début !
	</p>


</body>
</html>
@font-face {font-family: "Messenger Pigeons Personal Use"; src: url("fonts/Messenger Pigeons Personal Use.ttf");}


body {background-image: url("images/bg.png"); background-size: cover; margin: auto; height: 720px;} 

h1, h2 {font-family: "Messenger Pigeons Personal Use"; src: url("fonts/Messenger Pigeons Personal Use.ttf");}
h2 {color : #bd4c00;}


Merci beaucoup pour votre aide ! 

-
Edité par Vanvan271013 20 avril 2017 à 19:11:36

20 avril 2017 à 23:05:58

Salut,

Il y a plein d'erreurs à corriger :

  • La balise center est dépréciée depuis 1998. Interdit d'utiliser ça. On sépare le contenu et la mise en forme, le html n'a PAS à contenir des informations de mise en page.
  • Tu ne peux pas mettre tes titres à l'intérieur de tes balises de paragraphe. Tes listes non plus.
  • Tu ne peux pas avoir de balises <li> en dehors d'une balise <ul> ou <ol>

Il y  a également des erreurs dans ton CSS : src n'est pas une propriété. Tu dois juste définir font-family, tu n'est pas dans ta définition de font-face.

Je t'encourage très vivement à revenir sur la lecture des premiers chapitres du cours, parce que tu as clairement manqué des choses…

Ne te décourage pas !

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
21 avril 2017 à 0:37:11

Merci beaucoup pour ta réponse ! 

J'ai corriger mon code HTML et je vais recommencer le CSS entièrement.

C'est vrai que j'ai sauter certaines parties car j'avais commencer à coder il y'a un an de ça et je pensais me souvenir de certaines choses, et j'était arriver à faire un "site" avec plusieurs page, bannière, logo, menu, ect...

Je vais prendre le temps de tout relire à mon aise et être sur d'avoir bien compris.

Encore merci pour ton aide !

Pour le code HTML il ressemble à ça maintenant :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css" />
	<title>Document</title>
</head>
<body>


	<h1>MARTIN Yvan</h1>

	<p>Bonjour à tous, je viens de commencer la formation HTML d'OpenClassroom !</p>
	<a href="images/ppgrand.png"><img src="images/ppmini.png"></a>



	<h2>Mon expérience</h2>

	<p>
		<ul>
			<li><strong>D'hier a aujourd'hui :</strong> J'ai commencer le cours d'Openclassroom !</li>
			<li><strong>D'il y'a quelques temps à avant-hier :</strong> J'ai commencer à m'intéresser au DEV Web.</li>
			<li><strong>D'il y'a fort fort longtemps à il y'a quelques temps :</strong> Tiens, l'informatique est ma passion depuis tout petit, ça me plairait de bosser dans cettre branche, il n'est jamais trop tard !</li>
		</ul>
	</p>



	<h2>Mes compétences</h2>

	<p>
		<ul>
			<li>Langage HTML 5</li>
			<li>Langage CSS 3</li>
			<li>Bientôt le PHP et le JS !</li>
		</ul>
	</p>



	<h2>Ma formation</h2>

	<p>Je commence tout juste la formation d'OpenClassroom, et je trouve que je m'en sort bien, mais ce n'est que le début !</p>


</body>
</html>



-
Edité par Vanvan271013 21 avril 2017 à 0:37:57

21 avril 2017 à 9:08:50

Bonjour,

Correction de l'HTML à nouveau : Les <ul> n'ont pas à se trouver dans un <p> !

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
21 avril 2017 à 12:01:49

C'est beaucoup mieux, mais en effet, il faut mettre les listes hors des paragraphes. :)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Éxercice 2 du cours, problème de police + question

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown