Bulleted lists. I want to change the marker to a different symbol. How to do it? An example of nicely styling a bulleted list in css
The following CSS rules are provided for the lists that are created using HTML tools here.
list-style-type
Specifies bullet or numbering for lists instead of the type attribute in HTML code. Property values for bulleted lists can be:
- disk- circle, set by default.
- circle- a circle.
- square- square.
For numbered lists, the property is usually assigned values:
- decimal- Arabic numerals, the value is set by default.
- lower-roman- small Roman numerals.
- upper-roman- capital Roman numerals.
- lower-alpha- lowercase Latin letters.
- upper-alpha- uppercase 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, for example, 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, but in practice these and similar values are used extremely rarely.
The example below displays three lists: numbered with traditional Armenian numbering, marked with a circle, and numbered, in which elements are ideographically numbered.
- First point
- Second point
- Third point
- First point
- Second point
- Third point
- First point
- Second point
- 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 with the page containing the list 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 outside the border of the list item ( 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 moved outside of it.
- Just look at the difference between inside and outside.
- In the case of inside, the marker directly fits into the list, without going beyond its limits and without interfering with the layout. The text flows around it, the marker seems to be inside.
- The outside value moves the marker out of the list.
As a result, the following page is created:
list-style
Allows you to shorten your code by writing all three listed properties on one line. The rules are written with a space:
Ul (list-style: square inside;)
Consider 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 drawing (file marker.png in the folder with the page), the marker of the third list is disabled.
The HTML code is shown below.
- First point
- Second point
- Third point
- First point
- Second point
- Third point
- First point
- Second point
- Third point
The browser will display the next page.
I remember how in July 1999 I educated people in mail lists about the delights of style layout. Since then, little has changed.
However, something has changed. Changed my view of CSS and (X) HTML, which acts as a framework for styles. For example, I found that most of the pages contain a navigation bar. Most often it is formatted as a simple text string with links separated by tags.
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 in front of every link in the menu. Earlier, I talked about some techniques for page layout using CSS. In one of those tricks, we learned how to display lists in a string, rather than vertically.
In this article, I'll show you how you can tame these clumsy and clumsy lists with CSS. Stop wandering around your web pages. Now is your time to tell him how to behave.
Cooking the arena
I chose simple, unnumbered lists for training. All the CSS rules mentioned here can be applied to numbered lists with the same result. All examples (except where otherwise noted) use the following list:
- 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 a separate element
Without any additional styling rules, the list in the base DIV would look like this:
Positioning
Sometimes the default indentation in the list may be too large for your design. But changing only the margin or padding property for an element
- does not work for all browsers. In order for the list to move completely to the left, you need to change both the margin and padding properties. This is due to the fact that Internet Explorer and Opera create the left padding of the list using the left margin, while Mozilla / Netscape use left padding for this.
- ... CSS now allows an image to be used as a marker. If the browser does not support this CSS feature (or does not support graphics), the default marker (or whichever 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, add the following line to the rules:
list-style-type: disc;
The images you have selected as a marker can "crawl" out 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 so happens that you have a list, but you do not need bullets, or you want to use some other character as a bullet. Again, CSS is here to help you. Add the rule list-style: none; and make the elements
- "Hanging". 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 be set to 0 and the other to be 1em. By changing this property you can adjust the size of the indentation from your marker to an acceptable one. A negative value in the text-indent property causes the first line of each list item to be shifted to the left and "overlaid" above the rest of the text.
Our next list will be usual, only the standard HML-character will be used as a marker, for example ", which corresponds to the closing typographic quote:".
It should be noted here that Netscape6 / 7 / Mozilla (and other Gecko-derived browsers) and Opera can generate content using the: before pseudo-element from the CSS2 standard. Let's use this function and automatically generate a "symbol" or some other symbol as a marker. Thus, we will not need to enter it manually into each LI element. If you are using Opera or the Gecko family of browsers, the following CSS will create the same list as the previous one, without adding anything to the list itself.
# custom-gen ul li: before (content: "0BB 020";)
The content property can be set to a text string, URL, or something else, including special characters. If you opted for a symbol of the "type", you must write the hexadecimal code of this symbol in the property. The right typographic quotation mark is 0BB (another character 020 is a space, added for aesthetic reasons). The end result is shown below (see with Opera or Mozilla / Netscape):
Lining up the list
Who said that lists should be vertically aligned with bullets 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 your links to run horizontally along the top of the page.
This applies not only to the list of links. You may need to list the list multiple times within a paragraph (for example, a list of books). Structurally, it's a list, but before, if you did that, this list would break your paragraph. CSS comes to your rescue again!
Since this list will not appear as something separate on the page, I will not put it in the base DIV, like the previous lists. This time the markup will look like this: paragraph, list, next paragraph.
I can already hear the shouts: “Fool! We thought you were going to teach us how to put lists within a paragraph, not between two paragraphs. "
And to this I answer: “Well, yes, you are right. Unfortunately (X) HTML does not allow you to put lists inside a paragraph. However, you can do this with styles. "
First, here are the style guidelines:
# 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
... It contains a paragraph, then the standard UL listing, followed by another paragraph. The UL listing has been edited to have a comma after each item and a period after the last item.The result looks like this (the list is highlighted in blue):
As in the example above with the marker, 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 we put a period using the 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 of the menu of links that we see on every site, should be formatted as lists, which 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 specially printed horizontally (in one line), and not just vertically (as they are displayed by default). Styles can remove bullets and give you a wide range of options to visually separate one list item from another.
Here are examples of horizontal lists wrapped 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 | is often used to indicate different choices. It's natural to use it on a menu. Let's simulate this symbol using the borders at 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 trick was suggested by Randal Rust and has been 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 breadcrumb links we all know. These links show you clearly where in the site hierarchy you are now - all your way from the main page to the current section or page. If you really want to make your page 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
- »Computers
- »Products
as a result we get:
By 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 conjunction with the class =" first "class so that the first LI 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 end my article with a real-world example that uses the above trick. We'll take a standard UL listing 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 wireframe.
This menu is actually the answer to a question asked by Michael Efford on the css-discuss mailing list. Michael created exactly the same menu using tables, graphics and JavaScript. Then he asked on the mailing list if the same could be achieved with CSS.
Let's break down the style sheet rule by rule, and I'll explain what each of them is for.
#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; color: # 333;)
The first rule is for the #button DIV. It sets how much space the menu will take up and creates a context so that we can control the behavior of links and list items. I chose to make the menu flexible and browser dependent, so (almost) all values are in "em" s. Including the width of the menu. The black border was taken from Michael's original design. The big 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 is used to separate the menu from what follows. 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;)
This is where I defined how the list should look. Since all the items in the list are links, and so far only links have the rolling effect, I deliberately removed all stylistic rules from the lists. I only added a one-pixel border that matches the background color of the #button DIV. This border serves as a separator between menu items. The original design used a separate picture 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. In the original design, the left and right had borders of 10 pixels each. These borders changed their color along with the background on mouse hover. This behavior is quite easy to obtain with the: hover pseudo-class, so the effect of changing the border and background color is applied to the elements. .
Here I used one trick: in order for the behavior of links to spread across the entire block (in width and height), I assigned them the display: block; rule. This worked in all browsers except IE for Windows. If you explicitly set the width to 100%, IE for Windows will figure it out. But you get problems with 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: hover pseudo-class changes the background and border color when the mouse hovers over the link.
All of the style rules and list (1kb of code) replaced about 5kb of JavaScript and nested tables, not to mention about 8kb of graphics files used to create the rolling effect. In addition, the markup has become more readable, it is easier to update it, since you do not need to create new pictures if the name of a menu changes. You just need to change the text. You can check out the final menu on the Asset Surveillance website.
Tip of the iceberg
Believe it or not, we've just scratched the surface of lists and what you can do with them with CSS. I am not claiming 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 structured layout.
The standard form of bulleted and numbered lists is far from all the options for their presentation. Thanks to CSS, it is possible to transform such lists the way you want. There are a number of properties that you can use to customize the style for lists. Below we will look at each property separately.
List-style-type: change bullet / numbering
If you need to replace the standard markers in the form of a period or Arabic numerals with something else, you can use the list-style-type CSS property and additional values for it (see the table):
Note: only basic values are shown in the table. A more extensive list (Georgian and Armenian numbering, numbering in Roman numbers, Greek letters, etc.) is available.
An example of writing CSS code:
Ul (list-style-type: circle;)
Screenshot: Bullet / List Numbering Options
List-style-image: picture marker
In addition to the above markers, you can set your own graphic markers using the file with the required image. To do this, you need a CSS list-style-image property and a value indicating the URL of the image. An example of writing a style:
Ul (list-style-image: url (images / star.png);)
Screenshot: examples of custom graphic markers
List-style-position: position of bullets / numbering
The list-style-position CSS property, which specifies the position of bullets / numbering in relation to the text, has two values - outside and inside. The default value is outside, which means that the bullet / number is displayed as if it were separate from the list text, while with the value inside, the bullet / number is located inside the text block and wrapped around the text.
An example of writing a style is shown below:
Ul (list-style-position: inside;)
Screenshot for a better understanding of the outside and inside values
List-style: Putting it all together
Using a single CSS list-style property, you can write all of the above on one line - that is, immediately set the type of bullets / numbering and their position relative to the text. Such code will be more concise and convenient. Below are two examples of how this style is written:
/ * numbering in uppercase Latin letters inside the text block: * / ol (list-style: upper-latin inside;) / * graphic markers outside the text block: * / ul (list-style: url (images / star.png) outside; )
Task
Hide the display of markers in the list.
Solution
The list-style-type style property with a value of none is used for this purpose. It should be added to the UL or LI selector as shown in example 1.
Example 1. List without markers
HTML5 CSS 2.1 IE Cr Op Sa Fx
Removing markers from the list - North
- South
- West
- East
The result of this example is shown in Fig. 1.
Rice. 1. List without markers
Although markers are not displayed in the list, the text is still shifted to the right. To control the position of list items, this example adds the margin-left and padding-left properties to the UL selector. Two properties instead of one are required in order to show the same result in different browsers.
If you decide to change the standard lists ul and li, then this topic will interest you. Since here you will learn several original solutions. Which will certainly help you to change the standard view to a unique one, where the CSS style goes, for the design of the lists. The plus is that we will use only one class in everything, which will radically change the look. In addition to these parameters, you can specify at which number the list should start, here you can do everything yourself. The initial default for numbered lists is on the first or letter A.Starting from the basics, we will now take a closer look at the elements used to provide structure and meaning to various parts of the design. In case you don’t know, ul and li are much better options than plain text, because when the text is wrapped, especially on mobile, it is perfectly indented and does not wrap around the marker.
Lists are considered to be a great way to present information on pages because they are easy to read and look good. Many people seem to think that bullet points are small images, but in reality they are all created through fairly simple HTML code. You can nest different types of lists within each other if you like, just remember to close them correctly. You can play with the text you want in all of these list commands.
You also need to know that lists initially contain several elements:
1 ... Disordered information.
2 ... Ordered information.
3 ... Definitions.Getting started with the installation:
1. Option:
- List item
- Unique list
- Original Lists
- ZORNET.RU - For Webmaster
- Another list
CSSKsangelopan (
margin: 19px 0 0;
padding: 0;
list-style: none;
counter-reset: li;
}
.ksangelopan li (
border: 2px solid # 3575ad;
background: # d7dee4;
position: relative;
margin-bottom: 17px;
padding: 15px 9px;
}
.ksangelopan li: hover (
z-index: 1;
}
.ksangelopan li: before (
border: 2px solid # 2270b3;
position: absolute;
top: -14px;
padding: 3px 9px;
font-size: 11px;
font-weight: bold;
color: # 246eaf;
background: # f2f4f7;
counter-increment: li;
content: counter (li);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.ksangelopan li: hover: before (
background: # 2672b3;
color: # f7f9fb;
-webkit-transform: translate (-11px, 0);
-ms-transform: translate (-11px, 0);
-o-transform: translate (-11px, 0);
transform: translate (-11px, 0);
}
.ksangelopan li: after (
content: "";
position: absolute;
transition-duration: 0.3s;
-webkit-transition-property: width;
transition-property: width;
z-index: -1;
background: #FFF;
height: 100%;
left: 0;
top: 0;
width: 0;
}
.ksangelopan li: hover: after (
width: 100%;
}
This is the whole installation.2 Second option:
- List item
- Unique list
- Original Lists
- ZORNET.RU - For Webmaster
- Another list
CSSBeleduzlopamges (
margin-bottom: 8px;
padding: 0;
list-style: none;
counter-reset: li;
}
.beleduzlopamges li (
position: relative;
border: 2px solid # 195588;
background: # eff3f7;
padding: 15px 19px 15px 27px;
margin: 12px 0 12px 40px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.beleduzlopamges li: hover (
background: #FFF;
}
.beleduzlopamges li: before (
line-height: 32px;
position: absolute;
top: 4px;
left: -39px;
width: 39px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: # f9f5f5;
background: # 275b88;
counter-increment: li;
content: counter (li);
transition-duration: 0.2s;
}
.beleduzlopamges li: hover: before (
width: 46px;
}
.beleduzlopamges li: after (
position: absolute;
left: 0;
top: 4px;
content: "";
height: 0;
width: 0;
border: 16px solid transparent;
border-left-color: # 275b88;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.beleduzlopamges li: hover: after (
margin-left: 6px;
}
The center scale can be independently set to match the main style of the site.3 Third option:
- Scripts for uCoz
- Templates for uCoz
- Website design
- Styles for the site
- CSS styling
CSSNizualisanelag (
padding: 0;
list-style: none;
counter-reset: li;
}
.nizualisanelag li (
position: relative;
padding: 9px 17px 17px 25px;
margin-left: 39px;
transition-duration: 0.2s;
cursor: pointer;
font-weight: bold;
color: # 343638;
}
.nizualisanelag li: before (
border: 3px solid transparent;
line-height: 35px;
position: absolute;
top: 0;
left: -29px;
width: 41px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: # 619dce;
counter-increment: li;
content: counter (li);
transition-duration: 0.3s;
box-sizing: border-box;
}
.nizualisanelag li: hover: before (
color: # 337AB7;
}
.nizualisanelag li: after (
position: absolute;
top: 0;
left: -29px;
width: 41px;
height: 41px;
border: 5px solid # 468bd0;
border-radius: 50%;
content: "";
opacity: 0.5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nizualisanelag li: hover: after (
animation: 500ms ease-in-out 0s bounceIn;
opacity: 1;
}@keyframes bounceIn (
0% {
opacity: 0;
transform: scale3d (.3, .3, .3);
}
20% {
transform: scale3d (1.3, 1.3, 1.3);
}
40% {
transform: scale3d (.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d (1.03, 1.03, 1.03);
}
80% {
transform: scale3d (.97, .97, .97);
}
to (
opacity: 1;
transform: scale3d (1, 1, 1);
}
}
Comes with beautiful animation.4 Fourth option:
- The first element for the site
- Second element for the site
- Third element for the site
- The fourth element for the site
- The fifth element for the site
CSSPadding: 0;
list-style: none;
}
.kudezamuden li (
padding: 6px;
}
.kudezamuden li: before (
padding-right: 11px;
font-weight: bold;
color: # 4979a0;
content: "\ 2606";
transition-duration: 0.4s;
}
.kudezamuden li: hover: before (
color: # 235e90;
content: "\ 2605";
}
Similar to previous versions, only the icon itself has been changed.In general, this is a small selection of lists, will give the webmaster a beautiful list on the portal, where he himself can arrange it more, as he himself wants to see it.
If you need to put items in a numbered list instead of a bulleted list, then ordered HTML will be used here. This list is created using the ol tag. The numbering starts from one and increases by one for each subsequent ordered list item with an li tag.
- Home
In the following example, the UL element's margin-left and padding-left properties are set to 0:
Note that the markers are outside the DIV's border. 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 within the borders of the DIV, along the left edge of the DIV, set either the left-padding property or the left-margin property to "1em".
Markers
Let's say you need a list with specific markers. What have you done before? We created a table, placed a marker gif in one column and moved it up and to the right in the cell. In another column, text was placed, which should have been in the elements