Sept conseils mise en page CSS

Par: Sandesh
La chose la plus difficile en CSS pour obtenir le droit du tracé de votre site. Voici quelques conseils traitant seulement avec cela. Certains de ces conseils ne sont pas tout à fait nouvelle, ou la science de fusée, mais nous espérons qu'ils seront sauver quelqu'un un peu de peine quelque part!

Astuce 1: Effacer le remplissage par défaut et les paramètres de marge avant de commencer à travailler.

Différents navigateurs ont marge par défaut et de tailles différentes afin de remplissage que vous souhaitez démarrer avec une table rase, pour ainsi dire. Utilisez cette commande:

*

(

margin: 0;

padding: 0;

border: 0;

)

pour effacer toutes les marges par défaut et les paramètres de remplissage. Notez également la frontière, qui est mis à 0. S'il vous plaît noter que si vous faites cela, vous aurez également se débarrasser des images gênantes violet autour des frontières cliquez-mesure, même si certaines personnes estiment que la frontière pourpre est nécessaire pour l'accessibilité et la convivialité. Mais beaucoup de gens n'aiment pas les images de pourpre autour de la frontière, et c'est une façon que vous pouvez vous débarrasser de celui-ci d'un seul coup sans avoir à définir la frontière img = 0 pour chaque image (ce qui est contre les règles de marquage strict de toute cas).

Astuce 2: Pour centrer votre mise en page, utiliser un div conteneur pour contenir tous vos contenus

La déclarer comme suit:

# container

(
margin: 0 auto;
largeur: xxxpx;
)

Il ya quelques points ici pour prendre note. Ne déclarez pas la largeur à 100%. Cela réduit à néant tout l'objet, puisque vous aurez juste à déclarer les éléments sous dans le conteneur, puis centre de leur utilisation margin: 0 auto. Cela est très mauvais car cela signifie que, plutôt que de déclarer la mise en page centrale une fois, vous devrez le déclarer à plusieurs endroits pour chaque élément au sein de votre récipient.

Astuce 3: travail de haut en bas

Littéralement commencer à travailler sur votre mise en page CSS commençant par le haut la plupart des éléments dans votre conception, ainsi que le «haut» des éléments dans votre code HTML, comme le corps, ainsi que vos contenants principal.

Déclarez vos commandes CSS sur le plus haut niveau possible et d'essayer de déclarer quelque chose une seule fois et le laisser en cascade à travers. Seulement remplacer les commandes à un niveau inférieur lorsque cela est strictement nécessaire. Cela empêche un fichier CSS verbose qui est difficile à maintenir et à comprendre. Par exemple, si vous avez (margin: 0 auto) paramètres de chaque sous div dans votre bac - vous êtes en difficulté.

Astuce 4: Document ce que vous faites et de l'utilisation de Firebug et le navigateur Firefox pour déboguer

Vous n'êtes pas d'écrire votre code CSS juste pour vous, un jour quelque pauvre bougre devra le déboguer. Faire de nombreux commentaires dans votre fichier CSS à expliquer pourquoi vous faites les choses d'une manière spécifique.

S'intégrer à la présente, vous pourriez vous retrouver avoir à fixer de quelqu'un d'autre CSS plus souvent que vous le pensez (ou même vos propres, d'ailleurs). Utilisez le Firebug add-on pour Firefox pour déboguer votre CSS. Il s'agit d'une bouée de sauvetage à l'égard de vous donner un aperçu exactement où votre conception pourrait être brisé et pourquoi.

Le seul problème avec ceci est que votre conception peut fonctionner parfaitement dans Firefox, mais pas dans IE5, IE6 ou IE7. Cela nous amène à la pointe suivante.

Astuce 5: Décidez quels navigateurs vous allez construire votre CSS et tester dès le début

Certains puristes insistent sur vous assurer que votre site internet fonctionner pour tous les navigateurs du possible, d'autres ne le faire fonctionner pour la «majeure» des navigateurs. Comment savez-vous exactement quels sont les navigateurs les plus utilisés? Une fois encore W3 Schools venir à la rescousse.

Sur la page suivante, vous pouvez voir quels sont les navigateurs les plus populaires: http://www.w3schools.com/browsers/browsers_stats.asp. Depuis cette page vous pouvez voir que quelque chose comme IE5 est uniquement utilisé par environ 1,1% des navigateurs. Il est à vous si vous estimez utile de construire votre CSS pour être compatible avec ce navigateur, ou si vous allez juste pour tester votre compatibilité avec IE6, IE7 et Firefox, par exemple. Quoi que vous fassiez, lorsque vous commencez à construire votre CSS, commencez par le haut, et de tester chaque paramètre dans chacun des navigateurs comme vous allez le long. Il n'y a rien de pire que de construire un site parfait dans Firefox, puis de trouver tout de suite après que vous avez codé un fichier ligne css 1000 qu'il est cassé dans IE6. Pour déboguer et puis fixer votre code après le fait est un cauchemar.

Astuce 6: Voici une astuce peu gênant pour la fixation de votre code CSS dans IE6 ou IE7

Disons que votre conception fonctionne parfaitement dans Firefox, mais il est cassé dans IE6. Vous ne pouvez pas utiliser Firebug pour déterminer où le problème peut être car il fonctionne dans Firefox. Vous n'avez pas le luxe d'utiliser Firebug dans IE6, alors comment voulez-vous déboguer une feuille de style IE6 ou IE7? J'ai souvent constaté qu'il permet d'ajouter (border: 1 px en rouge) ou (border: 1 px solide violet) pour les éléments problématiques. De cette façon, vous pouvez souvent voir pourquoi certains éléments ne rentrent pas dans l'espace disponible. Il s'agit d'une astuce peu gênant car il est si primitive et simple, mais ça marche!

Conseil 7: Comprendre flotteurs

Flottant d'éléments est essentiel de comprendre, en particulier dans le contexte d'obtenir votre éléments flottants à travailler dans les différents navigateurs!

Essentiellement des éléments tels que divs sont flottait vers la gauche ou la droite (jamais vers le haut ou le bas, seul le côté). Voici quelques éléments à prendre en considération avec les éléments flottants. Chaque élément flottant doit avoir une largeur explicite spécifiée. Si vous faites usage de divs flottant pour créer une colonne 3 ou d'une mise en page 2 colonne, plutôt spécifier les largeurs en termes de pourcentages plutôt que de largeur fixe, et si vous ne pourcentages utilisation, assurez-vous que les pourcentages ne s'additionnent pas à 100 %, ce sera souvent la cause du droit colonne la plus à descendre en dessous du reste, en indiquant clairement que vous essayez de vous équiper quelque chose dans l'espace disponible qui est trop large pour lui. Plutôt utiliser des pourcentages qui s'additionnent à un peu moins de 100%, comme 25%, 49%, 24% pour une colonne gauche, colonne du milieu et de la colonne de droite.

Les éléments flottants peuvent être extrêmement complexes à comprendre et il vaut la peine de passer du temps sur de bons sites qui fournissent des lignes directrices précises et des conseils, tels que la situation est tout site.

Conclusion

Ces conseils CSS pour la mise en devrait nous l'espérons vous faire gagner du temps et des efforts lors de votre prochaine ont au panneau-beat une conception sans tableau, à la soumission!

© 2009, admin . Copyright 2009. Tous droits réservés.

Sauver

Tags: mise en page CSS , CSS conseils

Cet article a été publié le Lundi, Octobre 26, 2009 à 11:21 PM et est classé dans Web Design . Vous pouvez suivre les réponses à ce bulletin avec le fil RSS 2.0 flux.