Forum Moderators: mack
MY QUESTION: How can I create the effect of a hanging indent?
1.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
(HangingIndentHere)XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.
or
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
(HangingIndentHere)XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.
INSTEAD OF
1.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.
or
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.
~Shane
PS.(This post orignally Appeared November 2002 but I don't get it.)
"""There's a CSS property "text-indent" that applies to only the first line. I've used a negative text-indent to make the first lins start a little to the left and then an equal positive-valued left margin to shift the start of the second and following lines to the right. This gives the effect of an hanging indent. HTH, Peter Hollings "
p.ind {
text-indent:-5px;
margin-left:10px;
}
and then...
<p class="ind">Content here. The first line of this content will be indented -5px. The second line of this content will be indented 10px.</p>
You can adjust the values to achieve the effect you are looking for.
If so, it only allows for the indent on the first line.
Is there a text editor for CSS I can add those values in?
I am using Dreamweaver MX..
~Shane
when I use CSS, do I open Text>CSS Styles>New CSS Style?
Try pasting the code pageoneresults gave you in the head of your document - this is a bit easier than messing around with DW's CSS editor. Just go to "code view" and find the stuff between the <head> and the </head> put the following in there:
<style>
p.ind {
text-indent:-5px;
margin-left:10px;
}
</style>
Then put the class around the text that you want indented on your page and test it.
This is what I did, edit_g: Cut and paste the code given to me by PAGEONERESULTS into the HTML code directly. I had to adjust the indents around but here it is:
<head>
<title>Deep Intense</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="indent" rel="stylesheet" type="text/css">
<style>
p.ind {
text-indent:-25px;
margin-left:20px;
}
</style>
</head>
This works as a perfect Hanging Indent!
Thank you again,
~Shane
