• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 225
  • Last Modified:

Simple HMTL Question

Have this html code:

    <div>
        <p>
            Line 1
        </p>
        <p>
            Line 2:</p>
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
        </ul>
    </div>

that renders to this:

Line 1

Line 2:

    * Point 1 - blah
    * Point 2 - blah
    * Point 3 - blah, blah,blah, blah,blah, .............
........blah,blah


What I want it to render to is this:

Line 1

Line 2:

    * Point 1 (bold)
 (indent) blah
    * Point 2 (bold)
 (indent) blah
    * Point 3
 (indent) blah, blah, blah,blah, blah,blah, .............
........blah,blah

any idea? Thx!
0
allanau20
Asked:
allanau20
2 Solutions
 
Pratima PharandeCommented:
<div>
                        <p>
                              Line 1
                        </p>
                        <p>
                              Line 2:</p>
                        <ul>
                              <li><b>Point 1</b></li>
                                    <ul> blah</ul>
                              <li><b>Point 2</b></li>
                                    <ul> blah</ul>
                              <li><b>Point 3</b></li>
                                    <ul> blah</ul>
                        </ul>
                  </div>
0
 
Michel PlungjanIT ExpertCommented:
Change your unordered list to a data list:


<style>
dt { font-weight:bold }
</style>
<div>
  <p>Line 1</p> 
  <p>Line 2:</p>
  <dl>
    <dt>point 1</dt>
    <dd>blah</dd>

    <dt>point 2:</dt>
    <dd>Blah</dd>
  </dl>
</div>

Open in new window

0
 
Paul JacksonSoftware EngineerCommented:
<div>
        <p>
            Line 1
        </p>
        <p>
            Line 2:</p>
        <ul>
            <li><b>Point 1</b>
                <ul>
                    <li style="list-style-type:none;">blah</li>
                </ul>
            </li>
            <li><b>Point 2</b>
                <ul>
                    <li style="list-style-type:none;">blah</li>
                </ul>
            </li>
            <li><b>Point 3</b>
                <ul>
                    <li style="list-style-type:none;">blah</li>
                </ul>
            </li>
        </ul>
    </div>

Open in new window

0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
allanau20Author Commented:
sorry mplungjan; that didn't come out right.
In the spirit of this site the points shall we given to pratima_mcs.

Really appreciate both of you for helping!
0
 
allanau20Author Commented:
thanks jacko72; just missed you by a second...
0
 
Michel PlungjanIT ExpertCommented:
Here is mine with bullets - AND it is valid HTML - which the accepted answer is NOT
<style type="text/css">
dt { font-weight:bold; display: list-item; }
div { padding:10px}
</style>
<div>
  <p>Line 1:</p> 
  <p>Line 2:</p>
  <dl>
    <dt>point 1</dt>
    <dd>blah</dd>

    <dt>point 2:</dt>
    <dd>Blah</dd>

    <dt>point 3:</dt>
    <dd>blah, blah, blah,blah, blah,blah, .............
........blah,blah</dd>
  </dl>
</div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now