ansaurus

Question

HTML delayed indent

Answer 1

+3 A:

If it looks like a table, and quacks like a table...

<table>
  <tr>
    <th>Tag1</th>
    <td>blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</td>
  </tr>

  <tr>
    <th>Tagbigger</th>
    <td>more blah blah blah wdeodeodd  epkdepdpd more of the same...</td>
  </tr>
</table>

John Kugelman 2010-08-07 15:40:29

It's clearly a definition list, not a table.

You 2010-08-07 15:49:40

Answer 2

+2 A:

If it doesn't quack like a table, I use CSS-floated <dt>s and <dd>s to accomplish this (similar to what I do in the portfolio page of my web site).

Untested sample code follows...

HTML:

<dl>
    <dt>Tag1</dt>
    <dd>blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</dd>

    <dt>Tagbigger</dt>
    <dd>more blah blah blah wdeodeodd  epkdepdpd more of the same...</dd>
</dl>

CSS:

dl, dt, dd {
    margin: 0;
    padding: 0;
}

dl {
    overflow: hidden;
}

dt {
    clear: both;
    float: left;
    width: 15%;
}

dd {
    float: right;
    width: 85%;
}

BoltClock 2010-08-07 15:40:38

This is certainly the way I'd like to go. One thing wrong though. The first line of indented right dd text does not appear on the same line as the tag but rather is indented on the next line.Here's the start of my test (sorry not enough room for 2 sets)<head><style type="text/css" media="screen, print, projection">dl {overflow: hidden;}dt { clear both; float: left; width: 15%;}dd { float: right; width: 85%;}</style></head><body><dl> <dt>tag1</dt> <dd>When in the course of human events</dd></dl></body>

Mike D 2010-08-07 18:49:02

I see I missed a : after clear, I put it in but got the same result.

Mike D 2010-08-07 19:15:30

Ok, who says u can't teach a 70 year old dog new tricks! If I reduce the total of the widths of dt and dd to less than 100% it works as expected. I found this out by adding borders to these.

Mike D 2010-08-07 21:51:55

@Mike D: glad you sorted it out! I was cracking my head over this too for a little while.

BoltClock 2010-08-07 22:17:30

Well, not quite. There seems to be some minimum width needed for the browser window b4 this works as expected. If the browser window is less than about 65% of the width of my screen, the dt stuff ends up a line of its own with the dd stuff following on the next line.

Mike D 2010-08-07 22:28:57

Does this also happen with pixel/em/whatever values? I think I had to add some extra rules to my site's CSS too to get it to play nicely but I can't recall right now.

BoltClock 2010-08-07 22:33:15

@boltclock: I'm very new at this; what I know I learned from wandering through http://www.w3schools.com/css/default.asp. Are you talking about setting the widths of dt and dd? I really like the % business. Is there some way to specify dt in ems with dd defaulting to whatever is left?

Mike D 2010-08-07 23:17:16

@boltclock: Adding padding, border, and margin = 0px seems to have helped. I've also had success with padding and margin = 0px and border:2px solid red;

Mike D 2010-08-07 23:38:38

@Mike D: ah, yes, I believe definition lists have some default margins or paddings that I forgot to nullify in my styles.

BoltClock 2010-08-08 07:54:28

@boltclock: Thanks for the help! It seems to work using both mozilla and internet explorer and I've learned a bit about style sheets. Can you recommend a short reference on style sheets?

Mike D 2010-08-08 15:18:45

@Mike D: no problem. There are tons out there and I can't really recommend a particular site so I'd suggest that you do a few Google searches for CSS references and tutorials. Good luck!

BoltClock 2010-08-08 16:58:22

Answer 3

A:

You should add the following in your <p> tags:

style="margin: 0px;"

Molske 2010-08-07 15:44:30

@molske: Could you give me an example of how this could be used? I very new to styles :-(

Mike D 2010-08-07 17:59:48

Ok, I see something like <style>p {margin: 0px;}</style>

Mike D 2010-08-07 23:40:24

Answer 4

A:

<style>
div#left {float:left; width:30%;}
div#right {float:left; width:69%;}
</style>


<div>
     <div id="left">Tag1</div>
     <div id="right">blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</div>
</div>
<div>
     <div id="left">Tagbigger</div>
     <div id="right">more blah blah blah wdeodeodd  epkdepdpd more of the same...</div>
</div>

ppshein 2010-08-07 15:46:07

Using the same id for more than one element is not ok. Why not use class instead of id?

no 2010-08-07 15:54:02

Answer 5

+1 A:

First, just for the heck of it...

<pre>
Tag1             blah blah blah asdfge kedkled pijj ;dopkd
                 uiedeidiud edioejd
Tagbigger        more blah blah blah wdeodeodd  epkdepdpd 
                 more of the same...
</pre>

Here's what you want, using inline styles...

<div style="width:400px;">

  <div style="float:left;">Tag1</div>

  <div style="margin-left:150px;">blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</div>

  <div style="float:left;">Tagbigger</div>        

  <div style="margin-left:150px;">more blah blah blah wdeodeodd epkdepdpd more of the same...</div>

</div>

...or classes and a stylesheet.

<style>
  .container {width:400px;}
  .tag {float:left;}
  .blah {margin-left:150px;}
</style>

<div class="container">

  <div class="tag">Tag1</div>

  <div class="blah">blah blah blah asdfge kedkled pijj ;dopkd uiedeidiud edioejd</div>

  <div class="tag">Tagbigger</div>        

  <div class="blah">more blah blah blah wdeodeodd epkdepdpd more of the same...</div>

</div>

no 2010-08-07 15:49:08

ansaurus

tags:

views:

answers:

HTML delayed indent

related questions