Cours de Kasumi

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

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*

Super !

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

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

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

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é

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

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 >.>)

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;

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

Voilà qui est fait Surprised

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

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

D'accord

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

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;

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

Voilà qui est testé Surprised

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

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

Margin ajoutés o/

C'est pratique pour décaler et aligner.

Ok.
Tu sais faire un tableau meme tout simple

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

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*

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

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

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>

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

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

En utilisant une class ? Surprised

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

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

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.

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

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

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>


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


<tr class="titre">
   <td class="first">Crédit
   </td>
   <td>Nouveautés
   </td>
   <td class="third">Recrutement
   </td>
</tr>


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


<tr class="titre">
   <td colspan="3">Partenaires
   </td>
</tr>


<tr class="contenu">
   <td colspan="3">Blablabla blablabla blablabla blablabla
   </td>
</tr>


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

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

» Cours de Pekila !
» Cours de moi
» •• Cours de So.
» Cours d'Elizaveta
» cours d'Asahi