TUTORIAL: Multi-Column Layout Using CSS Float - Partie 2

Il s'agit d'un didacticiel niveau intermédiaire et est le prolongement d'un précédent tutoriel qui peut être trouvé ici . Elle suppose que le lecteur a une bonne connaissance et compréhension du langage HTML et CSS.

Introduction

Dans notre précédent tutoriel, nous avons vu comment nous pouvons créer des configurations multi-colonne en utilisant un balisage sémantique et CSS pour manipuler les conteneurs. Nous avons utilisé les méthodes requises aucune solution de contournement, hacks ou un navigateur de traitements spécifiques. Là, continuez bien à celle qui, en examinant les moyens de surmonter les insuffisances techniques et les pièges sans bouleverser l'agencement.

Voici le balisage et le CSS qui nous restait à la fin du tutoriel précédent.




Actuellement, notre document devrait rendre quasi identique dans tous les navigateurs actuels * ( Figure 1 ).



* Par «courant», Im se réfère vaguement à Internet Explorer 7, Firefox 2, Opera 9 et Safari 3. La version actuelle de Konquorer devraient être ajoutés à cette liste, cependant, je n'ai pas accès à ce navigateur.

Travailler avec le Content-Box Box Model intérieures et extérieures

La première chose dont nous avons besoin de discuter et de comprendre est le modèle de boîte. Comprendre cela est important lorsque l'on définit une largeur de pixel fixe pour un élément de type bloc. Dans ce cas, le <div> éléments que nous utilisons pour les colonnes.

Les deux types de modèles en boîte, la teneur en «boîte» et la «frontière-box". La différence entre eux est de savoir comment nous considérons leurs dimensions. Lorsque la largeur d'un border-box est mesurée aux frontières sous forme d'une frontière, un content-box est mesurée en termes de zone de contenu. Ceci est illustré ci-dessous ( Les figures 2 et 3 ).



box_content.gif
Le modèle de boîtier le plus largement supporté aujourd'hui est le content-box.

Parce weve défini des largeurs spécifiques pour les colonnes, nous ne voulons pas toucher leur remplissage ou de marges. L'agrandissement de ces serait, en effet, d'élargir la largeur de la colonne cumulative et entraîner nos colonnes à envelopper. Par conséquent, on normalise ceux-ci en les mettant à "0".

Pour reformuler cette idée: Si je crée un content-box et définissez sa largeur de 200 pixels, puis a ajouté 10 pixels de remplissage de tous les côtés, le cadre sera rendu visuellement que 220 pixels.

Bien qu'il mai sembler contre-intuitif, au lieu de s'appliquer une fois padding au conteneur, on l'applique à des éléments textuels à l'intérieur. Ces éléments n'ont pas reçu des largeurs spécifiques et, par conséquent, conforme naturellement à la surface des conteneurs du contenu. Ce fut le dernier morceau de CSS, nous avons ajouté dans le tutoriel précédent.



Nous pourrions, bien sûr, être plus précis avec les dimensions de notre rembourrage en spécifiant haut, à droite, en bas à gauche et les dimensions. Lets do this, temporairement, avec l'<li> élément en utilisant la notation abrégée.



«Comment puis-je obtenir toutes les colonnes d'élargir la même façon?"

La réponse est brève: «Nous ne faisons pas. "Ce que nous faisons, cependant, est de créer l'illusion que cela se produit en utilisant un fond graphique. Nous n'appliquons pas le fond de chaque colonne, à titre individuel. Au lieu de cela, nous appliquons une image de fond unique pour le PARE le contenant. Dans ce cas , le <div> identifiés comme «page_conatiner". En Figure 4 , Nous voyons ce que l'arrière-plan résultant ressemblera. Pour ce faire, ont besoin ainsi de créer, ou obtenir un graphique qui est de 760 pixels de large et 1 pixel de hauteur.



Dans le CSS, nous pouvons éliminer les couleurs solides que nous avons spécifié précédemment pour les colonnes.



Ensuite, appliquez bien notre graphique qui par défaut se répète, ou de tuiles.



Quand nous rendre la page, il semble que les colonnes s'étirent verticalement et égale, indépendamment de qui nous avons beaucoup de contenu dans une colonne donnée.



Travailler avec la <ul> comme un menu

La prochaine chose bien regarder, c'est le menu. Les raisons d'utiliser des listes triées comme un menu et la manipulation avancée d'entre eux serait un bon sujet pour un tutoriel, mais il n'est pas dans le champ d'application de celle-ci.

Modification d'un <ul> utilisé comme un menu semble être une pierre d'achoppement pour beaucoup d'entre nous. Typiquement, l'objectif de style dans le menu est d'avoir chaque lien s'étendent à travers la largeur horizontale de la colonne. En outre, comme la mer pour le curseur utilisateurs d'interagir avec la région tout entière.

L'objectif est atteint, tout simplement, en chargeant ces liens pour rendre comme éléments de niveau bloc, par opposition aux éléments de niveau ligne. Et de réduire également le remplissage de l'<li> conteneurs à "0" et ajoutez l'espacement désiré le <a> éléments. Bien être la création d'un sélecteur de nouveau dans notre CSS.



Aux fins de voir les interactions curseur, bien ajouter encore un autre nouveau sélecteur, aussi bien - un pseudo-état de l'élément <a>.





Conclusion

Dans ce tutoriel weve vu comment construire et entretenir un aménagement tri-colonne en utilisant un balisage sémantique et CSS - sans solutions de contournement. En outre, weve exploré la façon de surmonter les erreurs courantes qui, autrement, briser notre disposition.

Bien que ce didacticiel ne traite pas, la même technique peut être appliquée à un pourcentage basé layouts.

S'il vous plaît PM moi avec des suggestions pour améliorer ce tutoriel.

Merci!
dM

Ouais, bon tutoriel. Merci DM! Sera-t-il Part-3? - Son irrésistible.

Hmmm. Je n'avais pas pensé à une partie 3. Im ne savez pas où aller dans ce sens. Permettez-moi de réfléchir sur ce George.

Salut dM, Good Day,
J'ai quelques questions. Laissez-nous dire, l'image de fond se répète pas, ce qui en fait une position centrale ou ailleurs, où (à gauche, à droite). Comment pourriez-vous recommander que je le faire?


Si nous avons de nombreuses pages, recommanderiez-vous que copier et coller à partir de ma première page HTML? dire que j'ai plus de 50 pages de liens. (ou même plus). En ce qui concerne la cohérence de la mise en page web est concerné, comment vous nous recommander de le faire? Votre temps est très appréciée.

Merci beaucoup,
g.

L'image de fond dans le page_container "élément", ou tout récipient, peut être manipulé de plusieurs façons en ajoutant des directives à l'arrière-plan "" définition.

Dans le général, "background" de définition (s) que vous pouvez définir
- Une couleur unie
- Une image
- Comment l'image se répète, ou ne sont pas
- Comment réagit l'image dans un espace de défilement
- Le placement vertical de l'image par l'alignement, soit par mesure pixel
- Le placement horizontal de l'image par l'alignement, soit par mesure pixel



Cela peut également être accompli avec une notation abrégée...

(Je n'ai pas la tester, mais son assez proche pour un exemple)



Je recommande que les styles de site à l'échelle sont toujours logés dans un seul fichier, chaque fois que possible. Si les variations sont nécessaires dans un site, je suggère que les diverses définitions sont données leurs propres feuilles de style et chargé en outre par page.

Voici un exemple...

Je ne comprends pas cette partie. Un tutoriel sur la duplication des pages similaires serait utile à mon avis. Toutefois, il appartient à l'animateur d'en décider. Merci encore à ce tutoriel Nice.

Wow! Je ne savais pas Id être traités à un cours comme celui-ci lorsque j'ai rejoint ce site. Le meilleur CSS tutorial Ive trouver. Peut-être votre méthode d'enseignement, mais je n'ai pas eu le temps de faire un tutorial et n'a de toute façon!

Advanced menu manipulation serait un excellent moyen de continuer.

Une chose qui ne me dérange est l'espace blanc de chaque côté du conteneur. Si vous voulez accéder à l'espace de conception ou d'ajouter des fonctionnalités comment le feriez-vous?

Hey, merci. Ill certainement être à la recherche de plus de vous.

C'est l'un des meilleurs sur les tutoriels CSS mise en page qui Ive a lire! Merci!

Im having trouble voyant l'image de fond de la #page_container dans Firefox. Je peux le voir si je définir une hauteur pour le #page_container, mais sinon ça ne se voit pas. Aucune supposition quant à whats happening?

Merci beaucoup encore!

S'il n'y a pas de clear: both; objet dans le pare pas, le réservoir ne génèrera hauteur à partir du 3 colonnes, car theyve quitté le rendu de flux. J'étais à l'accomplissement de cette #pied de page.

Avez-vous le pied de page? Est-il à l'intérieur du #page_container div?

Si rien de tout cela semble correct, s'il vous plaît envoyer un balisage pour que je puisse regarder.


...et merci pour le compliment. Content que les gens Im tirer quelque chose de cela.

Je n'avais en effet un pied de page avec claire: les deux. Toutefois, il avait aussi un flotteur sur elle, qui semble casser des choses. Lorsque j'ai pris l'flotter, cela marchait parfaitement!

Donc, vous devez avoir au moins un objet avec claires et sans flotteur, est-ce exact?

...et vous êtes les bienvenus. Im un enseignant, moi-même. Alors je connais un bon enseignement. Et youve got it! Youre merveilleux à détruire. Si jamais vous êtes dans la SF et ont besoin d'un emploi, Im le directeur de la formation dans une école appelée l'apprendre. Look me up!

-David

Merci encore, David.

Oui, la directive fera flotter un objet à prix bon marché pour l'écoulement normal de la page. La directive claire entraîne un objet pour montrer égard pour les plus flottait et aura une incidence sur le contenant aussi.

Glad you got it fixed!

Partie 3 pourrait être prise la mise en page en pourcentage et non pas une largeur fixe. Ce serait utile.