Tout est en train de changer.
Ce week-end, j'ai lu un livre très intéressant: "Tout ce que vous savez sur CSS est faux". Le livre montre comment, maintenant que IE a réussi le test ACID 2, nous pouvons enfin commencer à construire nos sites Web de la bonne manière. Jusqu'à présent, nous étions obligés de mettre en œuvre des hacks pour obtenir la mise en page parfaite - positionnement absolu, flotteurs précaires, etc. Mais tout cela commence à changer! Je vais vous montrer comment dans vingt minutes.

Les tables CSS sont tellement plus faciles à utiliser qu'il vaut la peine de les adopter dès que possible..
-Kevin Yank

Ce tutoriel va vous montrer comment vous allez construire vos mises en page dans le futur. En fait, vous devriez utiliser ces méthodes maintenant! Plutôt que de compter sur les flottants et le positionnement absolu pour construire nos présentations, nous allons plutôt nous concentrer sur l'utilisation de tables css.

Étape 1: Création d'une mise en page à deux colonnes de la manière actuelle

Sachant qu'IE7 et les versions antérieures ne reconnaissent pas les propriétés de la table CSS, nous devons d'abord construire notre site incroyablement simple à la manière "ancienne". Collez le code suivant dans votre fichier "index.html".

  
 
 
 Mon en-tête
 
 
 
 
1
 
2
 
3
 
4
 
 
 -- faux texte-- 
 
 
 
Mon pied de page
 
 
 

Il n'y a pas grand chose que nous devons parcourir. Nous avons créé le contenu de notre mise en page à deux colonnes. La navigation (#nav) sera placée à gauche du contenu principal (#primaryContent). Allons-y et ajoutons un style rapide. Je vais utiliser des couleurs de fond (aussi moche!) Pour pouvoir facilement déterminer le début et la fin de chaque div.

Étape 2: Ajout du CSS

 / * Il suffit de réinitialiser quelques éléments * / h1, ul, li margin: 0; rembourrage: 0; style de liste: aucun;  p margin: 0; remplissage: .5em 0;  / * Style du contenu principal * / #wrap width: 800px; marge: auto;  #header, #footer background: red;  #nav background: grey; largeur: 150px; float: gauche;  #primaryContent background: yellow; marge gauche: 150px; rembourrage: 0.5em; 

Nous avons défini une largeur de 150px dans notre barre latérale (#nav) et l'avons flottée à gauche. Plutôt que de faire flotter la section primaryContent également, il serait préférable d’ajouter une marge gauche égale à la largeur de notre barre latérale. Nous ajouterons également un peu de remplissage pour éloigner le texte des bords de la div..

 #primaryContent background: yellow; marge gauche: 150px; rembourrage: 0.5em; 

Vous devriez vous retrouver avec quelque chose de semblable à ceci:

Immédiatement (après que les reflets de ces couleurs terribles aient disparu), vous verrez que le fond gris de la barre latérale ne s’étire pas vers le bas. En effet, les éléments flottants ne prennent que l’espace nécessaire..

Une solution serait de coder en dur une hauteur spécifique, mais c'est une mauvaise idée. Et si le contenu principal change? Vous devrez retourner dans votre fichier CSS pour ajuster à nouveau la valeur de hauteur. Alors ne fais pas ça! Au lieu de cela, la solution acceptée consiste à créer une image d’arrière-plan et à la lisser verticalement. Il s’agit de créer de fausses colonnes "Déplacez-vous simplement vers Photoshop, créez une trame de 800 x 10 pixels et insérez les couleurs appropriées. Vous savez que la barre latérale a un fond gris et une largeur de 150 pixels, utilisez Remplissez-le de gris. Après avoir fait la même chose pour le jaune terrible, vous obtiendrez ceci:

Enregistrez-le à la racine de votre solution et appelez-le "bg.png". Nous pouvons maintenant mettre cette image en mosaïque verticale, créant ainsi de fausses colonnes.

 #main background: url (… /bg.png) repeat-y; 

Maintenant, nous avons réussi à créer l'illusion de colonnes égales.

Étape 3: La nouvelle façon

Donc, ce n'était pas tout ensemble trop difficile! Mais il fallait encore trop de temps pour créer quelque chose d'aussi simple qu'une mise en page à deux colonnes. Nous avons même dû aller dans Photoshop pour compléter le look! Cette fois, recréons le site à l'aide de tables CSS. Ne vous inquiétez pas, très peu de choses à changer!

N'oubliez pas que IE7 et les versions antérieures ne reconnaissent pas les tables CSS. Donc, du moins pour le moment, nous devons encore utiliser la méthode que nous avons exécutée ci-dessus. Créez une nouvelle feuille de style et appelez-la "ie.css". Ensuite, copiez et collez tous les CSS que nous avons écrits dans ce fichier. Maintenant, ne le supprimez pas de "default.css". Nous allons simplement supprimer quelques styles. Nous n'implémenterons pas de hacks ni de flotteurs pour créer nos colonnes cette fois-ci.

Supprimer les styles suivants depuis votre feuille de style "default.css".

 / * Comme nous utiliserons une disposition "tableau", nous n'aurons pas besoin de mosaïque une image d'arrière-plan! * / #main background: url (… /bg.png) repeat-y;  / * Pas de flotteurs! * / #nav float: left;  / * Pas de flotteurs = pas de marge gauche. * / #primaryContent margin-left: 150px; 

Implémentation des tables CSS

Maintenant que vous avez supprimé les styles inutiles, ajoutons-en de nouveaux! Premièrement, nous devons créer deux colonnes dans notre div "principale": une pour la navigation et l’autre pour le contenu principal. Définissons le type d'affichage de #main comme une table.

 #main display: table; 

Ensuite, nous devrions déclarer les éléments #nav et #primaryContent comme des cellules de tableau..

 #nav, #primiaryContent display: table-cell; 

Croyez-le ou non, c'est tout ce dont nous avons besoin pour créer notre structure de colonnes. Nous avons déjà défini la largeur de la navigation à 150px. La div primaryContent remplira simplement l'espace restant. Voici un aperçu de notre mise en page à l'aide de tables CSS.

C'est exactement pareil! Mais nous n’avons utilisé ni float ni positionnement absolu! Cependant, comme je l’ai déjà dit, si nous consultons maintenant notre site dans IE, nous verrons.

Bien que IE8 affiche le site correctement, IE7 et les versions antérieures ne le seront pas. Pour compenser, nous devons inclure une feuille de style conditionnelle. (C'est pourquoi nous avons sauvegardé le CSS de notre mise en page d'origine et l'avons placé dans "ie.css").

Maintenant, tout va bien! Les navigateurs modernes vont rendre le site en utilisant des tables CSS, et IE utilisera la méthode traditionnelle float.

Le vrai pouvoir

Le vrai pouvoir entre en jeu lorsque nous apportons des modifications. Par exemple, imaginons qu’à un moment donné, nous décidions d’ajouter une troisième colonne à notre site. Nous pouvons accomplir cela en environ trente secondes.

Étape 1: Ajouter le balisage supplémentaire

Après la balise de fermeture sur le primaire primaryContent, ajoutez votre nouvelle colonne.

… 

 #secondaryContent width: 90px; display: table-cell; fond: orange;