Comment formater des colonnes en CSS?
Découvrez comment formater les colonnes en CSS afin de pouvoir ajuster leur emplacement, leur taille et leur apparence comme vous le souhaitez.
Les feuilles de style en cascade (CSS) sont le langage de codage standard pour décrire comment les pages Web doivent apparaître dans les navigateurs Web. Les sites Web contiennent fréquemment plusieurs colonnes. Découvrez comment formater les colonnes en CSS afin de pouvoir ajuster leur emplacement, leur taille et leur apparence comme vous le souhaitez.
- 1Structurez correctement votre HTML pour des performances CSS optimales. Vous voulez 2" id" entourant chaque colonne, pour éviter les problèmes de mise en page.
- Nommez le premier identifiant avec le but de la colonne, comme "sidebar". Vous allez mettre tous les CSS pour le contenu de la colonne ici.
- Nommez le deuxième identifiant avec le but de la colonne plus "wrapper", comme "sidebar-wrapper". Vous allez mettre tous les CSS pour la disposition des colonnes ici. Cet identifiant entourera l'autre identifiant. (Donc, dans votre code HTML, vous aurez quelque chose comme div id='sidebar-wrapper' à l'intérieur de < > immédiatement suivi de div id='sidebar' (à nouveau dans < >) suivi de CONTENT et /div à l'intérieur de < > (répété deux fois).
- 2Recherchez le nom de l'identifiant de la colonne dans votre CSS (comme "#sidebar").
- 3Décidez si vous voulez que la colonne apparaisse à droite ou à gauche.
- 4Ajouter «flotteur: droit;» ou «flotter: à gauche;» au CSS pour le nom d'identification (comme "#sidebar { float: right; }").
- Si vous voulez plus de 2 colonnes, vous devrez commencer avec une structure à 2 colonnes, puis diviser davantage ces colonnes. Par exemple, si vous voulez 3 colonnes, vous commencerez par une colonne principale et une colonne latérale, puis placerez 2 colonnes dans la colonne principale, une à droite flottante et une à gauche flottante.
Méthode 1 sur 2: modifier la disposition des colonnes avec CSS
- 1Recherchez le nom de l'identifiant du wrapper de colonne dans votre CSS (comme "#sidebar-wrapper").
- 2Déterminez la largeur que vous voulez que la colonne soit. Vous pouvez le définir en pourcentages ou en pixels.
- 3Ajoutez cette "largeur" à l'identifiant du wrapper de colonne comme "sidebar-wrapper { width: 30%; }").
- 4Déterminez la "hauteur" de colonne souhaitée et ajoutez-la à l'ID de wrapper de colonne (comme "sidebar-wrapper { height: 100%; }.
Recherchez le nom de l'identifiant de la colonne dans votre CSS (comme "#sidebar").
Méthode 2 sur 2: changer l'apparence de la colonne avec css
- 1Déterminez la taille du remplissage, des marges et des bordures que vous souhaitez de chaque côté de la colonne.
- Le remplissage est un espace entre le bord de l'arrière-plan de votre colonne et le texte.
- La marge est l'espace après le bord de l'arrière-plan avant le début de la colonne suivante.
- 2Ajoutez le rembourrage et les marges à l'identifiant du nom de la colonne comme "#sidebar { padding: 0 5px; margin: 0 5px; border: 2px pointted #fff; }", ce qui donne à la colonne 5 pixels de marge et de rembourrage de chaque côté, mais aucun en haut et en bas).
- 3Ajoutez les couleurs souhaitées à l'identifiant du nom de la colonne. Par exemple, pour un fond noir sur du texte blanc, vous utiliseriez "#sidebar { background-color #000; color #fff; }".
- 4Choisissez les balises HTML auxquelles vous souhaitez donner des apparences spéciales et écrivez leur CSS qui fait référence aux balises qui se trouvent spécifiquement dans l'identifiant du nom de la colonne. Par exemple, pour rendre tout le texte balisé "h3" en rouge dans votre barre latérale, vous écririez "#sidebar h3 { color #f00; }".
- 5Choisissez les modifications de police que vous souhaitez dans cette colonne particulière et placez ce code dans l'identifiant du nom de la colonne (comme #sidebar { font-size: 0,8em; }.
- 6Amusez-vous à savoir comment formater les colonnes en CSS.
- Si l'apparence de votre site Web change dans différents navigateurs, ajoutez une feuille de style principale en haut de votre CSS. De telles feuilles de style annulent les paramètres par défaut des navigateurs, elles n'influenceront donc pas l'apparence de votre site.
- Ignorez le nouveau module de mise en page multi-colonnes de CSS3. La fonction est actuellement limitée et n'est absolument pas prise en charge par le navigateur le plus populaire, Internet Explorer.
- Définissez toujours la bordure, les marges et le remplissage sur «0» dans chaque balise HTML de votre site Web qui n'a pas de paramètres propres. Cela empêchera les applications en double des mêmes paramètres.
Lisez aussi: Comment créer un compte Hotmail?
Questions et réponses
- Comment puis-je me préparer à l'examen CSS?Vous pouvez étudier toutes vos notes et pratiquer des problèmes supplémentaires similaires à ce que vous avez fait en classe. Vous pouvez également demander à votre professeur des guides d'étude et vous assurer d'étudier tous les sujets qui y sont énumérés.
