CSS Conception Taming Listes · Une A List Apart article
Dans cet article, je vais vous montrer comment utiliser CSS pour faire des listes peu maniables sous contrôle. Il est temps pour vous de dire des listes comment se comporter, au lieu de les laisser se déchaîner sur votre page Web.
La mise en scène
Aux fins du présent article, je suis en utilisant les listes à puces. Le même CSS peut être appliqué, avec des résultats similaires, aux listes ordonnées, ainsi. Sauf indication contraire, tous les exemples de cet article utilisent le code suivant pour les listes.
Chaque liste est simplement placée à l'intérieur d'un autre DIV et le CSS est écrit de telle sorte que le comportement de la liste est déterminée par la DIV est dans chaque DIV a une règle de base.:
Sans autres styles appliqués, la liste est rendue de cette manière dans la base DIV:
- Objet 1
- point 2
- point 3
- point 4
- Point 5, nous allons faire un peu plus pour qu'il envelopper
placement
- Objet 1
- point 2
- point 3
- point 4
- Point 5, nous allons faire un peu plus pour qu'il envelopper
- Objet 1
- point 2
- point 3
- point 4
- Point 5, nous allons faire un peu plus pour qu'il envelopper
La règle ressemble à ceci:
Et le navigateur rend:
- Objet 1
- point 2
- point 3
- point 4
- Point 5, nous allons faire un peu plus pour qu'il envelopper
Pour spécifier un fichier HTML puce à utiliser si le navigateur ne supporte pas cette partie de CSS, ajouter:
qui est l'équivalent de:
Voici ce qu'il ressemble à la page Web:
- Objet 1
- point 2
- point 3
- point 4
- Point 5, nous allons faire un peu plus pour qu'il envelopper
Le code HTML contiendra notre UL standard, mais avec quelque nature qu'elles soient ou entité HTML que vous souhaitez utiliser à la place de la balle qui précède le contenu de l'élément de la liste. Dans notre cas, nous allons utiliser . » La citation double angle droit:».
- " Objet 1
- »Point 2
- »Article 3
- »Point 4
- »Point 5, nous allons faire un peu plus pour qu'il envelopper
Je tiens à souligner que Netscape6 / 7 / Mozilla (et d'autres navigateurs basés sur Gecko) et Opera peuvent créer du contenu généré par l'CSS2: avant pseudo-élément. Nous pouvons profiter de cela pour générer automatiquement le caractère »(ou tout autre caractère) pour les balles. Cela nous permet de laisser le contenu de l'UL seul. Si vous utilisez Opera ou un navigateur basé sur Gecko, le CSS suivant va créer la même liste que ci-dessus, mais en utilisant la norme UL sans contenu supplémentaire:
- Objet 1
- point 2
- point 3
- point 4
- Point 5, nous allons faire un peu plus pour qu'il envelopper
listes vraiment inline
Je vous entends pleurer, « FAUTE! Je pensais que vous alliez mettre une liste à l'intérieur d'un paragraphe, pas entre les deux paragraphes « .
Ce à quoi je réponds: « Eh bien, oui. Mais (X) HTML ne permet pas une liste apparaisse à l'intérieur d'un paragraphe. Cependant, avec l'aide de notre feuille de style, qui est la façon dont il se penchera sur la page Web « .
Voici ce que les styles ressemblent:
Les résultats sont ci-dessous (liste apparaît en gras et bleu):
Un peu de texte avant la liste apparaît. Peut-être que le contexte est quelque chose au sujet d'un mari avoir reçu un appel de sa femme pour ramasser quelques petites choses sur le chemin du travail. Il ne compte pas vraiment, pour nos besoins nous avons juste besoin du texte précédent avant la liste:
- Objet 1,
- Point 2,
- Point 3,
- Point 4,
- Point 5, nous allons faire un peu plus pour qu'il envelopper.
Et puis il y a le texte qui suit la liste dans le paragraphe. Une ou deux phrases suffisent pour l'exemple.
Comme dans l'exemple de puce personnalisée ci-dessus, nous pourrions utiliser les CSS pour générer automatiquement les virgules et la période qui suivent chaque élément de la liste. Si vous aviez à vous soucier étaient Opera et les navigateurs Gecko alimentés, ce qui est. Cette fois, les styles ressemblerait à ceci:
Ici, nous utilisons le: après pseudo-élément pour ajouter une virgule après chaque élément de la liste, et une période après un élément de liste avec class = « last ». entraînant la suivante (rappelez-vous, il ne sera visible que dans Opera ou Mozilla / Netscape):
Un peu de texte avant la liste apparaît. Peut-être que le contexte est quelque chose au sujet d'un mari avoir reçu un appel de sa femme pour ramasser quelques petites choses sur le chemin du travail. Il ne compte pas vraiment, pour nos besoins nous avons juste besoin du texte précédent avant la liste:
- Objet 1
- point 2
- point 3
- point 4
- Point 5, nous allons faire un peu plus pour qu'il envelopper
Et puis il y a le texte qui suit la liste dans le paragraphe. Une ou deux phrases suffisent pour l'exemple.
La navigation
Ces exemples de listes horizontales utilisent tous la même base DIV avec les styles suivants:
Les deux exemples suivants utilisent la même UL comme dans les exemples précédents, mais sans l'élément de la liste finale avec son texte supplémentaire. Ils comprennent également une classe supplémentaire qui distingue l'un des LIs dans la liste.
Un caractère de pipe, |, est souvent utilisé pour différencier les choix. Il est un caractère de séparation évidente, et peut être émulé en ajoutant des bordures à la liste des éléments:
nous ajoutons ici class = « first » au premier LI afin qu'il ne se termine pas avec une bordure sur le côté gauche.
Vous pouvez modifier ces styles pour créer un effet de navigation par onglets:
Dans cet exemple en ajoutant class = « ici » à une LI crée une bordure inférieure qui correspond à la couleur d'arrière-plan pour indiquer que l'onglet se réfère à la page en cours.
Note: Cette technique a été proféré par Randal Rust. puis repompée par de nombreux sur la liste email css-discuter
sentiers miettes de pain
crée les éléments suivants:
En ajoutant les règles suivantes à la feuille de style pour la page:
Encore une fois, nous pouvons générer le caractère »(ou tout autre caractère que vous pouvez utiliser comme séparateur) avec le: avant pseudo-élément, combiné avec une classe = « first » de telle sorte que la première LI ne génère pas un séparateur:
Et le résultat final:
Dans le monde réel
Je voudrais terminer par une application réelle de certaines des techniques qui ont été discutées ici. Nous allons utiliser une norme UL contenant des liens pour créer un menu dynamique avec des effets de vol stationnaire. Afin d'obtenir les effets de vol stationnaire, nous allons laisser l'UL de fournir la structure et les styles d'ancrage fourniront à la plupart des effets visuels.
Regardons la règle de feuille de style par la règle, et je vais vous expliquer pourquoi chaque règle est construit de la façon dont il est.
Ensuite, je défini ce que la liste ressemblera. Étant donné que tous les éléments de la liste devaient être des liens, et la fonctionnalité de roulement seraient intégrés dans le CSS pour les liens, je essentiellement retiré tous les style des listes. Je l'ai fait ajouter une bordure de pixel sur le fond de chaque lien qui correspondait à l'arrière-plan de la DIV #button, travailler comme séparateur. Dans la conception originale, ce fut une image.
Enfin, je définissais les liens. La conception originale a 10 frontières de pixels à droite et à gauche. Ces frontières, ainsi que l'arrière-plan, changent de couleur sur le roulement. Ceci est une chose relativement simple à contrôler avec le: hover pseudo-classe CSS, donc je mis ce style dans les styles d'ancrage.
Il y a une solution de contournement dans cette partie de la feuille de style. Pour les liens actifs sur toute la largeur de la DIV, je les ai faites display: block ;. Cela fonctionne pour tout sauf IE / Windows. Si vous donnez le bloc une largeur explicite de 100%, puis IE / Windows joue le jeu. Mais faire cela crée des problèmes avec IE5 / Mac et Netscape / Mozilla. Donc, je le sélecteur d'enfant « > » pour redéfinir la largeur de l'auto. Depuis IE / Windows ne comprend pas les sélecteurs de l'enfant, il ne tient pas compte de la règle. IE5 / Mac, Opera et Netscape / Mozilla suivent la règle, et tout le monde est heureux.
La règle du: hover pseudo-classe crée les changements de couleur sur les arrière-plans et les frontières lorsque les liens sont plus mouchetés.
Le sommet de l'iceberg
Les appareils mobiles embarquent avec IPP plus haut, et les ordinateurs de bureau et les ordinateurs portables suivent la tendance. Il n'y a pas…