Loading...
 
Features / Usability

Features / Usability


[solved] Tab-Indent in the middle of text like in word - or - table without special markup

posts: 55

I want to have a list like this:

1 means something
1a means somethin else
Df+ means nothing

But I want all the "means" begin at the same indentation for better readability. In Word you can set a tab at the top of the page at the ruler and then use the tab character in front of "means" to indent them all to the same vertical line.

Using tab characters does not work in browsers at all, they are discriminated to single spaces.

I guess I have to use tables, but I don't want those huge spaces between the lines and I don't want any markup (different background colors every second line, borders etc.). How do I do that?

posts: 3656 United States
FootlooseTraveller wrote:

I want to have a list like this:

1 means something
1a means somethin else
Df+ means nothing

But I want all the "means" begin at the same indentation for better readability. In Word you can set a tab at the top of the page at the ruler and then use the tab character in front of "means" to indent them all to the same vertical line.


I think a table is going to be the easiest way to do this. Just add a unique class, then you can override the standard table styling, as needed. Maybe something like:

{DIV(class="mySpecialTable")}
||1 |means something
1a|means something else
Df+|means nothing||
{DIV}


Then add some CSS to remove the borders, spacing, and shading:

.mySpecialtable table td {border:none !important;padding:0 !important}
.mySpecialtable table tr {background:none !important}


HTH,

- Rick | My Tiki Blog | My Tiki UserPage

Why be a dummy? Get smarty! TikiForSmarties.com
Tiki for Smarties, your source for the best (and only) Tiki books, guides, and tutorials.
posts: 55

Hi Rick Sapir / Tiki for Smarties,

thanks for the right hints. I used the {DIV()} as you suggested. Then I found where to put custom CSS: Admin -> Control Panels -> Look and Feel -> Customization includes a custom CSS input field. This is what I put:

.InvisibleTable table td {border:none; padding:0; padding-right:0.5em}
.InvisibleTable table tr {background:none}
.InvisibleTable table tr:hover {background:none}
.InvisibleTable table tr:nth-child(odd) {background:none}

Now it looks like I want. Thank you!