SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)

    Text-Indent Property and One other Question

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

    Right now I'm using:

    Code:
    		 <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
    Code:
    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Think of a paragraph as one long line. It will only indent at the start.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you wanted more than one line to indent, you'd just use padding . That's why text-indent is good like that.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    So I should start a new paragraph?

    ~TehYoyo

  5. #5
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    At worse, you'd have something like this:

    Code:
    <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>
    Code:
    .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:
    Code:
    <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.
    Code:
    <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.
    Last edited by ralph.m; Apr 9, 2012 at 22:44.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    So I should start a new paragraph?

    ~TehYoyo
    It depends on what you need . Show us a picture of what you want to achieve.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Like this:
    Code:
             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 [code] tags. Only way I could get proper indenting w/out having to think too hard :/

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    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. #9
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Just the first word.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just have two separate paragraphs with the text-indent, to indent the first word of each.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Just have two separate paragraphs with the text-indent, to indent the first word of each.
    +1

  12. #12
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    OK. Thanks a lot. Anything for the second question?

    ~TehYoyo

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Do you mean the second question in your first post? I couldn't quite understand what you were asking there.

  14. #14
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Yes. I did.

    I want to go from this baby to that baby.

    ~TehYoyo

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You could use display: table and display: table-cell, with vertical-align: bottom.

  16. #16
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #17
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Just the first word.
    You mean to say the first *LINE*, perhaps. This is how the first word would look like:
    Code:
    <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>
    Last edited by ralph.m; Apr 9, 2012 at 22:43.

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'd be inclined to use Ralphs solution. IE7 can just suffer without vertical align. As for the baby issue .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I'd be inclined to use Ralphs solution. IE7 can just suffer without vertical align. As for the baby issue .
    Baby issue?

    ~TehYoyo

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Baby issue?

    ~TehYoyo
    Quote Originally Posted by TehYoyo View Post
    Yes. I did.

    I want to go from this baby to that baby.

    ~TehYoyo
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    honestly, your "second question" is one of those design concepts I call "Not viable for web deployment" -- it can be done, but it's fragile, likely beaking several places, and not worth the headache of even TRYING to implement.

    there's a reason you don't see those types of content placements very often.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •