Friends

Tuesday, September 27, 2011

CSS lists

Tuesday, September 27, 2011  ilmu-reparasi-komputer  No comments

CSS allows you to customize the lists that can be made
with HTML.

The good news is that there are many powerful properties for doing so.

The bad news is that Netscape and Internet Explorer often support these properties in different ways. Both browsers have limitations in their support of list styles.

Netscape browsers only let you add the list CSS to <LI> tags - not just any tag.

Internet Explorer's support of CSS with relation to lists is only fully supported for browsers on the Windows platform.

In any case, be careful about using CSS for lists since it might not show the way you want it to on all browsers. However, most things won't ruin anything if the browser doesn't support it - it just shows as a normal list - so it will be okay to define lists that only work for the most widely used browser.

LIST PROPERTIES


PropertyValuesNSIE
list-style typedisc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none		4+
4+
4+
4+
4+
4+
4+
4+
 		4W
4W
4W
4W
4W
4W
4W
4W
4W
list-style image
none
url(<url>)
 		4W
4W
list-style position
outside
inside
 		4W
4W
list-style
<list-style type>
<list style position>
<list-style image>
 		4W
4W
4w


4+: Browser version 4 or newer.
4W: Browser version 4 or newer, windows only.

DEFINING STYLES FOR LINKS

As mentioned in the above table, we have four unique selectors with respect to lists. The fourth selector, list-style is an overall selector that let you define all list related styles at once.

The three basic selectors are:
list-style type
Defines the look of the bullets used in your list.

list-style image
Let's you use a custom graphic for bullets.

list-style position
Often the text in a list is longer than one line.
list-style position:outer lets the second line align with the first line. That is: the bullet is to the left of both lines.
list-style position:inner lets the second line align with the bullet.





Assigning several properties at once

Instead of using different selectors for each list-style you can specify them all at once using the list-style property.

For example:


<html>
<head>
<style type="text/css">
LI.list1 {list-style: circle outside; color:green;}
LI.list2 {list-style: square inside; color:blue}
.blacktext {color:black}
</style>
</head>

<body>

<ul>
<li class="list1"><span class="blacktext">This is one black line</span>
<li class="list1">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
</ul>
<br>
<br>
<ul>
<li class="list2"><span class="blacktext">This is one black line</span>
<li class="list2">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.

</ul>

</body>
</html>

Posted in:

0 comments:

Post a Comment

#
### ###