8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

What's The Best Way To Get This

by dv8
7 replies
  • WEB DESIGN
    • |
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.
  • Profile picture of the author 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
    {{ DiscussionBoard.errors[1368794].message }}
  • Profile picture of the author 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.
    {{ DiscussionBoard.errors[1368880].message }}
    • Profile picture of the author dv8
      Originally Posted by mywebwork View Post

      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
      Originally Posted by llamafier View Post

      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.
      {{ DiscussionBoard.errors[1369249].message }}
      • Profile picture of the author trumpetblast
        Originally Posted by dv8 View Post

        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.
        {{ DiscussionBoard.errors[1370412].message }}
  • Profile picture of the author SimonFairbairn
    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!
    {{ DiscussionBoard.errors[1369683].message }}
  • Profile picture of the author dv8
    Cool, thanks to everyone who posted. Appreciate the help.
    {{ DiscussionBoard.errors[1372806].message }}
  • Profile picture of the author LazyMogul.com
    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
    {{ DiscussionBoard.errors[1374008].message }}

Trending Topics