CSS avancées Layouts étape par étape, WebReference
Le défi: Répliquer la première page de WebRef en utilisant CSS. La solution: CSS et beaucoup d'itérations.
Rogelio Lizaolo améliore la version CSS Kwon Ekstrom de la page d'accueil de Tablé WebRef. Mois dans la fabrication, la conception finale avec succès dupliquent la mise en page de WebRef sans l'utilisation de tables. De nombreux bogues ont été découverts dans Netscape et Internet Explorer dans la façon dont ils gèrent CSS, et nous avons trouvé quelques solutions de contournement élégantes à ces questions et d'autres problèmes. Ce qui suit est un tutoriel étape par étape la mise en page CSS qui montre comment nous sommes arrivés à la conception finale.
introduction
Dans « Evolution d'une Page d'accueil » Andy King a jeté le gant, il incite le lecteur à reproduire de WebRef déposé (et mythique) page d'accueil en CSS. Kwon Ekström est venu avec une solution. qui a travaillé dans un certain nombre de navigateurs. Après avoir enquêté sur sa solution, j'ai trouvé quelques problèmes avec sa conception, et que je vais essayer et de l'améliorer. Andy, Kwon et moi sommes allés en arrière sur un certain nombre de mois peaufinage et l'amélioration de ma conception. Ce qui suit est un compte étape par étape de ma tentative de dupliquer table comme de WebRef mise en page en utilisant CSS, tout en évitant certains des bugs et des problèmes dans d'autres implémentations trouvés.
Le but ultime est de créer une mise en page CSS qui ressemble exactement à la mise en page de WebReference.com fait avec des tables et se comporte également bien avec de petites tailles de fenêtres et de grandes polices.
Les navigateurs cibles sont toutes les générations cinq et plus, les navigateurs pour les plates-formes Windows et Macintosh. Nous cherchons également à utiliser les mêmes règles de style pour tous ces navigateurs. Cette contrainte rend la tâche plus difficile et le code final plus grand et plus complexe que ce serait un navigateur avec une bonne conformité à la norme CSS niveau 2, comme Netscape 6. Ainsi, nous ne pouvons pas utiliser ces fonctionnalités qui ne sont pas pris en charge pour tous les navigateurs et parfois les solutions de contournement nécessaires pour résoudre des bugs ou d'autres problèmes donnent une utilisation pas si simple de CSS.
Le défi Mise en page
3 Mise en page de la colonne: Étape par étape
Nous changeons que la couleur de fond de ce nouveau div. Maintenant, nous pouvons voir clairement la colonne de gauche et son séparateur. Regarde
Cette fois, nous nichera un autre div appelé juste « principale » pour définir sa couleur de fond différente de la transparence, et nous pouvons mettre en évidence les colonnes et les séparateurs. Regarde
Ajouter le Top Nav et Bars Ad
Nous n'avons pas fait le code pour le droit et le contenu des colonnes de gauche encore, juste la mise en page visuelle, mais nous avons illustré la technique de base pour afficher trois colonnes et leur faire exactement la même hauteur. Donc, avant de discuter de cette question, nous allons mettre la barre de navigation supérieure et le bloc publicitaire en place. Nous allons nicher à l'intérieur « niveau1 » et avant « niveau 2 » un div avec un jeu d'id « TopBar, » et à l'intérieur « TopBar » nous nid un autre div avec un id réglé sur « advBar. » Regarde
Float la pointe-o-the-Day
Tout le monde contenu?
Maintenant, attaquons le problème sur la façon de mettre du contenu dans ces barres. La façon plus naturelle de le faire serait d'utiliser la propriété flottante, mais en raison des problèmes de rendu d'Opera et IE avec cette technique nous devons compter sur le positionnement absolu pour faire avancer les choses. Le bug IE est minime, et peut être ignoré, mais il n'y a aucun moyen de résoudre le bug que nous avons découvert Opera. Jetez un oeil sur les liens ci-dessous pour obtenir une description et un exemple sur ces bugs.