css/html question

Underbelly · Jul 10, 2008

Hi all,

What is the best way to make a tab type effect in a line of text. I tried a few things but whatever I try drops the tab text down a line. The idea is a column "a" and a column "b" with all text in column "a" left justified and all text in column "b" left justified by a inch or two to the right.

I have in the past created two idential div and put the side by side but I'd that's not possible in this case.

Any suggestions?

And yes, I am new at this and am learning as I go.

theDarkStranger · Jul 10, 2008

Hi,

I suggest using possibly using a template that meets your layout needs and then building from it. Here is one of many links to a site that will assist you with your need.

CSS LAYOUTS COLLECTION

Underbelly · Jul 10, 2008

While I appreciate that, it is not a direction I want to go. A new layout will not solve my problem. A new layout will not help me "tab" text.

Thanks Anyway

theDarkStranger · Jul 10, 2008

HHhhhhmmm.. You could use indenting.

Here is an example showing the embedded (HEAD) code to create a proper indenting. In this case, anything within a <p> tag area.

Code:

<style type="text/css">
<!--
p {text-indent: 1in;}
-->
</style>

Here is an example using a CLASS to declare a general indent property that can be used by any tags in the BODY area. A DIV tag is being used for the example.
HEAD area

Code:

<style type="text/css">
<!--
.tab {text-indent: 1in;}
-->
</style>

BODY area

Code:

<div class="tab">
This line of text is indented by one inch.
</div>
This line of text is not indented.

The value of text-indent can be specified as inches (in), centimeters (cm), or pixels (px).

To create the first line of text with an overhang (negative indent) a negative number can be used for the value.

Is that what you were referring to? If not then maybe I'm just having one of those days. lol.

Underbelly · Jul 10, 2008

I must be not explaining myself very well. I do appreciate the help.

I was just hoping there would be a way to tab a section of text with a line of text, like you would in a word processing program. I know you can't really tab, but I was hoping for some sort of alternative.

theDarkStranger · Jul 10, 2008

You can do it different ways. Like with Spanning, Margins, Indexing, Tables, Divs, etc. Its just a matter of what you want to use.

Underbelly · Jul 10, 2008

I think we are on the write track. Div and Tables are out the question. Spanning sounds good because I already use that to change font styles, like color and size. How would I use it tab the text?

CircularSaw · Jul 11, 2008

Do you want to tab just a single line or a block of text?

Njugle · Jul 15, 2008

Using a <pre> tag allows pre formatted text, with spaces and line-breaks, this could be an option, especially if you are copying the text from elsewhere.

GoodTimeJoey · Jul 16, 2008

You could put each column in a seperate DIV and ontop of those divs put a div for the navigation.
then for the nav put a padding-right:20px; or however much is needed.