✅ Disposition avec les classes CSS de 960 Grid System

Table des matières

Le Structure du système de grille CSS 960Ce n'est rien de plus qu'une standardisation des styles qui fournit les classes nécessaires pour implémenter des colonnes dans une page Web, de différentes tailles, avec lesquelles mettre en page notre contenu facilement et de manière ordonnée.
Le système de grille 960 porte ce nom car il s'agit d'un système de grille permettant de créer des pages de 960 pixels de large. Les colonnes que nous pouvons placer sur la grille auront des largeurs différentes, mais la largeur totale de la page sera toujours de 960 pixels.
Avec ces classes CSS prédéfinies, nous pouvons utiliser 12 ou 16 colonnes pour créer nos mises en page, chacune des colonnes a une marge gauche et droite de 10px, pour créer 20px de séparation entre les colonnes. Sachant cela, nous disons que si j'utilise 12 colonnes, chaque colonne sera de 60px chacune et si j'utilise 16 colonnes, la largeur de chacune sera de 40px.
Pour avoir une interface graphique, nous ajoutons une image de la distribution des colonnes.
C'est très facile à mettre en page de cette manière et en regardant l'image on se fait une idée de comment le faire. Pour les besoins de ce didacticiel, nous allons créer une mise en page pour structurer un site Web et organiser les informations.
Nous commençons notre exemple en créant un fichier 960test.html et en ajoutant le css suivant entre les balises
[couleur = # 000000]

[/Couleur]
Ces fichiers sont ceux qui ont les classes du framework de grille 960, si nous avons besoin de nouveaux css, nous les appliquerons dans un fichier séparé, nous ne modifierons jamais le framework pour qu'il reste standard.
Voici une mise en page simple pour mieux expliquer l'utilisation de 960 Grid

Voitures

Payer en
RSS

Page de Couverture
informations
Membres
Promotions
Nous contacter

Un titre

Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae déteste. Fusce ut urne eu libère le luctus malesuada. Nulla quam arcu, quis adipeux, hendrerit ac, malesuada ut, ante.

Ensuite pour terminer l'exemple, nous ajoutons un fichier mystyles.css

 @charset "iso-8859-2"; / * Document CSS * / div.spacer {hauteur : 1em; } #top {largeur : 100 % ; arrière-plan : # 29231e; position : relative ; haut : 0 ; à gauche : 0; } #top ul {marge : 10px 0 10px 0; couleur : #FFFFFF ; } #top ul li {affichage : en ligne ; } #bodyMain {background: url (… /images/nubes-background.jpg.webp) en haut au centre sans répétition; } #rss {background : url (… /images/rss-logo.gif.webp) non-répétition à droite; remplissage : 5px 30px 5px 0 ; } un # logo {background: url (… /images/vos-voz.gif.webp) no-repeat; largeur : 470px ; hauteur : 92px ; flotteur : gauche ; marge supérieure : 150 px; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; arrière-plan : url (… /images/header.jpg.webp) sans répétition; hauteur : 173px ; } #contentMain {arrière-plan : #FFFFFF; rembourrage-dessus : 10px ; border-bottom : 5px # A1DEF0 solide ; } #contentMain h1, #contentMain h3 {couleur : # 4991a5; } #menu {arrière-plan : # e7f7fb; } #menu ul {padding-top: 10px; marge inférieure : 10 px; } #menu ul li {affichage : en ligne ; police : 20px gras Arial, Helvetica, sans-serif ; } .article {marge-gauche : 15px ; } img.border-blue {border: 5px solid # e7f7fb; marge inférieure : 10 px; } #footer {font-size: 11px; }

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif