|
|
 |
 |
 Events
Jobs
Premium Services
Media Kit
Network Map
E-mail Offers
Vendor Solutions
Webcasts
|
|
|
[
Home | Discussion Forum | How Do I... |
Lotus Notes Intranets |
Microsoft SharePoint |
Products |
Shopping
]
Classification CSS Classification properties include the display property and the list related properties'the list related properties enable you to set different options relating to the way lists of information are presented. Display The display property sets how an element will be displayed by the browser, some values include inline, block and none'setting display to inline will cause the element to be displayed as an inline element, block will cause the element to be displayed as a block element and none will cause the element to not be displayed'the "none" value for display, is one of the most used values because of the fact that it allows designers to hide content on the page and have it displayed later via a simple script. Try It Out - The display Property <html> <head> <title>The display Property</title> </head> <body> <div> <img src="s2slogo.gif" width=100 height=100> <img src="jgblogo.gif" width=120 height=151> <img src="s2slogo.gif" width=100 height=100> </div> <div> <img src="s2slogo.gif" width=100 height=100> <img src="jgblogo.gif" width=120 height=151 style="display: none;"> <img src="s2slogo.gif" width=100 height=100> </div> </body> </html> Take a look How It Works In this example, we show you how the value of none for the display property affects the display of element on the page'the first row of images shows how the images would naturally display. In the next row, the second image has its display property set to none'since it's not displayed the image that was originally displayed in the third column takes up the space of the non-displayed image. List-style-type The list-style-type property sets the character that will be used as a marker/bullet for each list item'the values for this property include, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha and none. List-style-image If you prefer to have a custom bullet, you can use list-style-image to choose to use an image to be as the bullet for each list item. List-style-position The list-style-position property is used to set how the content of the list item will align with the list marker. If this is set to outside each list of text in the list item will be aligned with the edge of the first line of text. If set to inside, each line of text is aligned with the left edge of the list marker. List-style List-style is a shortcut property that can be used to set the following properties, list-style-type, list-style-image and list-style-position. An example of this is presented below <ul style="list-style: disc url(bullet.gif) inside"> <li>Item </ul> In this example, the list item marker will be the image bullet.gif. If this image is not found, then the disc character will be used'the list-style-position has been set to inside'this next example shows the other list properties in action. Try It Out 'the list properties <html> <head> <title>The list properties</title> </head> <body> List Style Types - Unordered <ul> <li style="list-style-type: disc;">Item 1 <li style="list-style-type: circle;">Item 2 <li style="list-style-type: square;">Item 3 <li style="list-style-type: none;">Item 4 </ul> List Style Types - ordered <ol> <li style="list-style-type: decimal;">Item 1 <li style="list-style-type: lower-roman;">Item 2 <li style="list-style-type: upper-roman;">Item 3 <li style="list-style-type: lower-alpha;">Item 4 <li style="list-style-type: upper-alpha;">Item 5 </ol> List Style Image <ul style="list-style-image: url(bullet.gif);"> <li >Item 1 <li>Item 2 </ul> List Style Position <ul style="list-style-position: outside;"> <li >Item 1<br> content <li>Item 2<br> content </ul> <ul style="list-style-position: inside;"> <li>Item 1<br> content <li>Item 2<br> content </ul> </body> </html> Take a look How It Works This example is setup to show all the different options available when creating lists with style sheets'the first list item is an unordered list'the list-style-type property for the list markers that correspond to unordered lists are disc, circle, square or none. <ul> <li style="list-style-type: disc;">Item 1 <li style="list-style-type: circle;">Item 2 <li style="list-style-type: square;">Item 3 <li style="list-style-type: none;">Item 4 </ul> The next list is an ordered list. As you can see, each list item down the list is incremented by one unit'the ordered list marker types are decimal, lower-roman, upper-roman, lower-alpha and upper-alpha. <ol> <li style="list-style-type: decimal;">Item 1 <li style="list-style-type: lower-roman;">Item 2 <li style="list-style-type: upper-roman;">Item 3 <li style="list-style-type: lower-alpha;">Item 4 <li style="list-style-type: upper-alpha;">Item 5 </ol> The third list in this example uses the list-style-image property to define a custom list item bullet'the image specified by the url() method will be used as the image for the bullet. <ul style="list-style-image: url(bullet.gif);"> <li >Item 1 <li>Item 2 </ul> In this example, the image being used is called bullet.gif. If the image is not found, the list item marker will revert to the default marker, disc. The last two lists in this example demonstrate the list-style-position property'the second last list has the value of this property set to outside; this makes the marker be placed outside the content of the list item. When the list-style-position property is set to inside, the list item marker is aligned with the content of the list item. Compare the differences by looking at the output of this example: <ul style="list-style-position: outside;"> <li >Item 1<br> content <li>Item 2<br> content </ul> <ul style="list-style-position: inside;"> <li>Item 1<br> content <li>Item 2<br> content </ul> About the Author Nana Gilbert-Baffoe is founder of the S2SNetwork'the Student-to-Student Trading Network  |
CSS Tutorial Part II -Introduction -CSS Background properties -CSS Classification properties -CSS and Printing -CSS Pseudo Classes and Elements
|
