If you want your unordered list items to sit at the same left-align point as the rest of your content, you will need to set some styles to control the indentation to your liking. One thing you will probably notice quite quickly is that the default style for lists indents them more than the default style for paragraphs-see Figure 6:įigure 6: Default styled lists are indented on the left. In this section I’ll take you through applying sensible margins and padding to the two most common types of list. Just be careful when your design features content that might cause a list item to wrap over several lines-if you set the background to vertical center or 50% it can look quite strange, as shown in Figure 4:įigure 4: A demonstration of vertically-centred bullet images on a multi-line list item.īy setting the image to sit at the top of the list item, you maintain the default bullet behaviour (where the bullet sits on the first line)-see Figure 5:įigure 5: A demonstration of top-aligned bullet images on a multi-line list item.Ĭlever use of margins and padding can make lists look much more polished and professional, but you need to know what you are doing, and also bear in mind that the situation differs between different types of list. Depending on the design you are creating, you might also be able to use %, ems or keywords. This will produce a list with the RSS image instead of bullets, as seen in Figure 3:īear in mind that the background image is positioned using pixels for a precise placement. Then, simply add a background image to each list item, some left padding to move the text over to let the image show through, and some bottom padding to space out the list items:īackground: #fff url("icon-rssfeed.gif") 0 3px no-repeat We’ll give the list the class "rss" to differentiate it from other lists:įirst we’ll set the list to have no list-style-type and remove the margin and padding. Let’s imagine you have a list of RSS feeds and you want to change the bullet to the standard orange RSS icon. So it has become a far more common practice to simply set a background image on the list items. However, the property has limited positioning options for the background image, and in some circumstances doesn’t work at all in IE. The CSS specification does include the list-style-image property for adding a custom list image. The standard set of bullets are enough for basic content, however it is a common design request to replace them with a custom image. If you need the bullet to be a different colour from the text, you will need to use an image instead, or work around the issue using other elements within the list items (this may be easy if all the items are links, for example). Note that the bullets and numbers will be rendered using the color which is set for or inherited by the li. The basic list choices example page shows some more options. Some common list types are shown in Figure 2: Which will produce something like Figure 1:įigure 1: Unordered list with square bullets. As you learned in the HTML Lists article, there are many options available, set using the list-style-type property.įor example, to set all unordered lists on your site to use square bullets, use this CSS: You might also choose to remove the bullets and numbers completely. The fundamental thing to consider when creating a list style is what form of bullet or numbering you want to use.
INDESIGN INHERIT FONT COLOR DOWNLOAD
There are a number of examples used in this article, so you can download the lists and links example files to follow along with them.įirst, I’ll take you through the basics of styling lists with CSS, before then moving on to look at some slightly more complicated techniques.
We’ll also discuss some ways to avoid key pitfalls of these elements and produce a final result that will work across different browsers, and be accessible to users with disabilities. In this Web Standards Curriculum article we’ll look at the core skills you need to create robust list and link styles. In the worst case, a user might not even be able to tell which items on the page are actually links. Poorly styled links can ruin the user experience on a website, as people have to stop and think about where to click.
Links in particular have some key style requirements and user expectations. With lists and links it’s a different story-if you don’t get them right, you can cause some serious problems for people trying to use your website. Many elements on a webpage are a little bit "forgiving" in terms of design-if they’re not "just right" it doesn’t matter too much. 4 Bringing it all together-a simple navigation menu.3.6.1 Faux underlines using border-bottom.3.6 Example: recreating the Netscape defaults.3.5.1 Styling link states in the right order.3.2 How browser evolution set expectations.
0 kommentar(er)
