SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How Can I Change the Format of <li>?

    Can somebody tell me how I can change the format for an <li> tag so just the number on the list and the first line will appear bold and in red? I tried creating a class for all li tags but it makes everything contained in the <li></li> tags bold and red. Here's what I've tried:

    li {
    font-weight: bold;
    color: red;
    }

    <li>First Step (I want this to appear bold and red along with the 1. that appears next to it)
    paragraph goes here......
    </li>
    John Saunders

  2. #2
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Naboo
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Generally, what I do is create a CSS class and apply that to the <ul> or <ol> element. The following should work:

    Code:
    .list {
        font-weight: bold;
        color: #FF0000;
    }
    You apply this class to your list, which will then make sure that all list items have the formatting you wanted.

  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Logicus,

    Thanks for your reply. The problem I am having is that I just want to make the number and the first line of the contents in the list bold. Not everything that is contained in the <li></li>, such as paragraphs.

    The code that you posted will make everything contained in the <li> bold.
    John Saunders

  4. #4
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Naboo
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My bad, I misunderstood your question completely. I have to admit I don't really have a solution for this, but I did some thinking and testing and I came up with something that seems to work.

    Just leave the style for entire list as it is now, and then add this one:

    Code:
    div {
        font-weight: normal;
        color: #000000;
    }
    Then write the code for your list as follows:

    Code:
    <ol class=list>
    <li>First step<br>
        <div>paragraph goes here......</div>
    </li>
    <li>Second step
    </ol>
    I chose a <div> as element for the paragraph out because it will not cause additional spacing above or below the text. If you use more <div> tags in the code, all you have to do is make it a class.

    I believe this should generate the look you were after.

  5. #5
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logicus
    I chose a <div> as element for the paragraph out because it will not cause additional spacing above or below the text. If you use more <div> tags in the code, all you have to do is make it a class.
    Or you could use <p> amd make it look like whatever you want. Just replace the div with a <p> and this CSS:

    Code:
    li p { margin: 0; padding: 0; }
    For this example, you are probably using the wrong HTML tags. Try this:

    Code:
    <dl>
    <dt>First step</dt>
    <dd>paragraph goes here......</dd>
    <dt>Second step</dt>
    <dd>paragraph goes here......</dd>
    </dl>
    dl = Definition List
    dt = Definition Title
    dd = Definition

    hth,
    Douglas
    Hello World


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •