Solved

Indent Entire Paragraph

Posted on 2004-10-17
6
948 Views
Last Modified: 2008-02-22
Ok I would have thought I'd be able to figure this one out but I can't, and I'm pressed for time.

I have a class called text1, which specifies the font, basically, of paragraphs of text on my page.  I want the entire paragraph indented about 10 spaces - not just the first line, which is what happens if I play with the text-indent OR the left margin values.

Here is my code.  Can someone help?

.text1 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 9pt;
      font-style: normal;
      font-weight: normal;
      color: #000000;
      
}
0
Comment
Question by:velcrobots
6 Comments
 
LVL 14

Expert Comment

by:RichieHindle
Comment Utility
Using either padding-left or margin-left should work.  If they don't, you have some other problem, like you're not applying the style to the whole paragraph, or there's another style overriding it somehow.  Here's a working example (tested in IE6):

<html>
<head>
<style>
.text1 {
     margin-left: 10ex;
}
</style>
</head>

<body>
<p>Not indented: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In augue
libero, sagittis nec, semper a, sodales sit amet, sem. Praesent quam. Donec magna
urna, malesuada eget, condimentum eu, varius vel, enim.</p>

<p class='text1'>Indented: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In augue libero, sagittis nec, semper a, sodales sit amet, sem. Praesent quam. Donec
magna urna, malesuada eget, condimentum eu, varius vel, enim.</p>
</body>
</html>
0
 

Author Comment

by:velcrobots
Comment Utility
OK, i understand - and apparently i had it correct.  i think my problem is more with how i'm implementing.  let me elaborate:

I'm using dreamweaver.  I type the text "header1" and then hit Shift-Enter (a <br> tag).  Then I type the text "header2" and do the same.  Then I type my text1.  After all that i go back and highlight the different lines and apply the styles.  The first one seems to work, but when I highlight the text at the bottom, and select the "text1" style, it changes the line above (header2) it as well.  I know it has something to do with the "span" tag dreamweaver is putting this into.  I guess it's treating the whole block of text as one, even though there is a line break?

It works if I hit regualr enter - just a <p>.  But then the space between lines is too large.  

This is very frustrating.
0
 
LVL 18

Expert Comment

by:arantius
Comment Utility
This is the dillema when you let a software package do some or all of the work for you.  It does specific things well, and anything else it's ten times harder to do right.  You're certainly right that dreamweaver is doing it.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 14

Expert Comment

by:RichieHindle
Comment Utility
Dreamweaver is making a bodge of it.  It shouldn't be wrapping multiple lines in a <span>.  Get rid of that span and use <p>s, then reduce the amount of space introduced by a <p>.  You can do that by setting the padding-top, padding-bottom, margin-top and margin-bottom values for <p>, or for a custom style that you apply to your <p>s.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
Comment Utility
Hi velcrobots,

What you're seeing is the correct behaviour - so Dreamweaver is getting it right in fact.

This is a paragraph:
<p>This is text</p>

This is "not" a paragraph:

header1<br>
header2<br>
more text<br> etc.

so you cannot apply the "text1" style to the above and have it act as a paragraph. Only text contained within <p></p> tags is a paragraph.

Using <br> or Shift-Enter is really not a good way to create space, escpecially if you're dealing with large blocks of text, because where the line wraps on your machine may not be where it wraps on someone elses.

As to the spacing when inserting mulitple p tags - this is controlled with CSS. So, first you do this:

p.text1 { margin:5px 0 5px 10px } which reduces the top and bottom margin, and indents the left margin.

Now you create the paragraphs on the page, and apply the text1 style to all of them. The big gap you're seeing between paragraphs will be reduced.

If you prefer this behaviour for all the <p> tags on your page. but only want to indent some of them, then you do this:

/* reduce the vertical spacing on all <p> tags */
p { margin:5px 0; }

/* indent my custom paragraphs */
p.text1 { margin-left:10px; }

Does that make sense?

Sean
0
 

Author Comment

by:velcrobots
Comment Utility
Worked perfectly.  Thank you very much.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now