##Codepen

Pour la suite des exemples, nous allons utiliser un petit outils bien sympathique : Codepen
Ce site propose une interface très pratique pour de “petits” tests ou expérience. Il vous faudra juste créer un compte de façon à pouvoir ensuite partager les urls de vos tests, exemple ici.

Codepen

Rien de plus simple à l’utilisation, on entre notre HTML dans la partie HTML (sans le head, body et déclaration html), et le css directement en la partie CSS, pour le moment, nous ne toucherons pas à la partie JS, vous pouvez donc la fermer !

##Float

Notions de CSS un peu difficile à apréhender au départ, nous allons y aller petit à petit.
Déjà, à quoi ça sert ? Un float permet de placer un élément autrement que son comportement d’origine lui permet. Exemple, vous souhaitez mettre une image à droite de votre texte, un peu à la manière d’un article de journal, vous devrez utiliser un float ! Mettons ça en pratique :

Ouvrez un nouveau “pen” et copiez le code suivant dans la partie HTML :

<p>
    <img src="http://placehold.it/200x300" alt="image de test">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus tempore voluptatibus eveniet quidem, repellendus consequuntur iure non id distinctio, obcaecati quo iste culpa voluptatum a! Itaque alias, culpa in!</span>
    <span>Aut at sapiente similique blanditiis, doloribus inventore, laudantium perferendis reiciendis enim officiis ipsum iusto rem optio quos dolor fuga nulla aliquam qui quis accusamus earum, autem pariatur minus! Repellat, aspernatur.</span>
    <span>Maxime mollitia ipsum minima ea nostrum error velit obcaecati sit, suscipit laudantium perferendis atque ratione sequi voluptas sapiente reiciendis temporibus veritatis esse. Laudantium corporis harum tempore dolorum, rerum, iste neque.</span>
    <span>Cumque, quidem, quis. Est corporis iure unde laboriosam eaque, ratione voluptatum, quasi explicabo inventore molestias beatae quas autem dolorem quis blanditiis consectetur nobis dolorum reprehenderit maiores neque cum pariatur consequatur.</span>
    <span>Sunt ut iusto obcaecati, eum eos quidem enim illo asperiores quae, assumenda mollitia. Animi enim quos quaerat, odio modi consectetur aspernatur harum eligendi quis perferendis mollitia, aliquid id aut autem.</span>
</p>

Regardez le rendu, puis mettez simplement dans la partie CSS :

body{
    /* on donne une largeur au body et on le centre afin que l'exemple soit plus visuel */
    width: 500px;
    margin: auto;
}
img{
    float:right;
}

Vous voyez donc que votre image est passé à droite et que le texte l’entoure. Ceci est le comportement le plus basique d’un float. Vous pouvez par exemple lui donner un peu d’espace en lui appliquant un margin.

Deuxième exemple, je souhaite créer deux colonnes de texte, toujours comme dans un journal. Ces dernière feront 45% de la largeur de ma page et seront séparée par une marge de 10%.

Le HTML :

<p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure tenetur, voluptas suscipit amet, doloribus error fuga et quisquam velit incidunt voluptatem molestias quam nostrum magnam assumenda labore dolorem, rerum eligendi!</span>
    <span>Natus cumque ullam corrupti molestias. Impedit distinctio quasi ipsum minus id nemo qui quis porro corrupti assumenda inventore consequuntur molestiae sequi ipsa dolore quod, aliquid quidem iusto nesciunt facilis. Ut.</span>
    <span>Eligendi cupiditate culpa incidunt, eos! Labore atque aut ea obcaecati voluptate asperiores consequuntur quibusdam nihil suscipit, delectus amet at, praesentium ratione modi quasi, quisquam odit repellat cum deleniti fuga quidem.</span>
</p>
<p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum praesentium excepturi asperiores illum nihil sit officia magni ducimus laudantium. Rerum ut rem doloribus assumenda eum iure cum. Voluptatibus, sit, quo.</span>
    <span>Explicabo ut, ab facere! Beatae sapiente quae velit, illum veritatis tempore deleniti. Dignissimos ipsam dolorum, dolore cum quae. Aspernatur assumenda voluptatibus ut nam aliquid doloremque nesciunt consectetur rerum. Voluptatibus, perferendis.</span>
    <span>Cupiditate, similique esse! Perspiciatis officiis ipsum nemo dolore ut nesciunt iusto, alias tempora optio error nobis quisquam modi accusantium nihil cupiditate? Mollitia quidem repellendus ducimus rem corporis? Sit, vitae, incidunt.</span>
</p>

Le CSS :

body{
    width: 500px;
    margin: auto;
}
p{
    width: 45%;
    float: left;
}
p:first-child{
    margin-right: 10%;
}

J’ai utilisé ici la “pseudo-class” :first-child afin de ne sélectionner que le premier de nos paragraphes.

On peut donc aussi le faire simplement avec des blocs de type <div> afin de séparer nos contenu en colonnes.
Je vous conseille très fortement de vous entrainer sur cette notion car c’est l’une des plus importante à comprendre pour la mise en forme de page. Il y en a quasiment sur tout les types de design.

Petit exemple sur les float

Voici une excellente vidéo sur le placement de bloc par Grakikart :

##Padding & box sizing

Normalement, vous dervier déjà être familier avec la notion de margin et de padding, pour rappel, un padding est une marge intérieure, alors qu’un margin est une marge extérieure à un bloc :

Modèle de boite

Un des petits soucis que pose le padding de base, c’est pour la gestion de dimensions
Voici la problématique : je souhaite qu’un élément ait une largeur de 600px mais une marge intérieure de 20px de chaque coté.

Code HTML

<div>ma div</div>

Code CSS

div{
    width: 600px;
    height: 350px;
    background: gold;
    text-align:center;
    padding: 20px;
}

Maintenant, inspectez votre div, cliquez sur “modèle de boite”. Que voit-on ?
Notre <div> fait bien 600px de large, et a une marge intérieure de 20px de chaque côté. Ce qui porte sa largeur à un total de 640px en réalité ! (600 de large + 20 padding-left + 20 padding-right).

###Comment faire pour avoir toujours la largeur voulue ?

2 solutions, la première, faites des calculs !!! Plutôt que mettre 600px de large, on prévoit directement les marges, ici 20px*2, soit 40px que l’on soustrait à la largeur. Donc on appliquera une largeur de 560px à notre div.
Cette solution marche plutôt bien mais a un inconvénient : si les marges de notre site sont harmonisées, par exemple qu’elles sont toutes de 10px mais que mes blocs sont de largeurs variable, il faudra alors faire un calcul pour chaque largeur de bloc. Et pire, si un jour cette largeur venait à changer, il faudrait refaire tous nos calculs !!! Un peu galère donc…

Deuxième solition : utilisation de la propriété box-sizing

Résumé (source MDN) : La propriété CSS box-sizing est utilisé pour modifier le modèle de boîte CSS par défaut qui est utilisé pour calculer la largeur et la hauteur des éléments. Il est possible d’utiliser cette propriété pour émuler le comportement des navigateurs qui n’appliquent pas correctement la spécification du modèle de boîte CSS.

Voici le code CSS que je vous recommande de mettre au début de TOUS vos fichiers CSS :

* { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

Avec ce code, la méthode de calcul des navigateurs va être forcée de manière à inclure les marges intérieures et également les bordures. Ainsi, peut importe quelle valeur de padding, votre largeur définie sera toujours respectée, faites l’essai en ajoutant ce code dans votre Pen.

##Table

Avant l’arrivée du CSS 2.1, la notion de table était obligatoire pour tout intégrateur, car c’est de cette façon que les sites étaient mis en forme…autant dire que la sémantique était plus qu’aux ouliettes !!! Aujourd’hui, une balise <table> ne doit être utilisée que pour mettre en place…un tableau !
Un tableau a une structure très simple, mais que vous devez scrupuleusement respecter :

Un tableau contient des lignes, les lignes contiennent des colonnes, chaque ligne d’un tableau doit avoir exactement le même nombre de colonnes que les autres. C’est clair ?

En pratique ça donne ça :

<table>
    <tr>
        <td>ligne 1 - colonne n°1</td>
        <td>ligne 1 - colonne n°2</td>
        <td>ligne 1 - colonne n°3</td>
        <td>ligne 1 - colonne n°4</td>
        <td>ligne 1 - colonne n°5</td>
    </tr>
    <tr>
        <td>ligne 2 - colonne n°1</td>
        <td>ligne 2 - colonne n°2</td>
        <td>ligne 2 - colonne n°3</td>
        <td>ligne 2 - colonne n°4</td>
        <td>ligne 2 - colonne n°5</td>
    </tr>
    <tr>
        <td>ligne 3 - colonne n°1</td>
        <td>ligne 3 - colonne n°2</td>
        <td>ligne 3 - colonne n°3</td>
        <td>ligne 3 - colonne n°4</td>
        <td>ligne 3 - colonne n°5</td>
    </tr>
</table>

Essayer dans un pen avec un peu de CSS :

table{
  border:1px solid #000;
}

td{
  border:1px solid #000;
}

###Petit exercice pratique

Essayez de reproduire le tableau suivant avec une structure HTML et un CSS :

Planning

PS : l’utilisation de classe dans le HTML n’étant pas nécessaire dans cet exemple, essayez de faire sans.

Correction : je vous invite à vous renseigner sur toutes les notions CSS utilisée dans cet exemple, surtout celles que vous ne connaissez pas !

##Devoirs : établissement d’un projet

Pour la semaine prochaine, pas d’exercice pratique à proprement parler. Vous devrez juste réfléchir à une idée de mini-site (j’insiste sur le mini, il ne s’agit pas de faire quelque chose de très contraignant (pour le moment XD)). Ce site devra pouvoir utiliser toutes les notions que l’on a vu jusqu’à présent, aussi bien en HTML qu’en CSS :

  • Structure HTML valide avec autant de balise variée que possible
  • Utilisation de tableaux
  • Insertion d’images et de liens (attention aux ALT et au TITLE !!!)
  • Utilisation du moins de classe possible sur le HTML, si vous pouvez cibler un élément directement par sa nature, faites le !
  • Notions de float, margin, padding, font, background doivent y être.

Quelques idées : mini site de test de jeux, de films, blog, site de présentation d’une boutique (même imaginaire), portfolio, un CV en ligne…

Le but étant de se servir de se projet pour mettre réellement en pratique et valider ainsi une première étape de votre apprentissage.
Bon courage !