List marker css. Bulleted lists. List marker wrap style

CSS lists— a set of properties responsible for the design of lists. Using HTML lists is very common when creating website navigation bars. List items represent a collection of block elements.

Using standard CSS properties you can change appearance list marker, add an image for the marker, and change marker location. The height of the marker block can be set with the line-height property.

Designing lists using CSS styles

1. List marker type list-style-type

The property changes the marker type or removes the marker for bulleted and numbered lists. Inherited.

Syntax

Ul (list-style-type: none;) ul (list-style-type: square;) ol (list-style-type: none;) ol (list-style-type: lower-alpha;) Rice. 1. Example of designing bulleted and numbered lists

2. Images for list items list-style-image

You can use images and gradient fills as list item markers. Inherited.

Syntax

Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Rice. 2. Design a bulleted list using an image
Rice. 3. Design a bulleted list using a gradient

3. List-style-position

This property provides the ability to place the marker outside or inside the content of the list item. Inherited.

A bulleted list is defined by adding a small bullet, usually in the form of a filled circle, before each list item. The list itself is formed using a container

, and each list item begins with a tag
• as shown below.
  • First point
  • Second point
  • Third point

  The list must contain a closing tag

Example 11.1 shows the HTML code for adding a bulleted list to a web page.

Example 11.1. Create a bulleted list

• Cheburashka
• Crocodile Gena
• Shapoklyak
• Rat Larisa

Result this example shown in Fig. 11.1.

Rice. 11.1. Bullet list view

Pay attention to the padding at the top, bottom, and left of the list. Such indents are added automatically.

Markers can take one of three forms: circle (default), circle, and square. To select a marker style, use the tag's type attribute

. Valid values are given in table. 11.1
Table 11.1. List Bullet Styles

List type	HTML code	Example
List with circle markers		First Second Third
List with circle bullets		First Second Third
List with square bullets		First Second Third

Marker appearance may vary slightly depending on different browsers, as well as when changing the font and text size.

Creating a list with square bullets is shown in Example 11.2.

Example 11.2. Type of markers

Changing Beliefs

• change in religious faith (optional: Buddhism, Confucianism, Hinduism). Special offer- Judaism and Islam together;
• a change in belief in the infallibility of the favorite party;
• the belief that aliens exist;
• preference for a political system as the best of its kind (to choose from: feudalism, socialism, communism, capitalism).

The result of this example is shown in Fig. 11.2.

I remember how in July 1999 I educated people on email lists about the delights of style layout. Since then, little has changed.

However, something has changed. My view on CSS and on (X)HTML, which acts as a framework for styles, has changed. For example, I found that most pages contain a navigation bar. Most often it is designed as a simple text string with links separated by tags

or

Structurally, they are lists of links, and therefore should be formatted as such.

The reason we don't style them as lists is because we don't really want to see a bullet before every link in the menu. Previously, I talked about some page layout techniques with using CSS. In one of those tricks, we learned to display lists in a line instead of vertically.

In this article, I'll show you how you can tame those clumsy and clunky lists using CSS. Stop them wandering around your web pages. It's your time to command him how to behave.

Preparing the arena

As a training subject, I chose simple, unnumbered lists. All the CSS rules mentioned here can be applied to numbered lists with the same result. In all examples (except where specifically stated), the following list is used:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5 let's make this item a little longer so that it goes to the next line

Each list is simply placed inside individual element

, and the behavior of the list is determined using this DIV. The basic rule that applies to all DIVs is:

Without any additional styling rules, the list in the base DIV will look like this:

Positioning

Sometimes the default list indentation may be too large for your design. But changing only the margin or padding property of the element

Doesn't work for all browsers. In order for the list to move completely to the left, say, you need to change both properties: margin and padding. This is due to the fact that Internet Explorer and Opera create a left indent for the list using left margin, and Mozilla/Netscape use left padding for this.

In the following example, the margin-left and padding-left properties of a UL element are set to 0:

Please note that the markers lie outside the DIV boundary. If the container were not a DIV, but a document, the markers would be outside the browser window, i.e. would disappear out of sight. If you want the markers to lie inside the DIV's borders, along its left edge, set either the left-padding property or the left-margin property to "1em".

Markers

Let's say you needed a list with special bullets. What did you do before? We created a table, placed a GIF image of the marker in one column and moved it up and to the right in the cell. The other column contained text that should have been in the elements

• . CSS now allows you to use an image as a marker. If the browser does not support this CSS feature (or does not support graphics output), the default marker (or the one you specify in this case) will be used.

  The style rule looks like this:

  ul ( list-style-image: url(bullet.gif); )

  And the browser will show the list like this:

  For those browsers that do not support graphics output, add the following line to the rules:

  list-style-type: disc;

  The image you select as a marker may “creep” beyond the boundaries of the list. To prevent this from happening, place the image inside the block

• . To do this, add the following line:

  list-style-position: inside;

  All three declarations can be combined into one short rule:

  ul ( list-style: disc url(bullet.gif) inside; )

  which is equivalent

  ul ( list-style-type: disc; list-style-image: url(bullet.gif); list-style-position: inside; )

  The resulting list will look like this:

  It may happen that you have a list, but you don't need bullets, or you want to use some other character as a bullet. Once again, CSS comes to your rescue. Add the rule list-style: none; and make the elements

• "overhanging". The entire rule will look like this:

  ul ( list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; )

  Either the left padding property or the left margin property should have a value of 0, and the other should have a value of 1em. By changing this property you can adjust the size of the indent from your marker to an acceptable one. A negative value in the text-indent property causes the first line of each list item to move to the left and “overhang” the rest of the text.

  Our next list will be normal, only the standard HML symbol will be used as a marker, for example ", which corresponds to the closing typographic quotation mark: ".

  It should be noted here that Netscape6/7/Mozilla (and other Gecko-derived browsers) as well as Opera can generate content using the :before pseudo element from the CSS2 standard. Let's use this function and automatically generate the symbol "or some other symbol as a marker. This way we won't have to enter it manually into each LI element. If you're using the Opera browser or the Gecko family of browsers, the following CSS will create the same list as the previous one, without needing to add anything extra to the list itself.

  #custom-gen ul li:before ( content: "0BB 020"; )

  The content property can be set to a text string, a URL, or something else, including Special symbols. If you have chosen a character like "", you must enter the hexadecimal code of this character in the property. The right typographic quotation mark has the code 0BB (the other character 020 is a space, added for aesthetic reasons). The final result is shown below (watch with Opera or Mozilla/Netscape browser):

  Arranging the list in a row

  Who said that lists should go vertically and be formatted with markers on the left? For example, you want a numbered list of links, but visually you want the list to look like a vertical navigation bar on the page. Or let's say you want the links to run horizontally along the top edge of the page.

  This applies not only to the list of links. You may need to list a list several times within a paragraph (for example, a list of books). Structurally, it's a list, but before, if you did that, the list would break up your paragraph. CSS comes to your rescue again!

  Since this list will not be something separate on the page, I will not place it in a base DIV like the previous lists. This time the markup will look like this: paragraph, list, next paragraph.

  I can already hear the shouts: “You idiot! We thought you'd teach us how to put lists inside a paragraph instead of between two paragraphs."

  And to this I will answer: “Well, yes, you are right. Unfortunately (X)HTML does not allow lists to be placed inside a paragraph. However, with styles you can do this.”

  First, here are the style rules:

  #inline-list ( border: 1px solid #000; margin: 2em; width: 80%; padding: 5px; font-family: Verdana, sans-serif; ) #inline-list p ( display: inline; ) #inline- list ul, #inline-list li ( display: inline; margin: 0; padding: 0; color: #339; font-weight: bold; )

  All code is placed in

  . There is a paragraph, then a standard UL listing, and then another paragraph. The UL list has been edited so that each item is followed by a comma and the last item is followed by a period.

  The result looks like this (the list is highlighted in blue):

  Just like in the bullet example above, we can use CSS to automatically generate commas and periods. If your visitors only use Opera and Gecko browsers, you have nothing to worry about. The style rules will look like this:

  #inline-list-gen ul li:after ( content: ", "; ) #inline-list-gen ul li.last:after ( content: "."; )

  Here we use the :after pseudo-element to add a comma at the end of each list item, and add a period using class="last". The result will be like this (remember, it only works in Opera or Mozilla/Netscape):

  Navigation

  As I said at the very beginning, the menus of links that we see on every site should be designed as lists, which is what they essentially are. Since we don't want to see this list the way the default browser displays it, we'll use CSS to make some cosmetic changes. We already know that lists can be specifically displayed horizontally (in one line), and not just vertically (as they are displayed by default). With the help of styles, markers can be removed, and you have a wide range of options on how to visually separate one list item from another.

  Here are examples of horizontal lists placed in the same base DIV with the following rules.

  The two examples below use the same UL only without the long text in the last paragraph. An additional class has also been added that allows you to separately work with one of the LIs in the list.

  Borders

  Symbol | often used to indicate different choices. It's natural to use it on a menu. Let's simulate this symbol using the boundaries of LI.

  #pipe ul ( margin-left: 0; padding-left: 0; display: inline; ) #pipe ul li ( margin-left: 0; padding: 3px 15px; border-left: 1px solid #000; list-style: none; display: inline; ) #pipe ul li.first ( margin-left: 0; border-left: none; list-style: none; display: inline; )

  The rules can be modified to make the list look like bookmarks:

  #tabs ul ( margin-left: 0; padding-left: 0; display: inline; ) #tabs ul li ( margin-left: 0; margin-bottom: 0; padding: 2px 15px 5px; border: 1px solid #000 ; list-style: none; display: inline; ) #tabs ul li.here ( border-bottom: 1px solid #ffc; list-style: none; display: inline; )

  Note: This technique was proposed by Randal Rust and later improved by subscribers to the css-discuss mailing list

  Chain links

  Another type of link that is usually located horizontally on a web page is the familiar breadcrumb links. These links clearly show where you are now in the site hierarchy - your entire path from home page to the current section or page. If you really want to make your page's code semantically correct, this type of link should be styled as a series of nested lists, since each section is part of the previous section:

  • Home
    • » Products
      • » Computers
        • » Software

  as a result we get:

  Applying the following rules:

  #bread ( color: #ccc; background-color: #006; padding: 3px; margin-bottom: 25px; ) #bread ul ( margin-left: 0; padding-left: 0; display: inline; border: none; ) #bread ul li ( margin-left: 0; padding-left: 2px; border: none; list-style: none; display: inline; )

  we get this:

  Again, the """ character (or any other suitable character) can be generated automatically using the :before pseudo-element in combination with the class="first" class so that the first LI item does not have this character.

  #bread-gen ul li:before ( content: "020 020 020 0BB 020"; color: #ff9; ) #bread-gen ul li.first:before ( content: " "; )

  Final result:

  World of realities

  I'll finish my article real example, which uses the trick described above. We'll take a standard UL list with links and create a dynamic menu with rolling effects. To create a rolling effect, visual styles will be applied to the A elements, and the UL and LI elements will serve only as a structural framework.

  This menu is actually a response to a question asked by Michael Efford on the css-discuss mailing list. Michael created the exact same menu using tables, graphics, and JavaScript. He then asked on the mailing list if the same thing could be achieved using CSS.

  • Home
  • Hidden Cameras
  • CCTV Cameras
  • Employee Theft
  • Helpful Hints
  • F.A.Q
  • About Us
  • Contact Us

  Let us look at the style sheet rule by rule, and I will explain why each of them is needed.

  #button ( width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica , Arial, sans-serif; background-color: #90bade;

  The first rule is for the #button DIV. It defines how much space the menu will take up and creates context so we can control the behavior of links and list items. I preferred to make the menu flexible and dependent on browser settings, so (almost) all values ​​are specified in "em"s. Including menu width. The black border was taken from Michael's original design. The large bottom padding of the menu is made so that you can see the background of the DIV. Again, this was done to replicate the original design. The bottom margin (margin) is used to separate the menu from what follows it. All colors are taken from the original design.

  #button ul ( list-style: none; margin: 0; padding: 0; border: none; ) #button li ( border-bottom: 1px solid #90bade; margin: 0; )

  Here I determined what the list should look like. Since all our list items are links, and the rolling effect is only available for links so far, I intentionally removed all stylistic rules from the lists. I just added a one pixel wide border whose color matches the background color of the #button DIV. This border serves as a separator between menu items. The original design used a separate image for this.

  #button li a ( display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration : none; width: 100%; ) html>body #button li a ( width: auto; ) #button li a:hover ( border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color : #2586d7; color: #fff;

  Finally, I got to the links. The original design had borders of 10 pixels each on the left and right. These borders changed color along with the background when hovering the mouse. This behavior is quite easy to achieve using the :hover pseudo-class, so the border and background color changing effect is applied to the elements .

  Here I used one trick: so that the behavior of the links extended to the entire block (width and height), I assigned them the rule display: block;. This worked in all browsers except IE for Windows. If you explicitly set the width to 100%, IE for Windows will understand everything. But you get problems in IE5 for Mac and Netscape/Mozilla browsers. So I cheated: using the child selector ">" I set the width to "auto". Since IE for Windows does not understand child selectors, it ignores this rule. IE5 for Mac, Opera and Netscape/Mozilla understand this rule, and everyone is happy.

  The rule for the pseudo-class:hover changes the color of the background and borders when the mouse hovers over a link.

  All style rules and list (1kb of code) replaced approximately 5kb of JavaScript and nested tables, not to mention approximately 8kb graphic files, used to create the rolling effect. In addition, the markup has become more readable and easier to update, since you do not need to create new images if the name of a menu changes. You just need to change the text. You can view the final version of the menu on the Asset Surveillance website.

  Tip of the iceberg

  Believe it or not, we've only scratched the surface of lists and what you can do with them using CSS. I'm not saying that all the techniques outlined here are the height of perfection, but I really hope that this article will change your attitude towards CSS and draw your attention to the idea of ​​structural layout.

  CSS list properties allow you to:

  • Set different bullet points for ordered lists
  • Set different bullet points for unordered lists
  • Set an image as a list item marker

  List

  There are two types of lists in HTML:

  • unordered lists - list items are marked with markers
  • ordered lists - list items are marked with numbers or letters

  With the help of CSS, lists can be styled in a better way and images can be used as bullet points for list items.

  Various List Item Markers

  The bullet type for a list item is specified using the list-style-type property:

  Some list-style-type property values ​​are for unordered lists, and some are for ordered lists.

  Image as a List Item Marker

  To specify an image as a list item marker, use the list-style-image property:

  The example above does not display the same in all browsers. IE and Opera will display the image marker slightly higher than Firefox, Chrome, and Safari.

  If you want the marker image to be placed the same in all browsers, a cross-browser solution is explained below.

  Cross-browser Solution

  The following example renders a marker image the same in all browsers:

  Example explanation:

  • For ul:
    • Setting list-style-type to none - to remove the list item marker
    • Setting padding and margin properties to 0px (for cross-browser compatibility)
  • For li:
    • Installation URLs for the image, and the value no-repeat (so that the image is displayed only once)
    • Positioning the image in the desired location (left by 0px and down by 5px)
    • Setting left indentation for text in a list

  List - Shorthand (Abbreviated) property

  You can also specify all the list properties in one single property. This is called the shorthand (or shorthand) property.

  The shorthand property for lists is the list-style property:

  When using the shorthand property, the order of values ​​is:

  • list-style-type
  • list-style-position (see explanation below - in the table CSS properties)
  • list-style-image

  It doesn't matter if one of the values ​​above is missing, as long as all other values ​​are in the order specified.

  For lists, the creation of which using HTML is described here, the following CSS rules are provided.

  list-style-type

  Specifies a bullet or list numbering instead of the type attribute in the HTML code. Property values ​​for bulleted lists can be:

  • disk- circle, set by default.
  • circle- circle.
  • square- square.

  For numbered lists, the property is usually assigned the following values:

  • decimal- Arabic numerals, default value.
  • lower-roman- small Roman numerals.
  • upper-roman- capital Roman numerals.
  • lower-alpha- lowercase Latin letters.
  • upper-alpha- capital Latin letters.

  Also, for any list type, the list-style-type property can be set to none, which will remove the marker altogether.

  Other values ​​are available for numbered lists, such as cjk-ideographic sets ideographic numbering, Armenian- traditional Armenian, and decimal-leading-zero will set the numbering in Roman numerals, but with a leading zero: 01, 02, 03... 09, however in practice these and similar values ​​are used extremely rarely.

  The example below displays three lists: a numbered list with traditional Armenian numbering, a bulleted list with a circle, and a numbered list with items numbered ideographically.

  1. First point
  2. Second point
  3. Third point

  • First point
  • Second point
  • Third point

  1. First point
  2. Second point
  3. Third point

  Result.

  The color of the markers matches the color of the text in the list specified by the property color.

  list-style-image

  Allows you to set your own image as a list marker. For example, if the folder containing the list page contains the file marker.png, which you want to use, then the design code will be as follows:

  Ul ( list-style-image: url("marker.png"); )

  list-style-position

  Determines the position of the marker: either it is moved beyond the border of the list element ( list-style-position: outside), or the text wraps around it ( list-style-position: inside).

  The example below shows the difference between these values. In the first case, the marker is inside the list; in the second case, it is placed outside the list.

  • Just look at the difference between inside and outside.
  • In the case of inside, the marker fits directly into the list, without going beyond its boundaries and without interfering with the layout. The text flows around it, the marker seems to be inside.
  • The outside value moves the marker outside the list.

  As a result, the following page is created:

  

  list-style

  Allows you to shorten your code by writing all three listed properties in one line. The rules are written separated by spaces:

  Ul ( list-style: square inside; )

  Let's look at an example of a page with three lists. The first is numbered with numbers in the format 01, 02, the second is marked with a custom picture (file marker.png in the folder with the page), the marker of the third list is disabled.

  The HTML code is given below.

  1. First point
  2. Second point
  3. Third point

  • First point
  • Second point
  • Third point

  1. First point
  2. Second point
  3. Third point

  The browser will display the following page.