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
Solved

Indent Entire Paragraph

Posted on 2004-10-17
6
966 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
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

840 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