CODEWITHSUNDEEP
css
René Nyffenegger
René Nyffenegger

Reputation: 40489

what is the preferred way to have text instead of bullets with css (hanging indent)

What is the preferred methon to create something like

Apples   Apples can be
         green or red or
         more text more text

Bananas  Most of the time
         bananas are yellow
         (or green, if they're
         not ripe)

Item X   Each item should be aligned
         with the previous item, and
         each text (such as this 
         sentence) should be alligned
         with the previous text.

I have tried 

.desc {
  margin-left: 140px;
  text-indent: -100px;
}

.item {
  width:100px;
}

...

<div class='desc'>
  <span class='item'>Apples</span> Apples can be green ....
</div>

But it didn't really give the result I expected (at least in Firefox).

Can someone help me here?

Thanks

René

Upvotes: 1

Views: 160

Answers (4)

Tom
Tom

Reputation: 30698

Using a two-column <table> would be a good solution here, assuming it isn't a very very long table as this loads differently from a bunch of divs or other elements.

Using a table will also leave you with the flexibility of formatting individual elements inside cells as you want, such as a bulleted list inside a <td>.

Upvotes: 0

Pekka
Pekka

Reputation: 449385

Semantically, this looks like a case for the little-known <dd> and <dt> elements.

The W3C reference has a nice example:

<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>

  <DT>Hacker
  <DD>a clever programmer

  <DT>Nerd
  <DD>technically bright but socially inept person

</DL>

However, its default styling is not exactly what you want. Check out this article: Definition lists – misused or misunderstood? it has a number of styling examples:

  • Definition list with background images
  • Definition list as boxes
  • Styling a definition list to look like a table

Upvotes: 5

Adam Kiss
Adam Kiss

Reputation: 11859

It depends on data you want to use, but semantically speaking it seems like term and it's description, so dl hops in mind ^^

dt { display: block; float: left; width: 140px; }

<dl>
  <dt>Apples</dt>
  <dd>Description to it more lines of text to show it.</dd>
  <dt>Bananas</dt>
  <dd>Description to it more lines of text to show it.</dd>
  <dt>Lemon</dt>
  <dd>Description to it more lines of text to show it.</dd>
</dl>

Upvotes: 2

Shea Daniels
Shea Daniels

Reputation: 3270

A real table wouldn't seem to be out of line here since you seem to have tabular data. In that case you would just use the normal table syntax.

Upvotes: 0

Related Questions