SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Look Like A Magazince, How Do You Code It?

    Sitepoint Members,
    I don't know why I don't see this on websites. In magazines you'll see a sentence or two in very large letters the author wants you to not miss out on. I think it's effective. I have variable width on my site so it'll have to adjust for all text widths. You would put the sentence in the code, the font size wanted is in the code, and the other regular size text will form around this larger text. Have any idea on how to code it. I don't know what this highlight by using larger text is called so I can't find anything online about it. Maybe it's css, maybe it's javascript.

    Thanks,

    Chris

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You would put the sentence in the code, the font size wanted is in the code, and the other regular size text will form around this larger text. Have any idea on how to code it.
    A simple <span> will allow you to style the stand-out text differently.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
    
    <style type="text/css">
    p {
        width:60%;
        margin:0 auto;
        font-size:1em;
        background:#eef;
    }
    p span {
        font-size:2em;
        color:red;
    }
    </style>
    
    </head>
    <body>
    
    <p>
        Lorem ipsum dolor sit amet consectetuer Vivamus lacinia elit nec eu. Nunc tincidunt Quisque 
        Suspendisse semper tincidunt tempor semper libero sagittis quis. Maecenas enim iaculis In 
        Curabitur Vestibulum Suspendisse Quisque condimentum nunc amet. 
            <span>
                Nest the text you are wanting to stand out in a span. 
                Then style that span with the font styles you desire.
            </span>
        Auctor Phasellus ipsum netus condimentum Aenean dictum et wisi quis nec. Massa Nullam et 
        Nullam consequat rutrum magnis amet nibh felis magna. Vitae penatibus montes elit lorem elit ipsum.
    </p>
    
    </body>
    </html>

  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Close, but not what I was thinking. The stand out text would be a block that would hold its "shape". It would not be fluid with the regular text. I guess it would behave a lot like an advertisement, but there's no border around it like an advertisement usually has.

    Thanks

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You could float that span (left or right) and set a width on it to retain the shape. Then the other text would flow around it. In fact, a float is the only element that text will flow around.

  5. #5
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I used
    p span {font-size:2em; color:red;width:300px;float:left;text-align:none}

    The align:none function "none", of course, doesn't exist but I can't get it to stop justifying the text left and right like I have the rest of the text. I'm not sure what they use in magazines. I guess they centr it. text-align:center and change the wording or width so you don't have one word at the bottom.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Chris77 View Post
    I can't get it to stop justifying the text left and right like I have the rest of the text.
    Try text-align: left;

    I'm not sure what they use in magazines.

    Well, your options on the web are more limited at this stage.

    change the wording or width so you don't have one word at the bottom.
    Programs like InDesign cater for this, but it's not something CSS2 can do, and I'm not sure CSS3 really has a solution for this either (yet, anyhow). But you could use JavaScript:

    http://css-tricks.com/preventing-widows-in-post-titles/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I used
    p span {font-size:1.5em;width:300px;float:left;text-align:center;padding:10px;line-height:1.1}

    Without line-height:1.1 the leading seemd to be zero - vertically the lines of text were touching, eventhough earlier in the css I had line-height of 1.25. Why would I have to reduce line height to increase leading?

    Other than this concern, it looks pretty good.

    Thanks!

    Chris

  8. #8
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm using
    span.sto{font-size:150%;width:35%;float:right;text-align:center;padding:15px;line-height:1.1}

    Generally it looks fine but it's not center aligning the text - the text is off center. It seems to be counting spaces beteween words when the next word is on the next line.

    The padding left and risgh looks a whole lot bigger than the paddig top and bottom.

    Thanks,

    Chris

  9. #9
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I just realized that I really don't want the text of the stand-out adjusting. I want it permanent so when the visitor widens or narrows his/her browser the text of the stand out doesn't adjust. That would likely prevent the problem I'm havig now.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Could you post a link or working example code? It's not really clear where you are up to with this.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It was that I didn't have text-indent:0 in the class for span to stop the indenting I had defined for <p>.


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
  •