Cré'Actif Space ♥
Hello hello !

Soit le ou la bienvenue sur Cré'Actif Space, ton forum de graphisme et de codage !

N'hésite pas à rejoindre la communauté si tu es comme nous un fan de cookies !



AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 Classe de Matae

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : Précédent  1, 2, 3, 4, 5  Suivant
AuteurMessage
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Classe de Matae   Sam 21 Nov - 21:41

Rappel du premier message :

Hey world. ** Coeurcoeurcoeur
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: coucou
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 ayaii

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

AuteurMessage
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 10:10

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 ♥

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 10:34

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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 10:56

Tu veux voir quoi sur les effets de survols?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 11:22

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 **

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 11:34

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?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 11:42

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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 11:43

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"?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 11:55

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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 12:49

Cool :)

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

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 13:20

#divclass? :/

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 13:27

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;
}

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 13:36

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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 13:38

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>

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 13:45

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)

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 13:47

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;
}

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 14:00

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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 14:08

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

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 14:12

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 ^^
http://image.noelshack.com/fichiers/2015/53/1451567766-sfdgf.png

---------------------------------------------------------


bouhh:
 


Dernière édition par Matae le Jeu 31 Déc - 14:15, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 14:14

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?

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 14:16

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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 14:28

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

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 14:51

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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Jeu 31 Déc - 15:17

Pardon j'avais pas vu Se cache

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: http://img15.hostingpics.net/pics/811207Capturedcran20151231151538.png
Dis-moi que t'as bien ça XD

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Alicia.

avatar

Féminin
CAS's Points : 8506
Messages : 6934
Date d'arrivée : 25/10/2011
Âge : 20
Localisation : Lorraine
Humeur : Le sourire aux lèvres !

MessageSujet: Re: Classe de Matae   Dim 3 Jan - 20:00

Matae, tu t'en sors? Calin

---------------------------------------------------------

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://creactifspace.forumgratuit.org
Matae

avatar

CAS's Points : 236
Messages : 164
Date d'arrivée : 15/11/2015

MessageSujet: Re: Classe de Matae   Lun 4 Jan - 18:30

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

---------------------------------------------------------


bouhh:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: Classe de Matae   

Revenir en haut Aller en bas
 

Classe de Matae

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 3 sur 5Aller à la page : Précédent  1, 2, 3, 4, 5  Suivant

 Sujets similaires

+

 Sujets similaires

-
» [LIEN] microsd 8 GO classe 6 à prix gratos
» video helico classe 450! sans casse!!!!!
» Le vade-mecum de 1ère classe
» Les cabines de 2ème classe
» Croiseur classe D'Assas .Scratch 1/700éme

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Cré'Actif Space ♥ :: Archives du forum :: Archives-