Chapitre 3: 960 grid ?

Je pars du présipe que vous débuter en HTML et en CSS donc afin d'éviter que vous arracher les cheveux car une <div> refuse de se mettre à coté de ce petit camarade je vais m'appuyer sur un système de grille.

 

C'est quoi un systeme de grille ?

Il y a un très bon article sur Alsacréations.com à cette adresse: www.alsacreations.com/article/lire/1196-grilles-framework-css-webdesign.html je vous conseille vivement de prendre le temps de lire cet article. Sinon pour les plus près pressés disons qu'un système de grille va grandement nous faciliter la tâche pour nous qui somme débutant puis sa tombe bien puisque les grilles son aussi utilisé par les pros.

 

Pour télécharger le code rendez-vous sur 960.gs et cliquer sur Download en haut à gauche puis décompresser l'archive dans votre dossier CSS, puis ouvrer le dossier allez dans code > CSS , copier le fichier qui se nomme 960.css et coller le dans votre dossier CSS.

Comment focntionne se système de grille ?

Le système fonctionne sur un principe de 12 colonnes il doit toujours y avoir 12 colonnes sur une ligne si par exemple je veux que mon header face 8 colonnes je métrais:

 

Sauf qu'on a un petit problème car j'ai dit que sur une ligne il devait toujours y avoir 12 colonnes or ici il en manque 4 que faire? Il faut lui dire d'ajouter avant ou après 4 colonnes, pour cela on va utiliser prefix_ pour ajouter des colonnes avant et suffix_ pour ajouter des colonnes après ce qui nous donne:

Ainsi si on addition le tout on a bien 12, 8 + 2 + 2 = 12 et en plus mon header et centré si je veux le coller à gauche j'aurai mis suffixe_4 et inversement pour le coller à droite vous commencez à comprendre ?

 

Avant de passer au chapitre suivant il vous faut appeler notre feuille style souvenez-vous elle s'appelle 960.css donc dans le <head> de votre site ajoutait ceci:

Newsletter
Inscription Newsletter