Hanging text plus Tab

How to make a hanging number using CSS

[matthewd]

Hi,
I've worked out how to make text hang using an indent in a Dreamweaver external CSS (using Block + Box settings). But what I really want to do is set up hanging numbers with indented text, so I need to set up tabs as well as the hanging text. How can I do this in Dreamweaver using an external style sheet?

[DrDoc]

Welcome to Webmaster World!

Hanging numbers... Would an ordered list work?

[matthewd]

Thanks DrDoc but an ordered list wouldn't work because my requirement includes non-list paragraphs among the list paragraphs.

I came up with a half-way solution by putting two non-breaking spaces after the number. That makes it line up fine. Mostly there'll only be single-digit numbers, so that might be my solution in the end. Still, it's a bit clunky.

What gets me is that you can save a Microsoft Word file to Web Page (which uses internal style sheets + that mysterious non-editable editdata.mso file). It does what you need with its <span style='mso-tab-count:1'> tag. I'm trying to work out how to do the same thing using CSS.

Matt

[MonkeeSage]

The CSS rule...

content: "\t";

...on the element you want tabbed may work, but this isn't tested--it might just print a "t", heh ;)

Jordan

Edit:
I'm retarded... even if it did add it, it would be in the source, the HTML would just ignore it, duh...you need to use padding-left or margin-left instead, probably with a value of about 10 or 15px. :)

[matthewd]

Thanks MonkeeSage, but unfortunately that doesn't work. My settings in Dreamweaver are:

Block: Text Indent: -14.2pt
Box: Margin: Left: 14.2pt

That effectively means that there's a 14.2pt outdent, which is what I want. But I also want a tab between the outdent and the block of text. But there's no such parameter in the Dreamweaver CSS configuration tools.

I tried putting an a padding-left value also but that just moves the entire thing left, including the outdent, which is not what I want.

Regards,
Matt

[crxchaos]

Matt,

Have you thought of using floating divs to create a layout like this:

___________
¦1¦textext¦
¦ ¦textext¦
¦_¦_______¦
¦non list ¦
¦paragraph¦
¦_________¦
¦2¦nextext¦
¦_¦_______¦

Just give the 'number' divs a 'float: left' and a width property. The accompanying text area needs a 'float: left' and the 'non list paragraph' can have 'clear: both' to ensure it sits on its own.

[willybfriendly]

p
{
margin-left: 3em;
}

.hang
{
text-indent: -3em ;
}

<p class="hang"> 1. blah, blah, blah</p>
<p>blah, blah, blah</p>
<p class="hang"> 2. blah, blah, blah</p> .....

(If I understand what you are trying to accomplish)

WBF

[matthewd]

Willybfriendly, my aim is to get some sort of command to control the space between the period (full-stop in some countries) and the first 'blah', i.e.: 1. blah

Is that clear? Also, I'm using Dreamweaver.

It works when I have:

Block: Text Indent: -14.2pt
Box: Margin: Left: 14.2pt

as I posted earlier, and then put two (2) non-breaking spaces directly after the period. This lets me have a nice indented text block in both NN4.7 and IE6.

Thanks for all your help people! Pleasure working with you.
Matt

[willybfriendly]

I don't work in Dreamweaver, but this works for 1-9 when I do it in notepad using CSS:

p
{
margin-left: 1em;
font-size: 1em;
}
.hang
{
text-indent: -1em ;
}

<p class="hang">1. This is a paragraph</p>
<p>This is another paragraph</p>
<p class="hang">2. This is the third, but only second hanger</p>
<p>Yet another paragraph...</p>
<p class="hang">10. Oops, now we are in double digits</p>

WBF

[matthewd]

Willybfriendly: thanks again for your assistance. I really appreciate your help.

The only trouble with your last post is that I've already got a font-size of 8pt as part of the text definition. Really I'm rather content after all with my use of an outdent with non-breaking spaces, as I laid out above. It just happened that, when I tried it, the 2 &nbsp; lined up exactly with the 14.2pt hanging indent. Lucky, I guess.

Matt

[SuzyUK]

I know you said you're happy with what you have put I'll throw this in for future maybe..

Taking WBF's first suggestion..

gave me an idea which seems to work to create a "tab" effect and the markup is still intact too.. (no extra spaces required.) So width of "tab" can be adjusted from stylesheet, which would save adding/deleting those nbsp's ;)

CODE:

#hangtext {padding-left: 2em;}
#hangtext p {position: relative;}
#hangtext p span {
display: block;
position: absolute;
left: -2em;
}

<div id="hangtext">
<p><span>1:</span>blah, blah, blah</p>
<p><span>2:</span>blah, blah, blah and more blah blah blah and even more blah blah blah and yet more blah blah blah to make the paragraph wrap..</p>
<ul>
<li>then you can use lists inside it</li>
<li>if you want to</li>
</ul>
<p><span>3:</span> as long as the text remains inside the hangtext div</p>
</div>

Suzy

[Nick_W]

Neat! ;)

Nick

[matthewd]

Thanks Suzy, it's really appreciated.

Your solution looks great and I'm now going to go away and work on implementing it in Dreamweaver. As all you talented people may have realized by now, this is my first attempt at using (external) CSS and although it's going OK in general, translating your, Suzy's, CSS code into Dreamweaver checkboxes and stuff _is_ a bit tricky.

Now I'm gonna show my ignorance again... I found that in Dreamweaver you can specify attributes direct to <p> and <td> tags and such like. Now, if I understand your code correctly, you are giving Positioning: Type: Relative attribute to the CSS's <p> tag?

And then you want to give some attributes to the <span> tag. But in any case I can't for the life of me work out where to set these up.

And then, if I go ahead and give these attributes to <p> and <span>, what will be the impact on my other class= styles under those tags?

THanks again for your help,
Matt

[willybfriendly]

SuzyUK - you are a goddess.

It is amazing what the folks of WW are capable of. This is a keeper for sure.

WBF

[aevea]

In dreamweaver you can open up the stylesheets into the code editor by double clicking on the file from the site. It might take a little time to get used to css syntax, but you'll have much more control than you do with dw's knobby css interface.

You can use the dw design tab use redefine html styles and define classes, but it's difficult to do id's (#) and selectors.

[matthewd]

aevea and suzyuk -- I took a hard copy of the postings for future reference. Aevea, thanks for your input that's exactly the kind of information I was looking for. The dw documentation is poor and the website search function is out of order, so I had trouble doing a search on the types of elements that can be configured. Now that I know about ids I'm a bit less in the dark. True, the dw interface is not very easy to use.

BTW, does anyone have a solution to the problem with NN and IE handling paragraph line height? I'm putting graphical icons into some paragraphs and when I do, NN4.7 collapses, the second line in the para disappearing under the first. Anyway, whichever goes where, the para becomes illegible. IE6 handles small graphics well, no problems. To get around this, I created a new element in the css and changed the line height in its Type dialog. But because they hanndle this differently, the results of this tweak, seen in IE and NN, differ in appearance. IE wants to space the lines out and NN wants to squeeze them together. It's irritating; but maybe there's another way around this problem. Any ideas?

Matt

[willybfriendly]

NN4.x is a monster to code for due to incomplete and non-standard CSS compliance - and onlhy CSS1 to boot.

Go to http://bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm for a fascinating look at using CSS to scale images on the fly.

WBF

[edited by: Nick_W at 6:06 am (utc) on Sep. 3, 2003]