SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to decrease line width?

    Hi, here's my sales letter: http://howtofocusbetter.com/

    As you can see, the headline:

    Do you wish you could DO MORE in LESS TIME? Struggling to FOCUS? Want more CONTROL over your life?


    basically matches the length of the rest of the paragraphs in the sales letter...

    I want to have it shorter, while remaining in the same center position. How can I do this?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The <p> that encloses that line just needs a width set (aka 80% or whatever you feel is needed) . You don't have a class OR ID on it (you have wayy too many inline styles. Good luck maintaining the site in the future), otherwise I'd just give you a snippet of CSS to add to your stylesheet .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    The <p> that encloses that line just needs a width set (aka 80% or whatever you feel is needed) . You don't have a class OR ID on it (you have wayy too many inline styles. Good luck maintaining the site in the future), otherwise I'd just give you a snippet of CSS to add to your stylesheet .
    Hi Ryan, I'm not sure I understand what you mean by that. Can you give me an example?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You had this
    Code:
    <p style="text-align: center;"><span style="color: #000000;"><strong><span style="text-decoration: underline;"><span style="font-size: 1.1em;">Do you wish you could DO MORE in LESS TIME? Struggling to FOCUS? Want more CONTROL over your life?</span></span></strong></span></p>


    On that first <p>, add in "width:80%;" in your style attribute.

    That will allow the width to not be the full length (as what you want, from my understanding)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    NOT that you should be using a span like it was a FONT tag (net improvement zero), inlining all that style or using BOLD to do a heading tag's job.... or saying the color on EVERY element for no good reason.

    Also, instead of width you could also just add side padding to narrow it however much you desired.

    Being it's turdpress, the markup is going to be rubbish, but even that can't be blamed for all those span tags for nothing and the 35k of HTML being used to deliver 15k of plaintext.

    For example where you have:
    Code:
    <p style="text-align: center;"><span style="color: #cc0000;"><strong><span style="text-decoration: underline;"><span style="font-size: 1.1em;"><br />
    <span style="color: #000000; text-decoration: underline;">Do you wish you could DO MORE in LESS TIME? Struggling to FOCUS? Want more CONTROL over your life?</span></span></span></strong></span></p>
    A properly written page would probably read:
    Code:
    <h2>
      Do you wish you could DO MORE in LESS TIME? Struggling to FOCUS? Want more CONTROL over your life?
    </h2>
    With the style applied in the external stylesheet -- something like:

    Code:
    h2 {
      text-align:center;
      padding:0 4em 1em;
    }
    Whatever wysiwyg you have making that markup for you (since I can't see it being written by hand like that) is really making your life harder and resulting in a useless page from a semantics, bandwidth and accessibility point of view.


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
  •