Help with Call-Out Boxes

HTML & CSS
1

I would like to start putting “Call-Out Boxes” into my Articles.

It seems like that would be a better way to highlight Key Points to my readers, without having to revert to bold red text like I’ve been known to do in the past?! :blush:

Here is an example…

(I always thought that was a great way to grab people’s attention. And I thought it looked cool, but maybe it isn’t “refined” enough like the link below?!)

Just a while ago, I was reading the news, and here is a good example of what I would like.

Questions:
1.) What are your thoughts on Call-Out Boxes in general?

2.) Can Call-Out Boxes be effectively used on the Web?

3.) Do Call-Out Boxes look more “professional” than my sample above with the red, bold text?

4.) What is the best way to implement a Call-Out Box using HTML and CSS?

5.) Is there a way to make Call-Out Boxes “intelligent” so they know to grab certain text from a paragraph or article?

Thanks,

Debbie

2

What you are referring to is called a “block quote”, simply put it’s an HTML element that has existed for a long time now and works in every browser. By default they span the entire with of their parent container but with some careful CSS styles you can create a very dynamic and clean element to wrap your quotes/important copy in.

1.) What are your thoughts on Call-Out Boxes in general?

I personally don’t use them much as i don’t quote a lot of things but when i do i find then to be effective in making the reader more interested in what their currently reading.

2.) Can Call-Out Boxes be effectively used on the Web?

Yes, in the example link the block quote is a great example of a quick reference before the article paragraph which as i said gets the reader more interested in what they are reading.

3.) Do Call-Out Boxes look more “professional” than my sample above with the red, bold text?

Yes, they are much more professional as a reader will know they are reading a snippet of quoted copy instead of a straight paragraph.

4.) What is the best way to implement a Call-Out Box using HTML and CSS?

As i said HTML has an element called <blockquote> which is designed for this specifically, you can use it like the following exampe:

<blockquote>
    My quote will go here
</blockquote>

blockquote {
    background-color: #dedede;
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
    padding: 10px 0;
}

5.) Is there a way to make Call-Out Boxes “intelligent” so they know to grab certain text from a paragraph or article?

No, you need to wrap the quote/copy manually within the element unless you have a CMS that is intelligent enough for quick quote wrapping.

Hope that helps.

3

Are you sure that is what they are doing?

(I thought a Block Quote was just a way to wrap a large body of quoted material?!)

I was expecting you to talk about how they actually get the text to move over to the left and have the body text wrap around it, and how they got those two baby-blue lines around the Call-Out…

If I wanted the exact look from the news article that I linked to, how would I do that? (If I had to guess, I would use a Floated DIV…)

Thanks,

Debbie

P.S. You are also assuming that my Call-Out Box is always a Quote!! Sometimes it is something else, like a statistic…

4

http://www.w3.org/TR/html4/struct/text.html#edef-BLOCKQUOTE

If I wanted the exact look from the news article that I linked to, how would I do that? (If I had to guess, I would use a Floated DIV…)

Go to some web developer tool, see what CSS they use and steal it.

Or you could make it somewhat original or modify it so it’s not as bad as just straight up copying their originality.

5