Text-Indent Property and One other Question

HTML & CSS
1

Does text-indent only work on the first line of text?

Right now I’m using:


		 <div class="Article">
			 <h2 class="Article headingtext">T-Shirts are in!</h2>
			 <p class="Article bodytext">
			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl ipsum, dapibus eget iaculis a, vestibulum sed sem. Donec venenatis ante eleifend tellus interdum porta. Nullam vestibulum posuere diam in dignissim. Nulla nunc mi, suscipit nec varius facilisis, viverra sit amet est. Vestibulum rutrum tellus sed quam dapibus sagittis. Sed mollis dui eget lacus cursus gravida. Morbi rhoncus ornare nisl eu sollicitudin. Nunc ut turpis enim.
<br />
Proin at odio quam. Nunc malesuada enim eget mi vulputate dapibus. Donec vehicula venenatis magna quis lobortis. Phasellus nisi nisi, pharetra eget interdum ac, accumsan ut risus. Vestibulum purus justo, sollicitudin in porttitor sit amet, interdum in libero. In eu leo eget tellus ultricies dictum in pharetra ligula. Aenean vehicula ante at lacus bibendum auctor. Ut egestas pulvinar velit in consectetur. Aenean enim dui, mattis ac vestibulum ac, gravida a mauris. Vestibulum ultricies dictum arcu. Sed ac odio lectus. Nunc arcu tortor, euismod eget gravida commodo, aliquet ac nibh. Cras id odio eget turpis tempor mollis. Proin ornare, arcu ac interdum fermentum, arcu tortor condimentum nisi, ac sollicitudin nisi sapien vel neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pellentesque bibendum ornare.
			 </p>
		 <!--article--></div>

and


p.Article
{
 text-indent:1.2em;
}

which, I assume, is pretty standard. Problem is, the “Proin at odio quam” won’t indent. Why not? tear

Also, I have this right now.

It’s a form for my footer. I want to vertically align the text on the left and the right (the links) at the bottom, but I’m hesitant to make a div, set a vertical-align property, and then give it a decided height. Is there any other way to do that or should I just give it a height?

~TehYoyo

2

Think of a paragraph as one long line. It will only indent at the start.

3

If you wanted more than one line to indent, you’d just use padding ;). That’s why text-indent is good like that.

4

So I should start a new paragraph?

~TehYoyo

5

At worse, you’d have something like this:


<div class="article">
  <h2>T-Shirts are in!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl ipsum, dapibus eget iaculis a, vestibulum sed sem. Donec venenatis ante eleifend tellus interdum porta. Nullam vestibulum posuere diam in dignissim. Nulla nunc mi, suscipit nec varius facilisis, viverra sit amet est. Vestibulum rutrum tellus sed quam dapibus sagittis. Sed mollis dui eget lacus cursus gravida. Morbi rhoncus ornare nisl eu sollicitudin. Nunc ut turpis enim.</p>
  <p>Proin at odio quam. Nunc malesuada enim eget mi vulputate dapibus. Donec vehicula venenatis magna quis lobortis. Phasellus nisi nisi, pharetra eget interdum ac, accumsan ut risus. Vestibulum purus justo, sollicitudin in porttitor sit amet, interdum in libero. In eu leo eget tellus ultricies dictum in pharetra ligula. Aenean vehicula ante at lacus bibendum auctor. Ut egestas pulvinar velit in consectetur. Aenean enim dui, mattis ac vestibulum ac, gravida a mauris. Vestibulum ultricies dictum arcu. Sed ac odio lectus. Nunc arcu tortor, euismod eget gravida commodo, aliquet ac nibh. Cras id odio eget turpis tempor mollis. Proin ornare, arcu ac interdum fermentum, arcu tortor condimentum nisi, ac sollicitudin nisi sapien vel neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pellentesque bibendum ornare.</p>
</div>



.article p {
  text-indent:1.2em;
}

No need for redundant “Article” classes on <h2>, on <p>, use the descendant selector. The CSS I posted says “for every <p> in the element having the class “article” do text indent.”

It seems to me you need to look more into your CSS, though, first. Maybe a little bit into your HTML too? This is really really horrid:


<div class="Article">
  <h2 class="Article headingtext">
  <p class="Article bodytext">

The basics of CSS selectors seems to elude you still.

<hr>

<br> inside <p> makes sense in poetry, not as a presentational whitespace between phrases.


<p>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To move the error from the markup to the rhyming.</p>

<hr>

You want something done on a photo? That’s easy, use GIMP. :wink:

6

It depends on what you need :). Show us a picture of what you want to achieve.

7

Like this:


         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl ipsum, dapibus eget iaculis a, vestibulum sed sem. Donec venenatis ante eleifend tellus interdum porta. Nullam vestibulum posuere diam in dignissim. Nulla nunc mi, suscipit nec varius facilisis, viverra sit amet est. Vestibulum rutrum tellus sed quam dapibus sagittis. Sed mollis dui eget lacus cursus gravida. Morbi rhoncus ornare nisl eu sollicitudin. Nunc ut turpis enim.
         Proin at odio quam. Nunc malesuada enim eget mi vulputate dapibus. Donec vehicula venenatis magna quis lobortis. Phasellus nisi nisi, pharetra eget interdum ac, accumsan ut risus. Vestibulum purus justo, sollicitudin in porttitor sit amet, interdum in libero. In eu leo eget tellus ultricies dictum in pharetra ligula. Aenean vehicula ante at lacus bibendum auctor. Ut egestas pulvinar velit in consectetur. Aenean enim dui, mattis ac vestibulum ac, gravida a mauris. Vestibulum ultricies dictum arcu. Sed ac odio lectus. Nunc arcu tortor, euismod eget gravida commodo, aliquet ac nibh. Cras id odio eget turpis tempor mollis. Proin ornare, arcu ac interdum fermentum, arcu tortor condimentum nisi, ac sollicitudin nisi sapien vel neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pellentesque bibendum ornare.

See the double indent?
~TehYoyo

Note: Sorry for the

 tags.  Only way I could get proper indenting w/out having to think too hard :/
8

That makes it look like you want padding along the left side of the whole paragraph, rather than the first word indented. It’s still not clear what you really want.

9

Just the first word.

10

Just have two separate paragraphs with the text-indent, to indent the first word of each.

11

+1

12

OK. Thanks a lot. Anything for the second question?

~TehYoyo

13

Do you mean the second question in your first post? I couldn’t quite understand what you were asking there.

14

Yes. I did.

I want to go from this baby to [url=http://imgur.com/2OFrF]that baby.

~TehYoyo

15

You could use display: table and display: table-cell, with vertical-align: bottom.

16

So I should start a new paragraph?

Not if it doesn’t make semantic sense. you could however, wrap the second line in a span and give it display:block, you can then apply text indent to it.

17

You mean to say the first LINE, perhaps. This is how the first word would look like:


<div class="article">
  <h2>T-Shirts are in!</h2>
  <p><span class="firstWord">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl ipsum, dapibus eget iaculis a, vestibulum sed sem. Donec venenatis ante eleifend tellus interdum porta. Nullam vestibulum posuere diam in dignissim. Nulla nunc mi, suscipit nec varius facilisis, viverra sit amet est. Vestibulum rutrum tellus sed quam dapibus sagittis. Sed mollis dui eget lacus cursus gravida. Morbi rhoncus ornare nisl eu sollicitudin. Nunc ut turpis enim.</p>
  <p><span class="firstWord">Proin</span> at odio quam. Nunc malesuada enim eget mi vulputate dapibus. Donec vehicula venenatis magna quis lobortis. Phasellus nisi nisi, pharetra eget interdum ac, accumsan ut risus. Vestibulum purus justo, sollicitudin in porttitor sit amet, interdum in libero. In eu leo eget tellus ultricies dictum in pharetra ligula. Aenean vehicula ante at lacus bibendum auctor. Ut egestas pulvinar velit in consectetur. Aenean enim dui, mattis ac vestibulum ac, gravida a mauris. Vestibulum ultricies dictum arcu. Sed ac odio lectus. Nunc arcu tortor, euismod eget gravida commodo, aliquet ac nibh. Cras id odio eget turpis tempor mollis. Proin ornare, arcu ac interdum fermentum, arcu tortor condimentum nisi, ac sollicitudin nisi sapien vel neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus pellentesque bibendum ornare.</p>
</div>
18

I’d be inclined to use Ralphs solution. IE7 can just suffer without vertical align. As for the baby issue :).

19

Baby issue?

~TehYoyo

20