Bonsoir, 'jour !
Je fais une petite demande, merci d'y prêter attention.

Expérience en codage : heu... 2 mois (je suppose)
Logiciel utilisé pour coder : Notepad ++
Évaluation: [x] CSS [x] HTML
Folio codage :


Spoiler:


Auto-évaluation du niveau: 11/20

Bonjour,

Je m'occupe de ton test ce soir ou demain.

Merci de ta patience.

Bonjour Orange,

Prends tout ton temps, je ne suis pas très active donc je peux encore patienter. Merci d'avoir répondu.

et Bon courage *o*.

Pour les preuves que tu as donnés, 11/20 me paraît faible. En tout cas, on sera vite fixer car voici ton test. Il s'agira de reproduire ceci:



Chaque carré fait 100*100px, deux sont divisés en plein centre (donc 50px chaque côté) le fond du tableau (et oui c'est un tableau) est transparent excepté pour un carré dont le fond est de couleur: #797979.

C'est un test HTML & CSS, tu devras donc utiliser les deux langages de programmation (n'en utiliser qu'un causera la perte de la moitié des points accordés pour l'exercice).

Lorsqu'on passe la souris sur un carré, il doit devenir rouge. Un point boni est attribué si le carré devient bleu lors d'un clic de souris.

Je reste disponible pour les questions, je crois que cet exercice constitue un défi que tu sauras relever.

Bonjour Orange,

Donc, je n'ai qu'une question afin d'être sûre et certaine : c'est un tableau et non des divisions *s'est déjà fait avoir*, hein ?

Je pars pour Marseille demain soir, je vais tenter de commencer ce test dès aujourd'hui, seulement, je ne sais pas quand je le rendrai.

Merci, encore une fois, d'avoir donné le test. Je m'y attèle aussitôt !

C'est un tableau en effet.

Je m'excuse pour le retard pris (vacances vacances T.T) j'ai terminé de résoudre ce drôle de problème qui m'a presque rendue chauve.

Voici le code HTML

Code:

<table cellspacing="0px" cellpadding="0px"><tbody>


<tr>
<td class="cellule1"></td>
<td class="cellule2" colspan="2"></td>
<td class="cellule2"></td>
<td class="cellule2"></td>
</tr>

<tr>
<td class="cellule1"></td>
<td class="cellule4"></td>
<td class="cellule4"></td>
<td class="grey"></td>
<td class="cellule2"></td>
</tr>

<tr>
<td class="cellule1" rowspan="2"></td>
<td class="cellule2" rowspan="2" colspan="2"></td>
<td class="cellule5"></td>
<td class="cellule2" rowspan="2"></td>
</tr>

<tr>
<td class="cellule5"></td>
</tr>

<tr>
<td ></td>
<td class="cellule3" colspan="2"></td>
<td class="cellule3" ></td>
<td class="cellule3" ></td>
</tr>

</tbody></table>

Le code CSS

Code:

td:hover
{
background-color: #ff0000;
}

td:active
{
background-color: #0000ff;
}

.cellule1
{
width: 100px;
Height: 100px;
border-bottom: 1px solid #000000;
}

.cellule2, .grey
{
width: 100px;
Height: 100px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}

.cellule3
{
width: 100px;
Height: 100px;
border-left: 1px solid #000000;
}

.cellule4
{
width: 50px;
Height: 100px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}

.cellule5
{
width: 100px;
Height: 50px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}

.grey
{
background-color: #797979;
}

Si les noms de cellule un peu formel vous gênent dites le, je peux renommer.
Merci de me corriger !

Bonjour,

Cela fait 2 semaines, je me permets de prévenir une nouvelle fois que j'ai terminé le test. Merci d'y prêter attention.

Bonjour,

Orange est parti en vacances.
Il regarde ta demande dès qu'il reviendrai
Merci de ta patiente.

Bonsoir,

Merci de me tenir informé, j'attendrai le temps qu'il faudra.