CODEWITHSUNDEEP
htmlindentation
BaRud
BaRud

Reputation: 3230

indent in html description

I am creating my webpage, using HTML5 (but possibly what I am asking has nothing to do with 5 spicificaly). I am trying to have a indent there, like,

<ol>
  <li> <fontspec from css>title</fontspec from css> detail about title
  </li>
  <li>..</li>
  ...
</ol>

What I want is the "detail about title" should appear in the next line (I am using br for that), and will be intended; as

1. title
     detail about title

I can have the effect using space &nbsp , but then I have to remember all the number of space I am entering, for all the page. Is there any tag in html that will do these things for me?

EDIT:

Thanks for your reply, indent is working, but as normal to <p>, this is not writing to the next line, but taking one line extra gap. Its now coming as:

1. title

   detail about title

EDIT2

Here is the snippet from actual page:

In Html:

<ol>
      <li>
      <item>title</item><p class="indent">details about title</p>
      </li>
</ol>

in css:

item{
  font-size :120%;
  color     :#096cdb;
  font-weight : bold;
}
.indent{
  margin-left: 20px;
}

*EDIT as jukka's comment * I have realized theat item is not html tag. w3c validator is giving error, though chrome is rendering it as my intention. I tried to put h4 instead of item, but it is also taking space of next line. So, what is the way out?

EDIT:

solved the job.

I have defined in css:

dt.item{
  font-size :120%;
  color     :#096cdb;
  font-weight : bold;
}

and then did:

  <li>
  <dl>
<dt class="item">title</dt>
<dd>details about title</dd>
  </dl>
  </li>

This has the output I am looking for, and is also validated by w3c.

Upvotes: 1

Views: 5458

Answers (3)

veelen
veelen

Reputation: 1924

There is. You could use definition list;

    <ol>
        <li>
            <dl>
                <dt><fontspec from css>title</fontspec from css></dt>
                <dd>detail about title</dd>
            <dl>  
        </li>
        <li>..</li>
    </ol>

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201798

Assuming that the real markup has something like

<li> <span class=title>title</span> detail about title</li>

and, for definiteness, that you wish to apply the same styling principle to all li elements, you can make the span element rendered as a block (causing line break after it) and set a negative first-line indent (text-indent property) and the corresponding positive left padding on the li elements. This means that in li elements, any lines except the first one will be indented by the amount you set. In the following example, the amount equals the size of the font:

<style>
.title { display: block; }
li { text-indent: -1em; padding-left: 1em; }
</style>

Upvotes: 1

wei2912
wei2912

Reputation: 6619

First, let's give it a class.

<p class="indent">detail about title</p>

Afterwards, we'll use CSS to set a margin to the left of the text.

.indent {
   margin-left: 20px;
}

That should give you an indent. Adjust accordingly :)

Note that by using a paragraph element, there's no need for a line break anymore.

Upvotes: 0

Related Questions