What's The Best Way To Get This

dv8 · 11-09-2009, 08:18 PM

You may have seen some sites that have check marks for each bullet point. A great example is this site Niche Profit Classroom

There HTML code for thsoe checkmarks is <liclass="Index_Body_Bullets">

On other sites I know they just use an image for each bullet.

What is the nicheprofit site doing, I have never seen that before and I only know the basics of website design. I only knew of the image way before.

Which way is "better"? Or does it not really matter?

Thanks.

mywebwork · 11-09-2009, 08:49 PM

They are using a style sheet and defining a list box class named "Index_Body_Bullets". This class uses an image of a checkbox.

Defining this with CSS has a number of advantages - the code is simpler and easier to read, parameters like font size and color, spacing between lines and indentations can be customized in the CSS sheet and adding new items to the list is a lot easier than if it were coded with individual graphics.

If you want to get beyond the "basics" of website design an excellent resource is the W3 Schools:

W3Schools Online Web Tutorials

Bill

llamafier · 11-09-2009, 09:42 PM

You could just use image tags for each bullet, but I would really recommend using CSS. Using CSS would probably more of a "correct" way in my opinion because you should always try to separate the appearance of your pages from the actual content as much as possible.

dv8 · 11-10-2009, 12:38 AM

Quote:

Originally Posted by mywebwork

They are using a style sheet and defining a list box class named "Index_Body_Bullets". This class uses an image of a checkbox.

Defining this with CSS has a number of advantages - the code is simpler and easier to read, parameters like font size and color, spacing between lines and indentations can be customized in the CSS sheet and adding new items to the list is a lot easier than if it were coded with individual graphics.

If you want to get beyond the "basics" of website design an excellent resource is the W3 Schools:

W3Schools Online Web Tutorials

Bill

Quote:

Originally Posted by llamafier

You could just use image tags for each bullet, but I would really recommend using CSS. Using CSS would probably more of a "correct" way in my opinion because you should always try to separate the appearance of your pages from the actual content as much as possible.

I kinda figured it was CSS.

So if I use that style sheet on my page checkmarks will come up? I would think it can't be that easy.

Forgive me if this sounds silly to any professional designers, but I know that you set the styles in the <head> section of your page and then use code in the <body> section. And I have no problem doing that kind of thing on my sites. But, it's only been to set the font of text and also to set certain border styles.

How would I use them to get the check mark? Does that site have a picture of that checkmark somewhere on their server and then you just use the code to put it anywhere you want on your page?

Thanks.

SimonFairbairn · 11-10-2009, 05:00 AM

Don't set a class for each list item, set it for the container list. 2 advantages - more efficient, and you don't have to remember to set the class attribute on each <li> you use.

HTML

Code:

<ul class='checkMarkList'>
<li>Item 1</li>
<li>Item 2</li>
</ul>

CSS

Code:

ul.checkMarkList li { background: url(images/YOURCHECKMARKIMAGE.png) no-repeat top left; padding: 0 0 40px 0; margin: 10px 0; }

What this is saying is "Find the <ul> list with the class named checMarkList and then apply these styles to every one of the <li>s contained within it".

You'll need to adjust the padding and margin to fit the image.

Calling Stylesheets

To call an external stylesheet, but this between your <head> </head> tags:

Code:

<link rel='stylesheet' type='text/css' href='YOURSTYLESHEET.css' media='screen' />

BUT if you are only styling this one unordered list, then inline styles is the way to go.

There is no point in adding an extra HTTP request just for one style declaration. Very inefficient.

To use inline styles, put your CSS declarations between style tags like so:

Code:

<style type="text/css">
ul.checkMarkList li { background: url(images/YOURCHECKMARKIMAGE.png) no-repeat top left; padding: 0 0 40px 0; margin: 10px 0; }
</style>

Dump all of this between your <head> </head> tags and you'll be set. Technically, you can put this anywhere before the list, but it's cleaner to put it in the <head>.

Good luck!

trumpetblast · 11-10-2009, 10:35 AM

Quote:

Originally Posted by dv8

So if I use that style sheet on my page checkmarks will come up? I would think it can't be that easy.

<snip>

How would I use them to get the check mark? Does that site have a picture of that checkmark somewhere on their server and then you just use the code to put it anywhere you want on your page?

Just to be clear, you would need to store that check mark image file (or any check mark image file for that matter, if you find one you like better) on your server, and then call it with your CSS file. Just using that site's CSS file won't work because you still need the image itself.

dv8 · 11-11-2009, 01:22 AM

Cool, thanks to everyone who posted. Appreciate the help.

LazyMogul.com · 11-11-2009, 11:03 AM

You can use css, but you just add a simple IMG tag with the image in front the line. It's not going to look as hot but it will get the job done, if you're a beginner.

-C

11-09-2009, 08:18 PM	#1
dv8 HyperActive Warrior War Room Member Join Date: Nov 2007 Location: USA Posts: 418 Thanks: 33 Thanked 72 Times in 30 Posts	What's The Best Way To Get This You may have seen some sites that have check marks for each bullet point. A great example is this site Niche Profit Classroom There HTML code for thsoe checkmarks is <liclass="Index_Body_Bullets"> On other sites I know they just use an image for each bullet. What is the nicheprofit site doing, I have never seen that before and I only know the basics of website design. I only knew of the image way before. Which way is "better"? Or does it not really matter? Thanks.

11-09-2009, 08:49 PM	#2
mywebwork Senior Warrior Member War Room Member Join Date: Sep 2008 Location: Honolulu, Hawaii, USA & Montreal Canada Posts: 2,218 Blog Entries: 1 Thanks: 759 Thanked 724 Times in 505 Posts	Re: What's The Best Way To Get This They are using a style sheet and defining a list box class named "Index_Body_Bullets". This class uses an image of a checkbox. Defining this with CSS has a number of advantages - the code is simpler and easier to read, parameters like font size and color, spacing between lines and indentations can be customized in the CSS sheet and adding new items to the list is a lot easier than if it were coded with individual graphics. If you want to get beyond the "basics" of website design an excellent resource is the W3 Schools: W3Schools Online Web Tutorials Bill

11-09-2009, 09:42 PM	#3
llamafier Active Warrior War Room Member Join Date: Nov 2009 Location: Seattle, WA, USA Posts: 35 Thanks: 6 Thanked 0 Times in 0 Posts	Re: What's The Best Way To Get This You could just use image tags for each bullet, but I would really recommend using CSS. Using CSS would probably more of a "correct" way in my opinion because you should always try to separate the appearance of your pages from the actual content as much as possible.

11-10-2009, 05:00 AM	#5
SimonFairbairn Warrior Member Join Date: Oct 2009 Location: Manchester, UK Posts: 21 Thanks: 1 Thanked 2 Times in 2 Posts Social Networking	Re: What's The Best Way To Get This Don't set a class for each list item, set it for the container list. 2 advantages - more efficient, and you don't have to remember to set the class attribute on each <li> you use. HTML Code: <ul class='checkMarkList'> <li>Item 1</li> <li>Item 2</li> </ul> CSS Code: ul.checkMarkList li { background: url(images/YOURCHECKMARKIMAGE.png) no-repeat top left; padding: 0 0 40px 0; margin: 10px 0; } What this is saying is "Find the <ul> list with the class named checMarkList and then apply these styles to every one of the <li>s contained within it". You'll need to adjust the padding and margin to fit the image. Calling Stylesheets To call an external stylesheet, but this between your <head> </head> tags: Code: <link rel='stylesheet' type='text/css' href='YOURSTYLESHEET.css' media='screen' /> BUT if you are only styling this one unordered list, then inline styles is the way to go. There is no point in adding an extra HTTP request just for one style declaration. Very inefficient. To use inline styles, put your CSS declarations between style tags like so: Code: <style type="text/css"> ul.checkMarkList li { background: url(images/YOURCHECKMARKIMAGE.png) no-repeat top left; padding: 0 0 40px 0; margin: 10px 0; } </style> Dump all of this between your <head> </head> tags and you'll be set. Technically, you can put this anywhere before the list, but it's cleaner to put it in the <head>. Good luck!
	Create stunning InfoProducts mini-sites in under 10 minutes with our amazing FREE WordPress theme: http://www.infoproductstheme.com

11-11-2009, 01:22 AM	#7
dv8 HyperActive Warrior War Room Member Join Date: Nov 2007 Location: USA Posts: 418 Thanks: 33 Thanked 72 Times in 30 Posts	Re: What's The Best Way To Get This Cool, thanks to everyone who posted. Appreciate the help.

11-11-2009, 11:03 AM	#8
LazyMogul.com Lazy Mogul Join Date: Sep 2009 Posts: 22 Thanks: 0 Thanked 1 Time in 1 Post	Re: What's The Best Way To Get This You can use css, but you just add a simple IMG tag with the image in front the line. It's not going to look as hot but it will get the job done, if you're a beginner. -C