Solved

Indent Entire Paragraph

Posted on 2004-10-17
6
975 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 14

Expert Comment

by:RichieHindle
ID: 12334792
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
ID: 12335125
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
ID: 12335838
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Expert Comment

by:RichieHindle
ID: 12336467
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
ID: 12337250
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
ID: 12343768
Worked perfectly.  Thank you very much.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

732 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