Formation HTML/CSS

Ok parfait ! Maintenant on va s'intéresser à la barre de navigation en haut !
Pour cela, on va donc mettre une liste (comme on a fait dans la forma 2).
Mais là, je vais t'expliquer comment on utilise les listes pour commencer !
Déjà, que sont les listes ?
Tu sais, c'est ce genre de chose :

Beurre
Lait
Confiture de fraise
Pain
Framboises
Patisserie
- Pain au chocolat

Un petit peu de mon côté gourmand pour représenter cette liste :p

Breffouille, voyons plutôt comment les faire, et tout ce qu'il faut savoir à leur sujet.

En HTML, il existe 2 grands types de listes : les listes ordonnées et les listes non-ordonnées.

Les listes ordonnées :
Ce sont les listes numérotées(1, 2, 3, 4...) ou bien lettrées (a, b, c, d...)
Par exemple :

Numéro 1
Numéro 2
Numéro 3
...

Pour faire des listes ordonnées, la syntaxe est toujours la même :

Code:: <ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
<li>Ainsi de suite... </li>
</ol>

Afin de faire de notre liste ordonnée une liste numérotée ou lettrée, nous devons utiliser du CSS.

Grâce à la propriété CSS list-style-type, on peut faire cela.
Par exemple, si on veut que notre liste soit numérotée avec des nombres, on utilisera :

Code:: #name{
list-style-type: decimal;
}

#name est un id appartenant à une balise <ol> car la propriété list-style-type ne s'attribue qu'à <ol>, pas à <li>.
Par défaut, les listes ordonnées sont numérotées avec des nombres

On peut aussi faire une liste numérotée, mais avec des chiffres romains ! Grâce à :

Code:: #name{
list-style-type: upper-roman;
}

Elément 1
Elément 2
...

Si on veut qu'ils soient en majuscules.

Et si on veut qu'ils soient en minuscules, ce sera :

Code:: #name{
list-style-type: lower-roman;
}

Elément 1
Elément 2
...

Si maintenant nous préférons que notre liste soit lettrée, nous avons là aussi, le choix des majuscules :

Code:: #name{
list-style-type: upper-alpha;
}

Elément 1
Elément 2
...

Ou bien le choix des minuscules :

Code:: #name{
list-style-type: lower-alpha;
}

Elément 1
Elément 2
...

Tu essais de faire cette liste ?

HTML
CSS
Javascript
PHP
AJAX

Bizouz'

Les listes non-ordonnées :
Les listes non-ordonnées sont des listes précédées d'un signe : Un carré, un cercle, ...
Par exemple :

Elément 1
Elément 2
Elément 3
...

Comme pour les listes ordonnées, leur syntaxe est toujours la même :

Code:: <ul>
<li>Elément 1</li>
<li>Elément 2</li>
<li>Et ainsi de suite...</li>
</ul>

Nous avons, là aussi, l'embarras du choix !

-Pour qu'un cercle (dont le fond est blanc) précède les éléments de la liste, on utilisera :

Code:: #name{
list-style-type: circle;
}

Elément 1
Elément 2
Elément 3
...

-Pour qu'un cercle (dont le fond est noir) précède les éléments de la liste, on utilisera :

Code:: #name{
list-style-type: disc;
}

Elément 1
Elément 2
Elément 3
...

-Pour qu'un carré précède les éléments de la liste, on utilisera :

Code:: #name{
list-style-type: square;
}

Elément 1
Elément 2
Elément 3
...

Mais ce n'est pas tout, ça va plus loin ! Si aucun de ces motifs ne plait, on peut mettre notre propre motif ! avec :

Code:: #name{
list-style-image: url('lien_de_l_image');
}

Elément 1
Elément 2
Elément 3
...

Et notre image apparaîtra !

Bon, alors, depuis le début de la formation je vous dis qu'on va changer la structure des liens de la barre de navigation...
En soi, dans une barre de navigation on a une liste de liens. Il est donc logique de les mettre dans une liste...
Je vous laisse faire ?
Voilà ce qu'on doit obtenir : (à peu près)

Et un losange ? :p j'ai tout compris à part ça !

Ca existe pas :'(

Maintenant que tu possèdes tout ce qu'il faut pour faire des listes, nous allons compliquer la chose en les imbriquant.
C'est à dire, faire des listes, dans des listes !
Comme ça :

Films documentaires :
1. Sur l'océan
2. Sur les animaux
Films de science-fiction :
1. Dans l'espace
2. Sous la mer

Tu vois, ici, on a deux listes dans la liste principale :
La liste des thèmes pour les films documentaires
La liste des thèmes pour les films de science-fiction.

Comment ça fonctionne ?
En fait, c'est tout bête :
On a juste à faire une nouvelle liste, dans le <li> où on la veut ^^.
Petit exemple :
Dans notre liste ci-dessus, on a d'abord cette grande liste :

Films documentaires
Films de science-fiction

Code:: <ul>
<li>Films documentaires</li>
<li>Films de science-fiction</li>
</ul>

Puis la liste des thèmes des films documentaires :

Sur l'océan
Sur les animaux

Code:: <ol>
<li>Sur l'océan</li>
<li>Sur les animaux</li>
</ol>

Et enfin la liste des thèmes de science fiction :

Dans l'espace
Sous la mer

Code:: <ol>
<li>Dans l'espace</li>
<li>Sous la mer</li>
</ol>

Du coup, on a juste à mettre dans le <li> des documentaires, la liste des thèmes de films portant sur ce sujet.
On aura alors :

Code:: <li>Films documentaires :
   <ol>
   <li>Sur l'océan</li>
   <li>Sur les animaux</li>
   </ol>
</li>

Et pareil pour les films de science-fiction :

Code:: <li>Films de science-fiction :
   <ol>
   <li>Dans l'espace</li>
   <li>Sous la mer</li>
   </ol>
</li>

Le code de notre liste complète est donc :

Code:: <ul>
<li>Films documentaires :
   <ol>
   <li>Sur l'océan</li>
   <li>Sur les animaux</li>
   </ol>
</li>
<li>Films de science-fiction :
   <ol>
   <li>Dans l'espace</li>
   <li>Sous la mer</li>
   </ol>
</li>
</ul>

Si toi aussi tu indentes ton code (tu sautes des lignes et fais des tabulations/espaces pour marquer la hiérarchisation des codes, sache que pour être certain que ton code ne fasse pas de bugs sous tous les navigateurs, tu peux utiliser les commentaires dans le cas où tu sautes une ligne alors que ta balise n'est pas fermée, comme ici :

Code:: <li>Films de science-fiction : 
   <ol>
   <li>Dans l'espace</li>
   <li>Sous la mer</li>
   </ol>
</li>

A l'endroit même où j'ai fait mon commentaire, tu peux faire :

Code:: <li>Films de science-fiction :<ol>
   <li>Dans l'espace</li>
   <li>Sous la mer</li>
   </ol>
</li>

Petite technique bien pratique

Tu vas donc essayer de compléter notre liste de base, de la sorte :
exo liste imbrication

Si t'as des questions, je suis là Wink

Ok donc ton exo est tout bon Smile

.

On a fini la partie sur les listes. Je vais te demander maintenant de modifier donc ta barre de navigation sur la création en rajoutant une liste et en appliquant ce qu'on a vu à la formation numéro 2 Smile

Coucou

Ok, donc on va corriger ça Wink

.
Pour le header, c'était bon.
Pour la balise nav (#barre_navigation) :
On lui enlève toutes les marges et on la centre grâce à margin: auto :

Code:: #barre_navigation {
margin: 0 auto;
padding: 0;
height: 100%;
width: 60%;
}

Ensuite, pour la liste en elle même (#liste) :
Déjà, on enlève ce moche "position: fixe" xD.
Ensuite, on va voir une autre façon d'aligner avec la propriété display, autre qu'avec les flexbox.
Donc on enlève tout ce qui concerne la flexbox. Et on se charge simplement d'aligner la liste avec text-align: center :

Code:: #liste{
list-style-type: none;
height:100%;
width:100%;
margin:0;
padding: 0;
text-align: center;
}

On va maintenant appliquer le display sur les "li". On va leur dire de changer de type, pour qu'ils soient de type "inline" (pour qu'ils s'alignent) mais aussi de type "block" (pour qu'on puisse leur ajouter des marges, etc).
On va utiliser alors display: inline-block;
Ensuite, on ajoute des petites marges qui vont bien, une hauteur parfaite, et puis on modifie la couleur (grâce à rgba, qui permet de définir les valeurs de rouge, de vert et de bleu, ainsi que l'opacité de ces 3 couleurs).
On obtient alors:

Code:: #liste li{
background-color: rgba(102, 51, 51, 0.7);
background: rgba(102, 51, 51, 0.7);
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 20%;
display: inline-block;
height: 40%;
margin-top: 1.5%;
text-align: center;
}

Et voilà, on a notre barre de navigation qu'est ok !
Tu modifies et je te laisse me poser des questions si t'en as Smile

Code:: <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Exercice final CSS</title>
<style type="text/css">
body, html{
margin: 0;
padding: 0;
}
#header {
position:fixed;
top:0px;
left:0px;
width:100%;
height:50px;
background-color:#0F0F0F;
border-bottom: 2px solid #542128;
}
#barre_navigation {
margin: 0 auto;
padding: 0;
height: 100%;
width: 60%;
}
#liste{
list-style-type: none;
height:100%;
width:100%;
margin:0;
padding: 0;
text-align: center;
}
#liste li{
background-color: rgba(102, 51, 51, 0.7);
background: rgba(102, 51, 51, 0.7);
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 20%;
display: inline-block;
height: 40%;
margin-top: 1.5%;
text-align: center;
}
.police{
font-family: 'Exo', sans-serif;
}
.bouton_page {
text-decoration: none;
color: white;
font-family: Calibri;
text-align:center;
}
#fond_page {
margin-top:50px;
background: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg') center 0 no-repeat;
-webkit-background-size: cover; /* Old Chrome & Safari*/
background-size: cover; /* Standard version */
}
#titre_principal1 {
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width:300px;
height: 40px;
background-color: rgba(16, 16, 16, 0.5);
color: white;
text-align: center;
right:50%;
font-size:12px;
margin-left: 39%;
top: 100px;
}
#titre_principal2 {
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
max-width:350px;
height: 40px;
background-color: rgba(16, 16, 16, 0.5);
color: white;
text-align: center;
right:50%;
font-size:12px;
margin-left: 37%;
}
#cadre1 {
-moz-border-radius: 10px 0px 10px 0px;
-o-border-radius: 10px 0px 10px 0px;
-webkit-border-radius: 10px 0px 10px 0px;
border-radius: 10px 0px 10px 0px;
border: 2px solid white;
height: 200px;
width: 300px;
margin-left: 80px;
margin-top : 130px;
background-color: rgba(16, 16, 16, 0.5);
float:left;
}
#cadre2 {
-moz-border-radius: 10px 0px 10px 0px;
-o-border-radius: 10px 0px 10px 0px;
-webkit-border-radius: 10px 0px 10px 0px;
border-radius: 10px 0px 10px 0px;
border: 2px solid white;
height: 200px;
width: 300px;
margin-right: 80px;
margin-top:140px;
background-color: rgba(16, 16, 16, 0.5);
display:flex ;
}
.titre2 {
-moz-border-radius: 10px 0px 10px 0px;
-o-border-radius: 10px 0px 10px 0px;
-webkit-border-radius: 10px 0px 10px 0px;
border-radius: 10px 0px 10px 0px;
border: 1px solid #A6071B;
background-color: #A6071B;
color: white;
text-align: center;
font-variant: small-caps;
width: 95%;
margin-left:7px;
}
.paragraphe {
-moz-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 0px 10px 0px;
-webkit-border-radius: 10px 0px 10px 0px;
border-radius: 10px 10px 10px 10px;
color:white;
font-size:12px;
text-align: justify;
border-left: 1px dashed white;
border-right: 1px dashed white;
margin-left: 15px;
margin-right: 15px;
}
#cadre 3 {
border: 0px solid black;
background-color: rgba(255, 255, 255, 0.5);
height: 150px;
width: 90%;
}
#titre2b {
border: 1px solid #A6071B;
background-color: #A6071B;
color: white;
text-align: center;
font-variant: small-caps;
width: 250px;
margin-left:40%;
}
#footer {
color: white;
font-size: 10px;
}
</style>
<link href="http://fonts.googleapis.com/css?family=Exo" rel="stylesheet" type="text/css">
</head>
<body id="fond_page">
<header id="header">
<nav id="barre_navigation">
<ul id="liste">
<li><a href="page1.html" class="bouton_page">Page 1</a></li>
<li><a href="page2.html" class="bouton_page">Page 2</a></li>
<li><a href="page3.html" class="bouton_page">Page 3</a></li>
</ul>
</nav>
</header>
<section class="police">
<h1 id="titre_principal1">Bienvenue sur mon <strong>super site</strong> super trop génial</h1>
<h1 id="titre_principal2">Il parle de plein de choses intéressantes comme le chocolat</h1>
<article id="cadre1">
<h2 class="titre2">mes connaissances</h2>
<p class="paragraphe">
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
</p>
</article>
<article id="cadre2">
<h2 class="titre2">life is beautiful</h2>
<p class="paragraphe">
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
</p>
<p>Je ne suis qu'un test</p>
</article>
<article id="cadre3">
<h2 id="titre2b">mon pseudo</h2>
<p>I'm the best</p>
<p>My website is the best</p>
</article>
</section>
<footer id="footer" class="police">Super création - By Pseudo - </footer>
</body>
</html>

Bon, j'ai un peu avancé... J'arrive à mettre les cadres au même niveau, mais j'arrive pas à les écarter. Et avec la technique que j'utilise, le contenu du cadre se place aussi comme ça. Je suppose qu'il y a moyen d'éviter ça, mais je ne sais pas comment.
Dans l'ensemble, c'est bien sûr moins beau que chez toi, mais j'avance quand même Very Happy

J'ai un poil amélioré le code, mais il n'est toujours pas parfait :/ Cela dit, je me rapproche quand même du résultat souhaité.

Code:: <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Exercice final CSS</title>
<style type="text/css">
      body, html{
         margin: 0;
         padding: 0;
      }
      #header {
         position:fixed;
         top:0px;
         left:0px;
         width:100%;
         height:50px;
         background-color:#0F0F0F;
         border-bottom: 2px solid #542128;
      }
      #barre_navigation {
         margin: 0 auto;
         padding: 0;
         height: 100%;
         width: 60%;
      }
      #liste{
         list-style-type: none;
         height:100%;
         width:100%;
         margin:0;
         padding: 0;
         text-align: center;
      }
      #liste li{
         background-color: rgba(102, 51, 51, 0.7);
         background: rgba(102, 51, 51, 0.7);
               -moz-border-radius: 5px;
               -o-border-radius: 5px;
               -webkit-border-radius: 5px;
         border-radius: 5px;
         width: 20%;
         display: inline-block;
         height: 40%;
         margin-top: 1.5%;
         text-align: center;
      }
      .police{
         font-family: 'Exo', sans-serif;
            }
         .bouton_page {
         text-decoration: none;
         color: white;
         font-family: Calibri;
         text-align:center;
      }
      #fond_page {
         margin-top:50px;
         background: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg') center 0 no-repeat;
         -webkit-background-size: cover; /* Old Chrome & Safari*/
         background-size: cover; /* Standard version */
      }
      #titre_principal1 {
         -moz-border-radius: 5px;
               -o-border-radius: 5px;
               -webkit-border-radius: 5px;
         border-radius: 5px;
         width:300px;
         height: 40px;
         background-color: rgba(16, 16, 16, 0.5);
         color: white;
         text-align: center;
         right:50%;
         font-size:12px;
         margin-left: 39%;
         top: 40%;
      }
      #titre_principal2 {
         -moz-border-radius: 5px;
               -o-border-radius: 5px;
               -webkit-border-radius: 5px;
         border-radius: 5px;
         max-width:350px;
         height: 40px;
         background-color: rgba(16, 16, 16, 0.5);
         color: white;
         text-align: center;
         right:50%;
         font-size:12px;
         margin-left: 37%;
         margin-top:0;
      }
      #cadre1 {
         -moz-border-radius: 10px 0px 10px 0px;
               -o-border-radius: 10px 0px 10px 0px;
               -webkit-border-radius: 10px 0px 10px 0px;
         border-radius: 10px 0px 10px 0px;
         border: 2px solid white;
         height: 200px;
         width: 300px;
         background-color: rgba(16, 16, 16, 0.5);
      }
      #cadre2 {
         -moz-border-radius: 10px 0px 10px 0px;
               -o-border-radius: 10px 0px 10px 0px;
               -webkit-border-radius: 10px 0px 10px 0px;
         border-radius: 10px 0px 10px 0px;
         border: 2px solid white;
         height: 200px;
         width: 300px;
         margin-left:40%;
         background-color: rgba(16, 16, 16, 0.5);
      }
      .titre2 {
         -moz-border-radius: 10px 0px 10px 0px;
               -o-border-radius: 10px 0px 10px 0px;
               -webkit-border-radius: 10px 0px 10px 0px;
         border-radius: 10px 0px 10px 0px;
         border: 1px solid #A6071B;
         background-color: #A6071B;
         color: white;
         text-align: center;
         font-variant: small-caps;
         width: 95%;
         margin-left:7px;
      }
      .paragraphe {
         -moz-border-radius: 10px 10px 10px 10px;
               -o-border-radius: 10px 0px 10px 0px;
               -webkit-border-radius: 10px 0px 10px 0px;
         border-radius: 10px 10px 10px 10px;
         color:white;
         font-size:12px;
         text-align: justify;
         border-left: 1px dashed white;
         border-right: 1px dashed white;
         margin-left: 15px;
         margin-right: 15px;
      }
      #test{
         text-align:center;
         color:white;
      }
      #cadre 3 {
         background-color: rgba (255, 255, 255, 0.5);
         height: 150px;
         width: 90%;
      }
      #titre2b {
         border: 1px solid #A6071B;
         background-color: #A6071B;
         color: white;
         text-align: center;
         font-variant: small-caps;
         width: 250px;
         margin-left:40%;
      }
      #texte1{
         text-align:center;
         letter-spacing:10px;
         font-weight:bold;
      }
      #texte2{
         text-align:center;
      }
      #footer {
         color: white;
         font-size: 10px;
      }
</style>
<link href="http://fonts.googleapis.com/css?family=Exo" rel="stylesheet" type="text/css">
</head>
<body id="fond_page">
      <header id="header">
         <nav id="barre_navigation">
            <ul id="liste">
               <li><a href="page1.html" class="bouton_page">Page 1</a></li>
               <li><a href="page2.html" class="bouton_page">Page 2</a></li>
               <li><a href="page3.html" class="bouton_page">Page 3</a></li>
            </ul>
         </nav>
      </header>
      <section class="police">
         <h1 id="titre_principal1">Bienvenue sur mon <strong>super site</strong> super trop génial</h1>
         <h1 id="titre_principal2">Il parle de plein de choses intéressantes comme le chocolat</h1>
         <section style="display:flex; margin: 20px auto; width: 80%;">
            <article id="cadre1">
               <h2 class="titre2">mes connaissances</h2>
               <p class="paragraphe">
               Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
               </p>
            </article>
            <article id="cadre2">
               <h2 class="titre2">life is beautiful</h2>
               <p class="paragraphe">
               Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
               </p>
               <p id="test">Je ne suis qu'un test</p>
            </article>
         </section>
            <article id="cadre3">
               <h2 id="titre2b">mon pseudo</h2>
               <p id="texte1">I'm the best</p>
               <p id="texte2">My website is the best</p>
            </article>
      </section>
      <footer id="footer" class="police">Super création - By Pseudo - </footer>
</body>
</html>

Fiou, me voilà enfin xD.

Bon alors on va passer aux deux petites phrases d'introduction.
Comme tu peux le voir, elles sont collées et centrées. Le meilleur moyen de faire ça est donc d'utiliser deux balises inline.
On a donc :

Code:: <p id="introduction">
      <span>Bienvenue sur mon <strong>super site</strong> trop super génial.</span><br />
      <span>Il parle de pleins de choses intéressantes cimme le chocolat</span>
   </p>

Avec ce CSS :

Code:: p#introduction{
color: #fff;
width: 100%;
font-size: 14pt;
text-align: center;
padding: 5px;
}

p#introduction strong{
font-size: 15pt;
font-weight: bold;
}

p#introduction span{
background-color: rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.4);
   -moz-border-radius: 5px;
      -o-border-radius: 5px;
      -webkit-border-radius: 5px;
border-radius: 5px;
padding: 0.4% 0.3% 1% 0.3%;
display: inline-block;
}

p#introduction span:last-child{
-moz-border-radius: 0 0 5px 5px;
   -o-border-radius: 0 0 5px 5px;
      -webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

Est-ce qu'il y a des choses que tu ne comprends pas ?

Du coup, il faut qu'on supprime la première section de ton code, on a alors:

Code:: <body id="fond_page">
<header id="header">
<nav id="barre_navigation">
<ul id="liste">
<li><a href="page1.html" class="bouton_page">Page 1</a></li>
<li><a href="page2.html" class="bouton_page">Page 2</a></li>
<li><a href="page3.html" class="bouton_page">Page 3</a></li>
</ul>
</nav>
</header>
<p id="introduction">
<span>Bienvenue sur mon <strong>super site</strong> super trop génial</span>
<span>Il parle de plein de choses intéressantes comme le chocolat</span>
</p>
<section style="display:flex; margin: 20px auto; width: 80%;">
<article id="cadre1">
<h2 class="titre2">mes connaissances</h2>
<p class="paragraphe">
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
</p>
</article>
<article id="cadre2">
<h2 class="titre2">life is beautiful</h2>
<p class="paragraphe">
Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
</p>
<p id="test">Je ne suis qu'un test</p>
</article>
</section>
<article id="cadre3">
<h2 id="titre2b">mon pseudo</h2>
<p id="texte1">I'm the best</p>
<p id="texte2">My website is the best</p>
</article>
<footer id="footer" class="police">Super création - By Pseudo - </footer>
</body>

On se rend malheureusement compte que du coup, on a un article sans section !
Alors le seul moyen de rendre meilleur ce code, c'est de transformer cet article en aside !

As-tu des questions ?
On va continuer avec les deux blocs du milieu après Wink

.

Uhm d'accord, mais là, elles sont l'une à côté de l'autre :/

Tu as bien mis le code tout comme il fallait ? Montre-moi ton code Wink

Sans doute pas, du coup x)
Le voici Smile

Code:: <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Exercice final CSS</title>
<style type="text/css">
      body, html{
         margin: 0;
         padding: 0;
      }
      #header {
         position:fixed;
         top:0px;
         left:0px;
         width:100%;
         height:50px;
         background-color:#0F0F0F;
         border-bottom: 2px solid #542128;
      }
      #barre_navigation {
         margin: 0 auto;
         padding: 0;
         height: 100%;
         width: 60%;
      }
      #liste{
         list-style-type: none;
         height:100%;
         width:100%;
         margin:0;
         padding: 0;
         text-align: center;
      }
      #liste li{
         background-color: rgba(102, 51, 51, 0.7);
         background: rgba(102, 51, 51, 0.7);
               -moz-border-radius: 5px;
               -o-border-radius: 5px;
               -webkit-border-radius: 5px;
         border-radius: 5px;
         width: 20%;
         display: inline-block;
         height: 40%;
         margin-top: 1.5%;
         text-align: center;
      }
      .police{
         font-family: 'Exo', sans-serif;
            }
         .bouton_page {
         text-decoration: none;
         color: white;
         font-family: Calibri;
         text-align:center;
      }
      #fond_page {
         margin-top:50px;
         background: url('http://i84.servimg.com/u/f84/19/33/14/37/backgr10.jpg') center 0 no-repeat;
         -webkit-background-size: cover; /* Old Chrome & Safari*/
         background-size: cover; /* Standard version */
      }
      p#introduction{
         color: #fff;
         width: 100%;
         font-size: 14pt;
         text-align: center;
         padding: 5px;
      }

      p#introduction strong{
         font-size: 15pt;
         font-weight: bold;
      }

      p#introduction span{
         background-color: rgba(0, 0, 0, 0.4);
         background: rgba(0, 0, 0, 0.4);
            -moz-border-radius: 5px;
            -o-border-radius: 5px;
            -webkit-border-radius: 5px;
         border-radius: 5px;
         padding: 0.4% 0.3% 1% 0.3%;
         display: inline-block;
      }
      p#introduction span:last-child{
         -moz-border-radius: 0 0 5px 5px;
            -o-border-radius: 0 0 5px 5px;
            -webkit-border-radius: 0 0 5px 5px;
         border-radius: 0 0 5px 5px;
      }
      #cadre1 {
         -moz-border-radius: 10px 0px 10px 0px;
               -o-border-radius: 10px 0px 10px 0px;
               -webkit-border-radius: 10px 0px 10px 0px;
         border-radius: 10px 0px 10px 0px;
         border: 2px solid white;
         height: 200px;
         width: 300px;
         background-color: rgba(16, 16, 16, 0.5);
      }
      #cadre2 {
         -moz-border-radius: 10px 0px 10px 0px;
               -o-border-radius: 10px 0px 10px 0px;
               -webkit-border-radius: 10px 0px 10px 0px;
         border-radius: 10px 0px 10px 0px;
         border: 2px solid white;
         height: 200px;
         width: 300px;
         margin-left:40%;
         background-color: rgba(16, 16, 16, 0.5);
      }
      .titre2 {
         -moz-border-radius: 10px 0px 10px 0px;
               -o-border-radius: 10px 0px 10px 0px;
               -webkit-border-radius: 10px 0px 10px 0px;
         border-radius: 10px 0px 10px 0px;
         border: 1px solid #A6071B;
         background-color: #A6071B;
         color: white;
         text-align: center;
         font-variant: small-caps;
         width: 95%;
         margin-left:7px;
      }
      .paragraphe {
         -moz-border-radius: 10px 10px 10px 10px;
               -o-border-radius: 10px 0px 10px 0px;
               -webkit-border-radius: 10px 0px 10px 0px;
         border-radius: 10px 10px 10px 10px;
         color:white;
         font-size:12px;
         text-align: justify;
         border-left: 1px dashed white;
         border-right: 1px dashed white;
         margin-left: 15px;
         margin-right: 15px;
      }
      #test{
         text-align:center;
         color:white;
      }
      #cadre 3 {
         background-color: rgba (255, 255, 255, 0.5);
         height: 150px;
         width: 90%;
      }
      #titre2b {
         border: 1px solid #A6071B;
         background-color: #A6071B;
         color: white;
         text-align: center;
         font-variant: small-caps;
         width: 250px;
         margin-left:40%;
      }
      #texte1{
         text-align:center;
         letter-spacing:10px;
         font-weight:bold;
      }
      #texte2{
         text-align:center;
      }
      #footer {
         color: white;
         font-size: 10px;
      }
</style>
<link href="http://fonts.googleapis.com/css?family=Exo" rel="stylesheet" type="text/css">
</head>
<body id="fond_page">
      <header id="header">
         <nav id="barre_navigation">
            <ul id="liste">
               <li><a href="page1.html" class="bouton_page">Page 1</a></li>
               <li><a href="page2.html" class="bouton_page">Page 2</a></li>
               <li><a href="page3.html" class="bouton_page">Page 3</a></li>
            </ul>
         </nav>
      </header>
         <section class="police">
            <p id="introduction">
               <span>Bienvenue sur mon <strong>super site</strong> super trop génial</span>
               <span>Il parle de plein de choses intéressantes comme le chocolat</span>
            </p>
         <section style="display:flex; margin: 20px auto; width: 80%;">
            <article id="cadre1">
               <h2 class="titre2">mes connaissances</h2>
               <p class="paragraphe">
               Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
               </p>
            </article>
            <article id="cadre2">
               <h2 class="titre2">life is beautiful</h2>
               <p class="paragraphe">
               Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.
               </p>
               <p id="test">Je ne suis qu'un test</p>
            </article>
         </section>
            <article id="cadre3">
               <h2 id="titre2b">mon pseudo</h2>
               <p id="texte1">I'm the best</p>
               <p id="texte2">My website is the best</p>
            </article>
      </section>
      <footer id="footer" class="police">Super création - By Pseudo - </footer>
</body>
</html>

Ok, donc comme dit sur skype, on reprend avec les tableaux :

Bon, je pense que je n'ai pas besoin d'expliquer ce qu'est un tableaue. Cependant, il est intéressant de savoir à quoi peuvent-ils bien servir en codage.
Les tableaux :
Les tableaux servent à placer les éléments. Aujourd'hui, ils sont de moins en moins utilisés car HTML5 et CSS3 nous "forcent" à utiliser d'autres balises/propriétés, mais ils sont toujours aussi utiles. Tout particulièrement dans les formulaires.

Un tableau ça peut ressembler à ça :

Cellule 1	Cellule 2	Cellule 3
Cellule 4	Cellule 5	Cellule 6

Mais aussi à ça :

Cellule 1	Cellule 2	Cellule 3
	Cellule 4
Cellule 5	Cellule 6
Cellule 7		Cellule 8

On va commencer par le premier type de tableaux. Je les appellerai : les tableaux simples.

Alors, un tableau se résume en 3 balises :
<table> : C'est la balise permettant d'introduire un tableau. Elle l'englobe.
<tr> : C'est la balise permettant d'ajouter une nouvelle ligne.
<td> : C'est la balise permettant d'ajouter une nouvelle colonne.

Ces balises n'étant pas des balises orphelines, à chaque fois qu'on en ouvrira une, il faudra la refermer sitôt son contenu indiqué !

Du coup, passons à la pratique.
Nous avons ce tableau :

Cellule 1

Cellule 2

Le code pour le réaliser est...

Code:: <table border="1"><tr><td>Cellule 1</td><td>Cellule 2</td></tr></table>

(L'attribut border permet de définir la taille de la bordure entre chaque cellule du tableau. Il est possible de ne pas mettre de bordure en définissant 0 comme valeur à cet attribut)
J'explique ce code :
On ouvre le tableau (<table>), on met une nouvelle ligne (<tr>), on met une nouvelle colonne (<td>), on ferme cette colonne (</td>), j'en rouvre et referme une (<td>, </td>), je ferme ma ligne (</tr>), et je ferme mon tableau (</table>).

Tu as des questions ?

Comme j'ai déjà utilisé des tableaux, non, jusque là, ça va Very Happy

Ok ! Faisons un petit peu d'anglais pour continuer :
col en français, colonne.
row en français, ligne. (mais bon, toi je pense que tu le sais xD)

Pour s'en rappeler, simple : cols et colonnes commencent pareils.

Maintenant, pourquoi parler de ces deux mots...
Car ce sont ces deux mots qui vous aideront à faire des tableaux plus complexes.
Enfin, presque, il suffit de leur rajouter span.

On aura donc : colspan et rowspan, avec :
colspan : étend une cellule sur deux ou plusieurs colonnes
rowspan étend une cellule sur deux ou plusieurs lignes.

En pratique, voici ce que ça donne :
Utilisation de colspan

Cellule 1
Cellule 3	Cellule 4

Code:: <table border="1">
<tr>
<td colspan="2">Cellule 1</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>

Alors, comme tu le vois, déjà, colspan ne s'applique que sur les td .
Ensuite, on dit au premier td de s'étendre sur deux colonnes. Cela signifie qu'il en faut obligatoirement 2 !
Donc, dans la ligne (tr) d'après, on met deux colonnes (td).

Afin de s'y retrouver, il faut compter le nombre de colonnes totales ou le nombre de lignes totales.

Exemple avec rowspan

Cellule 1	Cellule 2
	Cellule 3

Code:: <table border="0">
<tr>
<td rowspan="2">Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
</tr>
</table>

Ici, la cellule 1 s'étend sur deux lignes. Il en faut donc deux (tr). Et vu qu'on met deux colonnes, on a besoin d'un autre td sur la seconde ligne.

Tu as des questions ?

Non, c'est très clair ! Ça je connaissais pas, c'est bon à savoir !

Ok !
Good !

Voyons maintenant deux choses fortes utiles :
Les "entêtes" de colonnes et les titres de tableaux

Reprenons ce tableau :

Cellule 1

Cellule 2

Imaginons que nous mettions un prénom et un nom à la place :

Benjamin

Talwyn

Si nous voulons indiquer à tous de quoi il s'agit, soit définir l'entête de chaque colonne, on pourra utiliser <th>.
Pour mieux comprendre, voici notre tableau avec des entêtes de colonnes.

Prénom	Nom
Benjamin	Talwyn

Et donc, comment on utilise <th>..
En fait, c'est simple comme tout !
Les entêtes (<th>) sont dans une ligne tout en haut du tableau.
Du coup, tout en haut du tableau, suffit de mettre un ligne (<tr>) contenant toutes les entêtes dans le bon ordre.

Notre précédent tableau a donc pour code :

Code:: <table border="1">
<tr><th>Prénom</th><th>Nom</th>
</tr>
<tr><td>Benjamin</td><td>Talwyn</td>
</tr>
</table>

Tout cela est bien beau et bien pratique, mais si on croise un prof' d'SVT ou de Physique-Chimie ici, il vous dira : "Et le titre du tableau alors ! ".

Au cas où en croise un, voici la solution : <caption>
Cette balise définit le titre du tableau de la manière suivante : <caption>titre</caption> et se met directement dans le tableau (juste après le <table>)

Voici donc notre tableau !

Tableau du prénom et du nom du formateur
Prénom	Nom
Benjamin	Talwyn

Code:: <table border="1">
<caption>Tableau du prénom et du nom du formateur</caption>
<tr><th>Prénom</th><th>Nom</th>
</tr>
<tr><td>Benjamin</td><td>Talwyn</td>
</tr>
</table>

C'est bon ?

Tout compris Smile

Ok ! Alors ce cours est un peu vieux faut que je le retape mais c'est pas grave même si le contenu est normalement pour SoP Wink

On va maintenant voir comment organiser son tableau.

Prenons ce tableau pour exemple :

Tableau des staffeurs du forum en fonction de leur poste
Staffeur	Poste(s)
Miettes	Fondatrice
Choubidou	Directrice
Agnïezka	Directrice
Clo	Directrice
Eluknow	Directeur
Lily	Directrice
Nellyra	Directrice
Ceca'	Surveillante
Anarchy Rose	Artiste
Elianne	Inspectrice
Liste non exhaustive des staffeurs

Code:: <table border="1">
<caption>Tableau des staffeurs du forum en fonction de leur poste</caption>
<tr>
<th>Staffeur</th><th>Poste(s)</th>
</tr>
<tr>
<td>Miettes</td><td>Fondatrice</td>
</tr>
<tr>
<td>Choubidou</td><td>Directrice</td>
</tr>
<tr>
<td>Agnïezka</td><td>Directrice</td>
</tr>
<tr>
<td>Clo</td><td>Directrice</td>
</tr>
<tr>
<td>Eluknow</td><td>Directeur</td>
</tr>
<tr>
<td>Lily</td><td>Directrice</td>
</tr>
<tr>
<td>Nellyra</td><td>Directrice</td>
</tr>
<tr>
<td>Ceca'</td><td>Surveillante</td>
</tr>
<tr>
<td>Anarchy Rose</td><td>Artiste</td>
</tr>
<tr>
<td>Elianne</td><td>Inspectrice</td>
</tr>
<tr>
<th colspan="2">Liste non exhaustive des staffeurs</th>
</tr>
</table>

Comme tu le vois, ce tableau comporte deux entêtes en haut, une "enpied" (entête en bas) en bas, et le contenu au centre.

Afin d'améliorer l'organisation du tableau, lorsque ceux-ci sont assez grands, il est possible d'utiliser 3 balises spécifiques aux tableaux qui permettent de le structurer.
Elles sont respectivement :
<thead> : Englobe toute l'entête du tableau
<tbody> : Englobe le contenu du tableau
<tfoot> : Englobe toute l'entête du bas du tableau (enpied ou footer du tableau si on veut)

Ces balises sont des balises "normales", non-orphelines.
Elles sont toute simple à utiliser seulement, leur ordre d'utilisation peut être trompeur, puisqu'en réalité elles doivent se mettent de la sorte dans un tableau :
En premier, <thead>, en second <tfoot>, et en dernier <tbody>.

Reprenons notre tableau :

Tableau des staffeurs du forum en fonction de leur poste
Staffeur	Poste(s)
Miettes	Fondatrice
Choubidou	Directrice
Agnïezka	Directrice
Clo	Directrice
Eluknow	Directeur
Lily	Directrice
Nellyra	Directrice
Ceca'	Surveillante
Anarchy Rose	Artiste
Elianne	Inspectrice
Liste non exhaustive des staffeurs

En rouge : C'est la partie que pourrait englober <thead>
En vert : C'est la partie que pourrait englober <tbody>
En bleu : C'est la partie que pourrait englober <tfoot>

Du coup, modifions notre code en utilisant ces 3 balises :

Code:: <table border="1">
<caption>Tableau des staffeurs du forum en fonction de leur poste</caption>

<thead>
  <tr>
   <th>Staffeur</th><th>Poste(s)</th>
  </tr>
</thead>

<tfoot>
  <tr>
  <th colspan="2">Liste non exhaustive des staffeurs</th>
</tr>
</tfoot>

<tbody>
  <tr>
<td>Miettes</td><td>Fondatrice</td>
</tr>
<tr>
<td>Choubidou</td><td>Directrice</td>
</tr>
<tr>
<td>Agnïezka</td><td>Directrice</td>
</tr>
<tr>
<td>Clo</td><td>Directrice</td>
</tr>
<tr>
<td>Eluknow</td><td>Directeur</td>
</tr>
<tr>
<td>Lily</td><td>Directrice</td>
</tr>
<tr>
<td>Nellyra</td><td>Directrice</td>
</tr>
<tr>
<td>Ceca'</td><td>Surveillante</td>
</tr>
<tr>
<td>Anarchy Rose</td><td>Artiste</td>
</tr>
<tr>
<td>Elianne</td><td>Inspectrice</td>
</tr>
</tbody>
</table>

Comme tu le vois, j'ai bien mis <tfoot> avant <tbody> mais le résultat est bien celui attendu :

Tableau des staffeurs du forum en fonction de leur poste
Staffeur	Poste(s)
Miettes	Fondatrice
Choubidou	Directrice
Agnïezka	Directrice
Clo	Directrice
Eluknow	Directeur
Lily	Directrice
Nellyra	Directrice
Ceca'	Surveillante
Anarchy Rose	Artiste
Elianne	Inspectrice
Liste non exhaustive des staffeurs

Des questions ?

Non, c'est très clair Smile

Alors, après avoir vu les tableaux en HTML, voyons ce que nous réserve le CSS avec ceux-ci !

Comme tu dois t'en douter, le tableau ayant des bordures, il est possible d'utiliser la propriété border que nous avons déjà utilisée.
Par exemple :

Code:: .name{
border: 1px solid black;
}

.name étant une class commune à plusieurs td
Seulement, regardons le résultat :

Cellule 1

Cellule 2

(code utilisé :

Spoiler:

Comme tu le vois, ça n'a pas le même aspect qu'avec une bordure normale mise avec border="1". Ici, les bordures ne sont pas collées.
Heureusement, il est possible de régler ce problème avec la propriété CSS suivante :

Code:: .name{
border-collapse: collapse;
}

Cette propriété s'applique uniquement au tableau dans son tout. Pas aux lignes ni aux cellules et colonnes.

Et en effet, en utilisant cette propriété sur notre balise <table>, notre tableau est désormais collé :

Cellule 1

Cellule 2

Maintenant, on n'est pas obligé de vouloir changer la totalité de la bordure. On ne peut vouloir changer que sa couleur, son épaisseur ou même son type.
C'est possible avec ces trois propriétés :
border-color: red;
border-style: solid;
border-width: xPx;

Par exemple :

Code:: #nameone{
border-color: green;
}
#nametwo{
border-style: dotted;
}
#namethree{
border-width: 8px;
}

Voyons voir le résultat.

Cellule nameone

Cellule nametwo

Cellule namethree

Si maintenant, nous avons un tableau, avec des cellules vides.
Par exemple :

Premier prénom	Second prénom
Benjamin
Cyndelle	Marine
Benoit	Jaques

Ici, on voit que Benjamin n'a qu'un prénom.
Si on veut cacher la cellule où il n'y a rien, on peut utiliser la propriété empty-cells :
Si on veut que les cases vides soient visibles (réglage par défaut), on mettra :

Code:: #name{
empty-cells: show;
}

Dans le cas où on veut qu'elles soient cachées, on aura :

Code:: #name{
empty-cells: hide;
}

Dans ces deux codes, #name est l'id d'un tableau (balise <table>)

Reprenons notre tableau en lui attribuant cette propriété de manière à ce que les cellules vides soient cachées :

Premier prénom	Second prénom
Benjamin
Cathy	Marine
Benoit	Jaques

Voyons maintenant, une dernière propriété.
Te rappelles-tu de nos titres de tableaux ? Et bien, il est possible de les mettre au dessus, comme en dessous, grâce à la propriété caption-side de CSS !
Cette propriété admet deux possibilités :
caption-side: top;
caption-side: bottom;

Dans le premier, le titre sera en haut, dans le second, il sera en bas Wink

.

Cette propriété s'attribue au tableau (balise <table>).

Prenons ce code :

Code:: <table border="1">
<caption>Titre du tableau</caption>
<tr><td>Cellule 1</td><td>Cellule 2</td></tr>
<tr><td>Cellule 3</td><td>Cellule 4</td></tr>
</table>

Par défaut, caption-side a pour valeur top, du coup, le titre est en haut.
Mais si maintenant, nous lui attribuons la valeur bottom, voyons voyons :

Titre du tableau
Cellule 1	Cellule 2
Cellule 3	Cellule 4

Le titre est bien en bas !

Fiouu, ça en fait des propriétés !
Tu as des questions ? Smile

Non, tout compris Smile

Ok ! Alors c'est bon, tu peux faire l'examen HTML/CSS niveau 1 Smile

. Tu as un code bonus que tu peux utiliser si tu le souhaites Wink

Bon, vu que tu as fini ta formation, tu as des questions ? Ou bien je peux archiver ?