Problème de texte/couleurs

5 juin 2018 à 19:06:00

Bonjour, je suis entrain d'esayer de faire le code source de l'image suivante, (soyez gentil, je suis encore Trésssssssssssss débutant dans le language). J'essaye de placer le texte à coter des commandes mais le problème c'est que le partie (beige) qu'on ma demandé entièrement a colorier ne l'est pas.

Voici le code :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>FunHTML5.com</title>
	<link rel ="stylesheet" href="css.css"/>

    </head>
    <body>
    
     <h1>funhtml.com Rérérence HTML 5
<br> <br>	 </h1> 
	 <article>
	  <h3> Le language HTML : </h3>
	 <p class ="paragraphe"> In principio creativ Deus caelum et teram terra autem erat inanis et vacua  et tenebrea super faciem abyssi et spiritus <br>
	 Dei ferebatur super aquas dixitque...	 </p>
	 </article>
	<nav> <p>
	 <ul>
	 
	 <li> DOCTYPE</li>
	 <li> html </li>
	 <li> head</li>
	 <li> body</li>
	 <li> a</li>
	 <li> abbr</li>
	 <li> aside</li>
	 <li> address</li>
	 <li> area</li>
	 <li> b</li>
	 <li> base </li>
	 <li> bdo </li>
	 <li> blockquote</li>
	 <li> br /</li>
	 <li> button</li>
	 <li> caption</li>
	 <li> cite</li>
	 <li> code</li>
	 <li> col</li>
	 <li> colgroup</li>
	 <li> dd</li>
	 <li> del</li>
	 <li> dfn</li>
	 <li> div</li>
	 <li> dl</li>
	 <li> dt</li>
	 <li> em</li>
	 <li> fieldset</li>
	 <li> form</li>
	 <li> h1...h6</li>
	 <li> head</li>
	 <li> hr /</li>
	 <li> html</li>
	 <li> i</li>

	 </p>
	 </nav>
	 
	 

	
    </body>
</html>

le code css:

h1
{color:red;}
head
{color:blue;}
h1
{text-align:center;}
article
{text-align:center-right;}
h1
{font-style:italic;}
ul
{text-align:left}
h1 
{ background-color: blue;}
ul
{ color:white;}
ul
{background-color:red;}
article
{color: black;
background-color:olive;}
nav
{
 float: left;
 width: 150px;display: inline-block;  
}

article
{
margin-left: 150px; display: inline-block;  
}

et ce qu'on me demande de réaliser:

-
Edité par Madaha 5 juin 2018 à 19:08:33

N.Parvedy

6 juin 2018 à 8:36:02

Faut utiliser un background-color dans le body pour couvrir, un exemple de code.

Faudrait pour la partie html :

<header>
  <h1>titre</h1>
</header>

<div id="corps">
 <nav>
  <ul>
    <li></li>
  </ul>
 </nav>
 <section>
  <h1>titre</h1>
  <p>paragraphe</p>
</section>

</div>

J'ai utilisé une balise div qui vas contenir nav et section ensemble, ce qui permettra après d'utiliser flexbox.

Pour le css :

body{
	margin:0;
	background-color:blue;
}
#corps{
	display:flex;
}

header{
	height:200px;
	background-color:yellow;
}

nav{
	width:18%;
	background-color:red;
}

section{
	background-color:blue;
	width:80%;
}

J'ai rajouté un background-color dans le body, la même que pour section pour couvrir complètement.

Et voilà :

-
Edité par N.Parvedy 6 juin 2018 à 9:06:14

Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅

Madaha

6 juin 2018 à 13:53:22

N.Parvedy a écrit:

Faut utiliser un background-color dans le body pour couvrir, un exemple de code.

Faudrait pour la partie html :
<header>
  <h1>titre</h1>
</header>
<div id="corps">
 <nav>
  <ul>
    <li></li>
  </ul>
 </nav>
 <section>
  <h1>titre</h1>
  <p>paragraphe</p>
</section>
</div>
J'ai utilisé une balise div qui vas contenir nav et section ensemble, ce qui permettra après d'utiliser flexbox.

Pour le css :
body{
	margin:0;
	background-color:blue;
}
#corps{
	display:flex;
}

header{
	height:200px;
	background-color:yellow;
}

nav{
	width:18%;
	background-color:red;
}

section{
	background-color:blue;
	width:80%;
}
J'ai rajouté un background-color dans le body, la même que pour section pour couvrir complètement.

Et voilà :

-
Edité par N.Parvedy il y a environ 4 heures

Merci beaucoup d'avoir pris le temps de me répondre, je pense que je n'avais juste pas assez bien compris les parties d'un sites (header,footer...)

Cordialement