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

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.

<!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;
}
[COLOR=#006400]p span [/COLOR]{
    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. 
        [COLOR=#006400]<span>
            Nest the text you are wanting to stand out in a span. 
            Then style that span with the font styles you desire.
        </span>[/COLOR]
    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>

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

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.

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.

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:

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

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

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.

Could you post a link or working example code? It’s not really clear where you are up to with this.

It was that I didn’t have text-indent:0 in the class for span to stop the indenting I had defined for <p>.