Tutorial :HTML delayed indent



Question:

I want to make some html output look like this...

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

I imagine the html itself might look something like

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

except I don't want the blank line between paragraphs.

Is there some standard type setting name for this? Better yet, can somebody point me at a style sheet?


Solution:1

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%;  }  


Solution:2

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>  


Solution:3

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>  


Solution:4

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

style="margin: 0px;"  


Solution:5

<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>  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »