World Help est un forum d'aide en tout genre et de publicité.
 
AccueilAccueil  PortailPortail  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  
La SOTW 4 est arrivée !
Viens y participer et vite Wink
Clique Ici
Le coup de coeur de la semaine a commencé
Venez nous montrer votre forum Smile
Clique Ici
Deux nouveaux groupes sont apparus : les rédacteurs et les professeurs

Partagez | 
 

 Cours de Kasumi

Aller en bas 
AuteurMessage
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Cours de Kasumi   Ven 3 Juin - 13:54

Hello~

Encore merci de m'avoir prise dans ta classe Surprised

Et pour répondre aux questions de rigueur :
- Règlement lu
- Notepad++ installé
- Forum de test créé.

Vàlà =D *paf*

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Ven 3 Juin - 19:18

Super !

alors question, connais-tu quelque chose au CSS et HTML ?

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Ven 3 Juin - 19:27

Pour répondre vite et bien, je dirais oui, les bases. Faire la différence entre les deux.
C'est vague mais bon ^^"

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Ven 3 Juin - 19:44

Ok. On va commencer à mettre tout ça au clair.

Le HTML permet de créer ta page, le css lui de lui donner un style, fond, couleur, bordure.... On peut aussi les mettre en HTML mais c'est beaucoup plus long et ça alourdit le code, donc plus facile de se tromper.

On va commencer par travaillé sur un petit HTML et un peu de CSS
Déjà tout est en anglais comme tu peux t'en douter. Donc fond = background.
Mais background comment tu peux en avoir différent on en utilise 2 le color et image.
Le code sera donc background-color: CODE DE LA COULEUR;

Le ";" est très important sans lui le code css ne marche pas.

Donc on va créer un truc très simple.
On va faire des descriptions de forum comme ici
Tout d'avord tu auras besoin d'un div qui te permettra de mettre un code css.
Code:
<div class="CODE CSS">CONTENU</div>

Tu l'as met dans pa > général > catégorie > tu cliques sur un forum et tu mets dans descriptions

Ensuite va dans > affichage > couleur > feuille de style
Et va créer un code CSS
Pour le créer tu dois toujours mettre un "." devant.
Donc par exemple
.css
{
background-image : url('URL DE L'IMAGE);
}

tu as compris ? Si oui fait ce que j'ai demandé

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Ven 3 Juin - 20:01

Je pense avoir suivi.

http://test-multi.forumgratuit.org/

J'ai fait un div avec une image de fond et le second avec une couleur de fond Surprised
(Je n'ai pas du tout travaillé l'accord des couleurs hein >.>)

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Ven 3 Juin - 20:17

Super. Non t'inquiète pas, en plus on voit bien la différence.

Donc mnt on rajoute une bordure

border-left: 2px solid #COULEUR;
border-right: 2px solid #COULER;

Et la couleur du text

color; #COULEUR;

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Ven 3 Juin - 20:31

Voilà qui est fait Surprised


****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Ven 3 Juin - 20:34

Hum... comme tu as remarqué, il y a pas de bordure au dessus rajoute
border: nb de px couleur;

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Ven 3 Juin - 20:55

D'accord Surprised

Je viens de tester.

Dans le premier j'ai mis :

Code:
.css1
{
background-image : url('http://hitskin.com/themes/17/28/16/i_background.png'); 
border: 1px solid #BCF794;
border-left: 2px solid #0B5732; 
border-right: 2px solid #0B5732; 
color: #E1AAF7;
}
Le border seul puis les left et right, et les deux s'appliquent.

Et dans le second :

Code:
.css2
{
background-color:#ffcc66; 
border-left: 2px solid #BCF794;
border-right: 2px solid #BCF794;
color: #DB94F7;
border: 1px solid #0B5732;
}
Left et right d'abord puis le border seul, et là seul le border s'affiche Surprised

(D'ailleurs j'ai du rajouter le "solid" avec la propriété "border")

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Sam 4 Juin - 9:14

IOui tu peux rajouter solid si tu veux, oui car dans les codes CSS il faut pas mélanger les caractéristiques comme ça, sinon ça marche pas. La plupart du temps on met tout ce qui touche à l'écriture puis le fond et on termine avec les bordures. Bah c'est très bien.

On continue
Tu vas rajouter ceci

padding: NBpx;
padding-left: NBpx;

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Sam 4 Juin - 10:43

Voilà qui est testé Surprised

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Sam 4 Juin - 18:07

Comme tu as vu ça agrandi tes cellules normalement.
Maintenant rajoute cela
margin-left: 30px;
margin-top: 10px;

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Sam 4 Juin - 18:19

Margin ajoutés o/

C'est pratique pour décaler et aligner.

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Mar 7 Juin - 10:55

Ok.
Tu sais faire un tableau meme tout simple

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Mar 7 Juin - 11:06

Hum ça oui, avec
Code:
<table> pour le tout
<tr> pour les lignes
<td> pour les cellules
<th> pour les cellules de titre :o

*viens d'en faire un rapidement*

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Mar 7 Juin - 11:09

Montre ton ptit tableau, et oui c'est ça

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Mar 7 Juin - 11:13

http://test-multi.forumgratuit.org/
sur le panneau d'accueil

Code:
<table>
  <tr>
      <th>Titre 1</th>
      <th>Titre 2</th>
      <th>Titre 3</th>
  </tr>

  <tr>
      <td>Ligne 1 Colonne 1</td>
      <td>Ligne 1 Colonne 2</td>
      <td>Ligne 1 Colonne 3</td>
  </tr>
  <tr>
      <td>Ligne 2 Colonne 1</td>
      <td>Ligne 2 Colonne 2</td>
      <td>Ligne 2 Colonne 3</td>
  </tr>
</table>

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Mar 7 Juin - 16:43

Super !
Maintenant as-tu une idée comme mettre du CSS là dedans ?

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Mar 7 Juin - 17:12

En utilisant une class ? Surprised

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Mar 7 Juin - 17:18

Yes. Très bien mais comment à la mettre et où ?

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Mar 7 Juin - 17:23

Hum... Je suppose qu'on peut faire :
Code:
<table class="x"> pour tout le tableau 
<tr class="y"> pour la ligne choisie
<th class="z"> ou <td class="z"> pour un cellule en particulier

et mettre le css correspondant dans la feuille de CSS

du style
Code:
.x
{
background-color : #000000 ;
 }
pour mettre un fond noir au tableau.

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Mar 7 Juin - 17:26

Pour le table non on en met pas. Pour les autres oui.
Donc je vais te demander d'essayer de faire un tableau comme ici

****************



merci Messia
Spoiler:
 

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasumi Daisuki
Correcteur
Correcteur
avatar

Féminin

Messages : 590
Helping : 1383
Date d'inscription : 27/04/2011

MessageSujet: Re: Cours de Kasumi   Mar 21 Juin - 16:05

J'ai tenté un petit quelque chose en me basant sur l'ancienne PA (j'avais screené)
http://test-multi.forumgratuit.org/
(désolée, j'ai emprunté les images T-T)

Et pour les codes :
HTML
Code:
<table class="accueil">
   <tr class="titre">
      <td class="first">Liens Utiles
      </td>
      <td>Bienvenue
      </td>
      <td class="third">Admins
      </td>
   </tr>
   <!--fin 1e ligne titre-->
   
   <tr class="contenu">
      <td class="first">
             <a href="http://urlA">Lien A</a>
         <br/><a href="http://urlB">Lien B</a>
         <br/><a href="http://urlC">Lien C</a>
      </td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.
      </td>
      <td class="third"><img src="http://img11.hostingpics.net/pics/79149234y9rsycopie.png" alt="Akino" />
      <img src="http://img11.hostingpics.net/pics/38950834y9rsy.png" alt="Miley" />
            </td>
   </tr>
   <!--fin 1e ligne contenu-->
   
   <tr class="titre">
      <td class="first">Crédit
      </td>
      <td>Nouveautés
      </td>
      <td class="third">Recrutement
      </td>
   </tr>
   <!--fin 2e ligne titre-->
   
   <tr class="contenu">
      <td class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
      </td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.
      </td>
      <td class="third">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <br/><br/>Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.
      </td>
   </tr>
   <!--fin 2e ligne contenu-->
   
   <tr class="titre">
      <td colspan="3">Partenaires
      </td>
   </tr>
   <!--fin 3e ligne titre-->
   
   <tr class="contenu">
      <td colspan="3">Blablabla blablabla blablabla blablabla
      </td>
   </tr>
   <!--fin 3e ligne contenu-->
   
</table>

CSS

Code:
.accueil
{
text-align: center;
}

.titre td
{
background-color:#BCF794;
border: 2px solid #0B5732;
}

.contenu td
{
border: 2px solid #0B5732;
}

.third
{width: 200px
}

.first
{width: 170px
}

****************


Bouquet de Roses:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Akino
Administratrice
Administratrice
avatar

Féminin

Messages : 1531
Helping : 1765
Localisation : Devant mon pc
Date d'inscription : 25/04/2011

MessageSujet: Re: Cours de Kasumi   Mer 22 Juin - 16:24

Super mais les cellules sont très grandes.

donc à la place de table tu mets table width="NBpx"
Je te conseil 800, 850

Et à chaque td tu mets soit width="NBpx" soit width="NB%"

****************



merci Messia
Spoiler:
 

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




MessageSujet: Re: Cours de Kasumi   

Revenir en haut Aller en bas
 
Cours de Kasumi
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
World Help ::  It’s School Time !  :: Cours de codage :: Classe d'Akino-
Sauter vers:  
Créer un forum | © phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit