Rappel du premier message :

Hey world.
Je ne trouvais pas de formulaire par ici, je ne savais pas si c'était possible de demander un(e) professeur de codage alors je poste :thug:
Je connais les bases du web et j'ai déjà pris des cours, je suis déjà assez formée, mais j'aimerais apprendre à être autonome et à faire des fiches, signatures à onglets, PA, etc.

Merci

Ah bah c'est nickel! T'as compris les bases du CSS :3

Du coup tu veux bosser quoi sur notre page de base? La barre de navigation? Je peux te montrer comment en faire une vraie barre de navigation ♥

Oui la barre! ♥
Egalement après, on pourra voir les effets survols? :/

Tu veux voir quoi sur les effets de survols?

Comment animer des boutons, créer la possibilité des clics, pour faire des signatures à onglets et des fiches animées :)
Aussi, des effets genre faire tourner des boutons si tu sais faire *w*
On peut commencer par la barre de navig **

On verra tout ça par la suite alors :3

Pour la barre de navigation, déjà il faut la mettre sur une seule ligne, qu'est-ce que tu en penses?
Je viens de regarder comment la personne t'avait appris à coder la barre de navigation et je suis désolée mais ça ne se code pas comme ça.. :/ En la mettant sous forme de liste, elle ne peut pas se mettre sur la même ligne.. On va donc la coder autrement.

Tu vas repérer cette partie:

Code:

<nav>
            <ul>
               <li> <a href="http://www.pixels-paradise.com/">Accueil</a> </li>
                  <li> <a href="http://www.pixels-paradise.com/">Règlement</a> </li>
                  <li> <a href="http://www.pixels-paradise.com/">FAQ</a> </li>
                  <li> <a href="http://www.pixels-paradise.com/">Rechercher</a> </li>
                  <li> <a href="http://www.pixels-paradise.com/"></a>Membres</li>
                  <li> <a href="http://www.pixels-paradise.com/">Groupes</a> </li> 
                  <li> <a href="http://www.pixels-paradise.com/">Profil</a> </li>
                  <li> <a href="http://www.pixels-paradise.com/">Messages</a> </li>
                  <li> <a href="http://www.pixels-paradise.com/">Connexion</a> </li>
             </ul>
         </nav>

Et tu vas remplacer ce code par celui-là:

Code:

<nav>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Règlement</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">FAQ</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Rechercher</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Groupes</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Profil</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Messages</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Connexion</a>
            </div>
         </nav>

En mettant des div, tu facilites la modification de ta barre de navigation. Ce qui te donne donc ceci (mais en plus petit x)).

C'est maintenant là que ça se joue. Une fois que tu as une vraie barre de navigation, tu vas pouvoir tout mettre sur la même ligne. Pour cela, direction CSS!

Si tu as compris le principe, comment tu vas faire pour indiquer au CSS que tu veux modifier la barre de navigation?

{ div class: text-align?
xD
Du coup il faut indiquer la propriété de notre barre et mettre le CSS correspondant nan? :3

Tu as fais le changement déjà? :3

On est pas trop trop loin mais je ne parle pas de ça!
Par exemple pour modifier l'aspect de la page on a mis

Code:

#page {

}

Ici, que penses-tu qu'il faudrait mettre à la place de "page"?

Oui :)
Ah d'accord bah #menu ? x)

Cool :)

Non, #menu te permettra de toucher à chaque lien individuellement, nous on veut modifier l'ensemble de la barre de navigation

#divclass? :/

Mddddr, t'es vraiment trop chou x)

Non, pour modifier l'intégrale de la barre de navigation, on va utiliser la balise qui encadre le tout, donc nav, on l'écrira donc:

Code:

nav {

}

On va alors lui appliquer flex en display pour que tout soit sur la même ligne, ce qui te donne:

Code:

nav {
   display: flex;
}

J'essaye mdr! XDD
Ah bah ouais '-' D8

Code:

#page {
  background-color: grey;
  margin-left: auto;
  margin-right: auto;
  width: 700px;
}
nav {
  display: flex;
}

J'ai ça, mais elle ne s'est pas mise droite D8

On a le même CSS, c'est que tu n'as pas du faire le remplacement comme il fallait ://

Voilà le HTML complet:

Code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylecss.css">
        <meta charset="utf-8">
         <title>Titre du site </title>     
    </head>
    <body>
      <div id="page">
      <header>
         <img src="http://image.noelshack.com/fichiers/2015/44/1445936909-spring.png" </img>
         <h1>Je suis un titre en H1</h1>
         <nav>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Règlement</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">FAQ</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Rechercher</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Groupes</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Profil</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Messages</a>
            </div>
            <div class="menu">
               <a href="http://www.pixels-paradise.com/">Connexion</a>
            </div>
         </nav>
      </header>
      <main>
         <h2>Coucou</h2>
         <article>
            <h2>Princess</h2>
               <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            <h3>Un zoli titre </h3>
               <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            <h3>Oùne autre zoli titre</h3>
               <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
         </article>
           <aside>
                <h2>Step aside</h2>
                   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            <h3>Rigole please </h3>
               <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            <h3>Gl,hf</h3>
               <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            <h3>Goodbye</h3>
               <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            
            </aside>
       </main>
       <footer>
          <p>Thanks blabla truc blabla for blabla-site okok</p>
          <ul>
             <li>  <a href="https://www.facebook.com/">Facebook</a></li>
             <li> <a href="https://twitter.com/" >Twitter </a></li>
          </ul>
       </footer>
          </div>
    </body>
</html>

J'ai essayé en copiant ton code et en modifiant le nom du CSS comme j'ai pas le même nom, ça change rien x( x)

En modifiant le nom du CSS..? Si tu modifie le nom du CSS il ne se rattache plus au HTML Matae, tu ne dois changer aucun nom.. Prends exactement mon CSS et mon HTML:

Code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylecss.css">
        <meta charset="utf-8">
        <title>Titre du site </title>   
    </head>
    <body>
      <div id="page">
      <header>
        <img src="http://image.noelshack.com/fichiers/2015/44/1445936909-spring.png" </img>
        <h1>Je suis un titre en H1</h1>
        <nav>
            <div class="menu">
              <a href="http://www.pixels-paradise.com/">Règlement</a>
            </div>
            <div class="menu">
              <a href="http://www.pixels-paradise.com/">FAQ</a>
            </div>
            <div class="menu">
              <a href="http://www.pixels-paradise.com/">Rechercher</a>
            </div>
            <div class="menu">
              <a href="http://www.pixels-paradise.com/">Groupes</a>
            </div>
            <div class="menu">
              <a href="http://www.pixels-paradise.com/">Profil</a>
            </div>
            <div class="menu">
              <a href="http://www.pixels-paradise.com/">Messages</a>
            </div>
            <div class="menu">
              <a href="http://www.pixels-paradise.com/">Connexion</a>
            </div>
        </nav>
      </header>
      <main>
        <h2>Coucou</h2>
        <article>
            <h2>Princess</h2>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            <h3>Un zoli titre </h3>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            <h3>Oùne autre zoli titre</h3>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
        </article>
          <aside>
                <h2>Step aside</h2>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            <h3>Rigole please </h3>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            <h3>Gl,hf</h3>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
            <h3>Goodbye</h3>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus purus odio. Fusce fringilla semper arcu a convallis. In eu feugiat nisl. Praesent nec commodo ex. Phasellus et odio consequat, eleifend quam vel, ultrices neque. Sed non velit quis magna suscipit tempor. Morbi laoreet augue finibus lectus mattis congue. Duis imperdiet, tortor consequat semper laoreet, augue elit sagittis enim, sit amet ultricies leo massa quis nunc. Pellentesque vulputate eu mauris id gravida. Etiam est urna, scelerisque ac nunc ut, sagittis convallis odio. Morbi id dolor sed lacus viverra lacinia nec non metus. Integer tristique elit nec blandit tempor. </p>
           
            </aside>
      </main>
      <footer>
          <p>Thanks blabla truc blabla for blabla-site okok</p>
          <ul>
            <li>  <a href="https://www.facebook.com/">Facebook</a></li>
            <li> <a href="https://twitter.com/" >Twitter </a></li>
          </ul>
      </footer>
          </div>
    </body>
</html>

Code:

#page {
   background-color: grey;
   margin-left: auto;
   margin-right: auto;
   width: 700px;
}

nav {
   display: flex;
}

Ca ne change rien, j'avais juste mis le nom de mon fichier CSS dans l'html comme on a fait au début ^^
https://2img.net/image.noelshack.com/fichiers/2015/53/1451566807-xdfgbh.png

Pourtant c'est bizarre même le fond a disparu, il est sensé être centré et gris O.o

Bah c'est exactement ton code xD
EDIT: C'est bon, j'avais juste pas le même nom de CSS c'était pour ça, il manquait le css ^^
https://2img.net/image.noelshack.com/fichiers/2015/53/1451567766-sfdgf.png

Mon html est nommé Page.html et mon CSS c'est stylecss.css, ils sont tous les deux dans le même dossier, tu as pareil?

J'ai édit, c'est bon enfaite :D

Parfait! Du coup tu as bien la barre de navigation sur la même ligne?

Oui oui :) je t'avais mis le screen https://2img.net/image.noelshack.com/fichiers/2015/53/1451567766-sfdgf.png

Pardon j'avais pas vu

Du couuuuuuup! Maintenant qu'on a ça, ça va devenir plus marrant! On va essayer d'en faire une vraie barre de navigation :3

Déjà on veut enlever le soulignement déculasse en dessous de chaque lien:

Code:

a {
   text-decoration: none
}

a identifie tous les liens tandis que le text-decoration s'occupe du soulignement qu'on enlève grace au none

Ensuite, on va jouer sur deux choses, les liens individuels, donc nav a et la barre toute entière, donc simplement nav

On va commencer par placer la barre de navigation tout en haut de la page et lui demander d'être fixe, comme ici par exemple, quand on descend, la barre de navigation reste en haut:

Code:

nav {
   display: flex;
   position: fixed;
   top:0px;
}

Maintenant il faut s'occuper des liens dans la barre, comme tu l'as donc compris on va bosser dans un nav a:

Code:

nav a {

}

Je vais te donner le code que j'ai appliqué et t'expliquer chaque ligne:

Code:

nav a {
   background-color: white;
   font-size: 20px;
   border: 2px solid black;
   display: block;
   padding: 10px;
   text-align: center;
   width: auto;
}

- Le background-color, comme son nom l'indique, donne la couleur de fond
- Le font-size, c'est la taille de ta police
- border désigne la bordure, en premier tu indique l'épaisseur, puis le type d'encadrement (pointillé, ligne, double,...) ainsi que la couleur
- Le display block fera que chaque lien se comportera comme un bloc et pas juste un lien
- Le padding, c'est l'espace entre ton texte et ton cadre
- Le text-align c'est pour center, justifier, mettre un élément à gauche ou à droite
- Et pour finir, width définie la largeur de chaque case, ici j'ai mis automatique mais on va changer par la suite

Du coup tu dois avoir ceci: https://2img.net/r/hpimg15/pics/811207Capturedcran20151231151538.png
Dis-moi que t'as bien ça XD

Matae, tu t'en sors?

Oups j'avais pas vu D8
Je fais ça ♥