Web Design and Marketing Solutions

Using the <ul> and <ol> tags with or without the type attribute set.
Using CSS styles by specifying a class attribute to the <ul> or <ol> tags. The bullet type can be either the regular HTML types or bullet images.
Using Tables and image bullets, lists can be created within small areas. For example take a look at the related links in the left menu. Notice how image bullets are used for listing out the Fireworks Tips.

Bullet Type	HTML Code	Example
Default (disc)	<ul><li>List Item 1</li></ul>	List Item 1
Circle	<ul type=”circle”><li>List Item 1</li></ul>	List Item 1
Lower Roman	<ol type=”i”><li>List Item 1</li></ol>	List Item 1
Lower Alpha	<ol type=”a”><li>List Item 1</li></ol>	List Item 1

Create a CSS style called bullet by using the HTML code below or by using Dreamweaver.

HTML Code:

<ul class=”bullet”><li>List Item 1</li></ul>

Create Using Dreamweaver:

Open the CSS Styles pallet by clicking on Window > CSS Styles
Click the New CSS Style button and give the name of the style as .bullet. Define it for either only the current document or for a Style Sheet file.
In the CSS Style definition window, go to the List Category and set the type or bullet image and Save the style.
Create your list of items using the default bullet. To apply the style, select the <ul> or <ol> tag in the tag selector located at the bottom left of the Document window. Right Click and Set Class to bullet.

Change the list-style-type property to get the different bullets and the image property to give an image as the bullet.

Bullet Type	CSS Style Code	Example
Disc	.bullet {list-style-type: disc;}	List Item 1
Circle	.bullet {list-style-type: circle;}	List Item 1
Lower Roman	.bullet {list-style-type: lower-roman ;}	List Item 1
Lower Alpha	.bullet {list-style-type: lower-alpha;}	List Item 1
Image Bullet	.bullet {list-style-image: url(/images/icons/arrow.gif);}	List Item 1

For this create an image bullet and do the following:

Create a Table with each row having the same height. Now place the list items into their respective rows.
Now in front of the first item place the bullet image.
For the selected bullet image give the align property as absolute middle.
Now copy-paste the bullet in front of all the other list items and your table bullet list is ready.

Topics: Dreamweaver, HTML Codes | 1 Comment »

IDEVSPOT- TEXTADS 1.1

By admin | February 25, 2008

Sell text advertisement spots on your website. Integrated with Paypal ecommerce for hands-free.

IdevSpot - TEXTADS 1.1 | Scripts | 101.21 Kb Read the rest of this entry »

Topics: Joomla Components | 1 Comment »

« Previous Entries