How to style your html bulleted list style. Examples of stylish styling of ul li CSS lists. Using before and first-child together
The article presents several ways that allow you to set a specific marker for an unordered list, and also indicates their advantages and disadvantages
If you analyze any site, you can find the fact that the content very often contains lists of various kinds: menus, list of products, etc. In HTML code, a tag is responsible for a numbered list, and a bulleted one -.
It is also worth noting the fact that in practice bulleted lists are much more common, but at the same time they have one small drawback. The marker in the list is displayed differently depending on the browser used. This is a problem for the serious designer.
To eliminate this negative effect, you need to cancel the marker display using the list-style property:
ol, ul (list- style: none;)
This starts the formation of a list with unique markers and icons. Below are the most common ways to represent list item icons that are unique and the same across browsers.
Markers through pictures
The most common and easiest way to specify a marker for a list is to use the background image (the background property). The method relies on specifying the background image for the list items in the style sheet, and inner padding (padding property), which will reserve space for the new marker. Below is a sample code:
ul (list- style: none;) li (background: url (path- to- image) no- repeat; padding- left: 20px;)
This method pleases with its uniqueness, as it allows you to set absolutely any marker in the form of a picture. Below is how our code will look in the browser:
home positive side this method is 100% cross-browser compatible, but despite this, there is a small drawback. Using a picture is an additional call to the server.
Markers with before
There is an option when you can do without a picture, if the design conditions allow it. This is very often allowed in the design of the main content, when the list is marked with the simplest elements, such as a square () or an arrow (→). Thus, we have come to the fact that any suitable special character can act as a marker.
Further, the question arises of how to insert special characters into list items. Naturally not by hand, otherwise it would be a very lengthy and tedious process, plus everything else and laborious. To get out of this situation, the pseudo-element will help us before, the application of which is bound to a specific selector, which allows us to automate our process of assigning tokens from special characters. This solution is suitable for most browsers, taking into account the fact that for IE, it will be registered expression.
Below is an example of code that generates an abbreviated bulleted list:
li (this. innerHTML \u003d "-" + this. innerHTML) / * IE hack * /) li: before (content: " \201 3" ; }
In practice, we get the following picture:
Let me remind you that in real conditions, hacks are connected with conditional comments.
When using this method, the main thing is to know the encoding of the required icon. It is also worth noting that special characters for expression are written with a numeric combination or mnemonic code. As for the content property, in this case a slash is put first, and then the hexadecimal code is written.
Using insertAdjacentHTML
The above method does not always work correctly in the legendary IE (despite the hack). More precisely, the "crutches" for this browser are not fully finalized. A more effective method is based on insertAdjacentHTML, below is the code for this method:
li ( // z-index: expression (runtimeStyle.zIndex \u003d 1, insertAdjacentHTML ("afterBegin", "-")); }
Markers drawn with CSS properties
Some square markers can be drawn using some CSS properties. For example, a square with a colored fill is drawn through the background-color property, and a square in the form of a border is drawn through the border (by the way, a square with a fill can be drawn in this way). An example of writing in a CSS file:
li ( // z-index: expression (runtimeStyle.zIndex \u003d 1, this. innerHTML \u003d "" + this. innerHTML) / * hack for ue6 and 7 * / ) li: before,. listMarkerBackColor (background- color: # 539127; width: 7px; height: 7px; content: ""; float: left; margin: 6px 6px 0 0; overflow: hidden;) html. listMarkerBackColor (margin- right: 1px; / * fix a small jamb in IE6 * / }
Thus, a marker drawn with CSS properties will look like this in practice:
Using before and first-child together
This method is often used when decorating bread crumbs on the site. Who does not know what this is about, look at the example below
In this case, each link is separated from each other by a special character, but there should not be any special character before the first element. The pseudo-class will help us with this. first-childthat only refers to the first element of the list. In code, it should look like this
Html
< ul> < li>< a href= "#" > home < li>< a href= "#" > Blog < li>< a href= "#" > CSS < li> Valid code when using target \u003d "_blank"
li: before (content: " \21 92" ; ) li: first- child: before (content: "";)
It is also worth noting that this technique is used not only for bread crumbs, but also for ordinary bulleted lists, depending on the design task.
What browsers does it work in?
| 6.0+ | 4.0+ | 9.5+ | 3.0+ | 3.0+ | - | - |
conclusions
Summing up, we can note the fact that the use of the before pseudo-element is justified and rational in the main content, since there are no special requirements for the design of lists. This, in turn, will reduce the load on the server, in comparison with the option when a picture is used. And if you also note the fact that there can be a lot of bulleted lists in the main content, then the difference can become more significant. But the pictures are significantly better in terms of marker design decisions.
We continue to study CSS properties of various elements. And in this lesson we will talk about the design of lists. In practice, lists are used quite often, so these properties need to be remembered.
Common marker view
And the first is to set the appearance of the markers. Lists have different markers. In lessons on Html Numbered lists shows how to change markers using the attribute type ... But knowing CSS this attribute is no longer needed, since all this is done much more conveniently, thanks to the stylesheet CSS.
For demonstration, let's create a list using CSS... It doesn't really matter which one numbered list or unordered list, since using the property list-style-typet we can add markers or remove them.
Html
- Unordered list
- Unordered list
- Unordered list
- Unordered list
And so, a regular list was created, and by default, markers were created in the form of filled circles. And very often the question arises, how to remove bullets from a list?
Removing the marker from the list using the property list-style-typet and assigning a value to it none ... This is the most popular option for removing bullets from a list. And for the list we will set the same property.
Ul (list-style-type: none;)
Now, if we refresh the page, we will see that this property has removed markers from the list.
- none - Removes markers from the list
- circle - Marker in the form of a circle
- disc " - Marker in the form of a filled circle. Default value
- square - Marker in the form of a square
- armenian - Armenian numbering
- decimal - Number marker
- decimal-leading-zero - Numbers with "0" before the start (01, 02, 03, etc.)
- georgian - Georgian numbering
- lower-alpha - (a, b, c, d, e, etc.)
- lower-greek - (alpha, beta, gamma, etc.)
- lower-latin - (a, b, c, d, e, etc.)
- Iower-roman - (i, ii, iii, iv, v, etc.)
- upper-alpha - (A, B, C, D, E, etc.)
- upper-latin - (A, B, C, D, E, etc.)
- upper-roman - (I, II, III, IV, V, etc.)
- inherit - The value must be inherited from the parent element
These are all kinds of bullets for lists. The first four types are the most common, the rest are rarely used.
Well, for example, let's select and set a marker in the form of large Roman numerals. This is done simply: in the place of meaning none put the name of our marker upper-roman .
Ul (list-style-type: upper-roman;)
Refreshing the page reveals large Roman numerals in bullet-style lists. In this way, you can change the appearance of list markers by setting desired view through property list-style-type .
Image marker
The second, rather important point, and a frequently used marker is an image in the form of a marker. It is often necessary to use a marker in the form beautiful picture and conventional options markers submitted CSS unsuitable. For this, images are used. And this is done using a special property called list-style-image ... This will indicate to the browser that we will have a picture as a marker.
Take any picture on the Internet in size (15px x 15px)which you plan to use as a marker and place it in the previously created folder with pictures images... After that, the property remains list-style-image specify the path to the picture and the browser will substitute the picture instead of the marker.
IN CSS the path is indicated with keyword url () ... Specify the path to the picture in brackets ../images/ Image name.jpg , relative to the stylesheet.
That is, what does it mean in relation to the stylesheet? Our stylesheet is a file style.css , lies in the directory CSS, and the picture is in the directory images... This means that the browser needs to tell the browser to exit the directory first. CSS, this is done like this: ../ , and then go to the directory with the picture images and only then find the desired picture.
Ul (list-style-image: url (../ images / Name of the marker image.jpg);)
If you specified the correct path to the picture, the browser will load your picture instead of the usual markers.
When using a picture as a marker, you need to know one more property that is responsible for the position of the picture marker. To see how this property works, we let's make a frame red for all elements
Ul li (border: 2px solid # ff0000;)
Now, if you look, then your picture marker is outside the list item, the same frame that we created above. Therefore, there are times when you need the marker to be inside the list item. For this, there is a property list-style-position which is initially set to outside , that is, set markers outside the element.
To embed a marker inside an element, use the value inside ... Now, if you set this property to value inside , then the marker will be inside the list item and the red frame clearly shows us this.
Ul (list-style-image: url (../ images / Name of the marker image.jpg); list-style-position: inside;) ul li (border: 2px solid # ff0000;)
This is how these three properties work. There is also an abbreviated notation that combines all these properties.
That is, the property is specified list-style and then, in order, the values \u200b\u200bof the marker type, marker position and, if necessary, the path to the picture, which will be the marker. And, we get the following picture:
Ul (list-style: inside url (../ images / Name of the marker image.jpg);)
This is how a short version of the rules related to appearance lists. This entry says that the marker should be inside the element, and the marker will be the same picture
That's all with lists, but take a little more time with lists, but practice yourself with the installation of various markers, feel how it all works. IN demo options for marker settings will be shown, where you can, by comparison, check the correctness of your work.
Today, there is practically no site that does not use HTML lists (
- represents an ordered list,
- Home
- Blog
- About
- Contact
- Java
- .NET
- Toronto2004
- Beijing2008
- London2012
- Rio de janeiro2016
- Google
- Picasa
- Feedburner
- Youtube
- Microsoft
- Corel Corporation
- Zignals
- ByteTaxi
- Yahoo!
- Xoopit
- BuzzTracker
- MyBlogLog
- Lorem ipsum dolor sit amet, ...
Fusce sit amet ... - Aenean placerat lectus tristique ...
Vivamus interdum ... - Mauris eget sapien arcu, vitae ...
Phasellus neque risus ... - Phasellus feugiat lacus ...
Duis rhoncus ... - First inline item
- Second inline item
- Third inline item
- Fourth inline item
- Home
- Blog
- About
- Contact
- as shown below.
- First point
- Second point
- Third point
The end tag must be present in the list.
- Cheburashka
- Crocodile Gena
- Shapoklyak
- Rat Larissa
- First
- Second
- Third
- First
- Second
- Third
- First
- Second
- Third
- change in religious belief (optional: Buddhism, Confucianism, Hinduism). Special offer - Judaism and Islam together;
- a change in belief in the infallibility of your favorite party;
- the belief that aliens exist;
- preference for the political system as the best of its kind (optional: feudalism, socialism, communism, capitalism).
- Cheburashka
- Crocodile Gena
- Shapoklyak
- Cheburashka
- Crocodile Gena
- Shapoklyak
- - unordered list). In this tutorial, I'll show you 8 great ways to make ordinary boring html lists attractive. We'll just add a few simple CSS techniques and our lists will not only look awesome, but also some extra features.
Now check out the demo to see what we are going to create.
Looks much better, don't they? And you too can create such lists with simple CSS code. Do you want to know how? Read on!
List # 1: Simple Navigation System
Lists are most often used when creating navigation menus. This HTML / CSS example code allows you to create a simple, even a bit modest, but attractive navigation system.
/ * LIST # 1 * / # list1 () # list1 ul (list-style: none; text-align: center; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 10px 0; ) # list1 ul li (display: inline; text-transform: uppercase; padding: 0 10px; letter-spacing: 10px;) # list1 ul li a (text-decoration: none; color: #eee;) # list1 ul li a: hover (text-decoration: underline;)
List # 2: Use a different font for numbering
The problem with using a list is that it merges into the text. And the numbers are always the same color as the text.
But add a little styling and you forget about the above limitations and your lists will become much more attractive. Here's how it's done:
The Netherlands is a country in ...
The United States of America is a federal constitutional ...
The philippines officially known as the Republic ...
The united kingdom of Great Britain and ...
/ * LIST # 2 * / # list2 (width: 320px;) # list2 ol (font-style: italic; font-family: Georgia, Times, serif; font-size: 24px; color: # bfe1f1;) # list2 ol li () # list2 ol li p (padding: 8px; font-style: normal; font-family: Arial; font-size: 13px; color: #eee; border-left: 1px solid # 999;) # list2 ol li p em (display: block;)
List # 3: Image markers
You can easily change the appearance of unordered list markers by specifying one of the standard values, but you can also use images as markers. This solution will help make your lists more original. And here is the code:
/ * LIST # 3 * / # list3 () # list3 ul (list-style-image: url ("../ images / arrow.png"); color: #eee; font-size: 18px;) # list3 ul li (line-height: 30px;)
List # 4: iPhone-style
This list is taken from the article the iPhone Contacts App, created with cSS help and jQuery. This is how lists look on an iPhone. Very attractive, isn't it? Do you want this on your site?
/ * LIST # 4 * / # list4 (width: 320px; font-family: Georgia, Times, serif; font-size: 15px;) # list4 ul (list-style: none;) # list4 ul li () # list4 ul li a (display: block; text-decoration: none; color: # 000000; background-color: #FFFFFF; line-height: 30px; border-bottom-style: solid; border-bottom-width: 1px; border- bottom-color: #CCCCCC; padding-left: 10px; cursor: pointer;) # list4 ul li a: hover (color: #FFFFFF; background-image: url (../ images / hover.png); background-repeat : repeat-x;) # list4 ul li a strong (margin-right: 10px;)
List # 5: Nested Lists
Nested lists can be incredibly useful and look pretty. By modifying the third technique (Marker images), we can create an "expanded list". Of course, not without the help of jQuery:
/ * LIST # 5 * / # list5 (color: #eee;) # list5 ol (font-size: 18px;) # list5 ol li () # list5 ol li ol (list-style-image: url (".. /images/nested.png "); padding: 5px 0 5px 18px; font-size: 15px;) # list5 ol li ol li (color: # bfe1f1; height: 15px; margin-left: 10px;)
List # 6: Roman numbering + multiline type
By default, the list uses the standard numbering (1, 2, 3, 4, etc.). By changing the value in CSS, you can set a different type of numbering, for example, Roman.
Also, by default, numbering and bullets are located outside the list (a great example of this is our list at number 2). But this is fixable, you just need to change the value of the list-style-position property to inside.
/ * LIST # 6 * / # list6 (font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;) # list6 ol (list-style-type: upper -roman; color: #eee; font-size: 14px; list-style-position: inside;) # list6 ol li ()
List # 7: Linear list with comma separated items
Typically, lists are used to display the amount of something and are displayed in a bar. But what if you want a linear list? This is achieved by changing the value of the display property to inline. But if you suddenly need to embed the list into the text, then according to the rules, the paragraphs of the list should be separated by a comma. How can this be achieved? Or, simply, using the: after element of the symbolic code.
/ * LIST # 7 * / # list7 () # list7 ul (color: #eee; font-size: 18px; font-family: Georgia, Times, serif;) # list7 ul li (display: inline;) # list7 ul li: after (content: ",";) # list7 ul li.last: after (content: ".";)
List # 8: Rotating Navigation Menu
Here's the last technique that requires CSS3 to work (only supported latest versions Firefox, Safari and Chrome). When you hover the cursor over one of the block elements, the effect is activated - rotation. Of course not the most convenient waybut very beautiful.
/ * LIST # 8 * / # list8 () # list8 ul (list-style: none;) # list8 ul li (font-family: Georgia, serif, Times; font-size: 18px;) # list8 ul li a ( display: block; width: 300px; height: 28px; background-color: # 333; border-left: 5px solid # 222; border-right: 5px solid # 222; padding-left: 10px; text-decoration: none; color : # bfe1f1;) # list8 ul li a: hover (-moz-transform: rotate (-5deg); -moz-box-shadow: 10px 10px 20px # 000000; -webkit-transform: rotate (-5deg); -webkit -box-shadow: 10px 10px 20px # 000000; transform: rotate (-5deg); box-shadow: 10px 10px 20px # 000000;)
Conclusion
As you can see, it's really possible to create unique things from a regular html list. And all this is done by CSS. I am very glad if you have learned a lot of interesting things for yourself.
A bulleted list is defined by adding a small marker, usually a filled circle, in front of each list item. The list itself is formed using a container
- , and each list item starts with a tag
Example 11.1 shows the HTML to add bulleted list on the web page.
Example 11.1. Create a bulleted list
The result of this example is shown in Fig. 11.1.
Figure: 11.1. Bulleted list view
Notice the padding at the top, bottom, and left of the list. Such indents are added automatically.
Markers can be of three types: circle (default), circle, and square. The type attribute of the tag is used to select the marker style
- ... Allowable values \u200b\u200bare given in table. 11.1
| List type | HTML code | Example |
|---|---|---|
| List with bullets in the form of a circle | ||
| List with bullets in the form of a circle | ||
| List with square markers |
The type of markers may vary slightly in different browsers, as well as when changing the font and text size.
The creation of a list with square markers is shown in Example 11.2.
Example 11.2. Marker type
Changing beliefs
The result of this example is shown in Fig. 11.2.
A task
Change the appearance of markers in the list and replace them with a different symbol.
Decision
With HTML or CSS, you can set one of three types of markers: disc (point), circle (circle), square (square). You need to add these values \u200b\u200bto the list-style-type style property, which is specified for the UL or LI selector (example 1).
Example 1. Standard markers
HTML5 CSS 2.1 IE Cr Op Sa Fx
IN this example a square is used as markers (Fig. 1).
Figure: 1. Type of markers
Selecting and setting your own marker symbol happens in a very peculiar way, through the: before pseudo-element. First, remove the bullets from the list altogether by setting the list-style-type style property to none, and then add the: before pseudo-element to the LI selector. The actual display of the symbol is carried out using the content property, the value of which is the desired text or symbol (example 2).
Example 2. Using: before and content
HTML5 CSS 2.1 IE Cr Op Sa Fx
In this example, the default marker is hidden, and a symbol is added instead (Fig. 2).
Figure: 2. Symbol markers
To set some tricky character as a marker, you can use the program Microsoft Word or symbol table, it is standard program included with Windows. Code encoding must be UTF-8.
