Article en plusieurs parties : 1 2 3 4
Dis papa, racontes-moi encore les tableaux !
Si vous avez l’habitude d’utiliser les CSS pour la conception de vos design web, vous n’aurez pas besoin d’approfondir le code d’origine et vous pourrez vous lancer bille en tête sur votre Dreamweaver Notepad préféré pour traduire en CSS cette mise en pages en tableau ;)
Mais comme ce qui va sans dire va mieux en le disant, je vous donne un bref aperçu de ce que l’on peut y trouver. La page contient huit tableaux, dont trois pour délimiter les zones principales :
- l’en-tête, qui contient :
- une bannière en image,
- et le menu principal.
- le contenu, qui englobe les deux colonnes; contient :
- une colonne étroite pour le menu secondaire et autres informations,
- et le contenu principal.
- et le pied de page.
La zone de contenu est elle-même délimitée par deux td : un pour la colonne de gauche et un pour le contenu à droite.
Le premier td est composé d’une première partie div#ex1 pour le menu, suivi de div.bloc contenant plusieurs balises table pour la météo, et d’un autre div.bloc pour l’affichage des images en bas de la colonne. Si je garde la météo sous forme de tableaux (pas la peine de jeter le bébé avec l’eau du bain), je supprimerai tous les styles en ligne pour les placer dans styles.css.
Le deuxième td est dédié au contenu principal où l’on trouve quatre blocs d’information :
- Un message de bienvenue,
- Les dernières nouvelles de la vie de la base nautique,
- Les informations nécessaires pour se rendre sur les lieux,
- Quelques liens utiles.
Maintenant que l’on y voit un peu plus clair dans ces tableaux, la structure de la mise en pages CSS s’impose d’elle-même :
- Une div#container englobera l’ensemble de la page,
- Une div#header pour la bannière et le menu,
- Deux div#main et div#sidebar pour définir les deux colonnes de contenu,
- Un div#footer pour terminer.
Comment j’ai organisé mes feuilles de style CSS »
Articles sur le même sujet
Article en plusieurs parties : Page précédentePage suivante
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
http://www.googlefight.com/index...
Je propose de rajouter ce lien dans ta linkographie… Utile n’est ce pas ?
Si tu ne l’a pas encore fait, je te conseille d’aller faire un tour dans les templates spip, que j’ai trouvé très intéréssants au niveau de la manière de coder (boucles, affichages des différents éléments d’un article…)
Les résultats sont éloquants : 666,000,000 résultats pour table. C’est bien ce que je pensais : le tables sont diaboliques ;)
Je pensais tester un cms, et j’hésite entre spip et plume
Chouette article, manque un peu d’exemples visuels à mon goût :)
Merci beaucoup.
Pour les articles, tu as raison, je me fais souvent la réflexion, mais je préfère paufiner le texte et les exemples. J’essaierai néanmoins de prendre ta remarque en compte pour le prochain article ;)
Très bon article, bien détaillé et clair.
C’est parfait ! Avec les exemples et tout et tout. Merci !
bonjour, je découvre votre site d’aide, merci!! j’essaie, petit à petit de comprendre et « avancer » jusqu’à me faire mon site , j’en suis encore très loin….mais c’est super de trouver de l’aide! Bonnes fêtes!!