Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Indent Entire Paragraph

Posted on 2004-10-17
6
Medium Priority
?
998 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
Independent Software Vendors: 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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

609 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