Every now and then, you may need to post a short message or notice to let your website visitors know about something out of the ordinary. Actually you can use this little technique for multiple purposes! Creating a back-drop for such notices is an easy process that can truly make this message….noticable! With just a little CSS code put directly into your post, you can make these messages look almost any way you want them to. Here’s an example:
*Notice to Readers – On December 25, I’ll be spending the entire day with my family and visiting relatives, so I will not be posting this year on Christmas day. I will resume my posting immediately after the holidays. Have a Merry Christmas!
1. The first step is to create the message:
*Notice to Readers – On December 25, I’ll be spending the entire day with my family and visiting relatives, so I will not be posting this year on Christmas day. I will resume my posting immediately after the holidays. Have a Merry Christmas!
2. Next, we’ll wrap the message in a div and add some style:
The orange text is the code to be placed around the message.
3. There is no third step. That’s it!
I love that you can make this an effective part of your website, and it’s just not a difficult process to include. Even if you’re not familiar at all with CSS, you should be able to look at the code and distinguish what controls each element. Enjoy!
Pingback: Wrap Text with CSS Box: Part II — Antbag.com
Why make it an image we can’t copy? Thanks anyway
Two reasons:
1) At the time that I wrote this post, I couldn’t get the code to render correctly within the post, so I went this route.
2)Because if someone is too lazy to type a couple of short lines of code, they aren’t interested in learning how to do this anyway.
I’ve read this article long before, and I went to it back again when I needed it. Yes, copying the html is not that difficult. True, one learns while typing the code. Thanks, Anthony. I’ve been a fan even before your UK-government-site controversy days.
Its water under the bridge now, but really, next time post the code, not just a picture. its such a pain. But then again, thanks for writing the article. I copied the code from the source.
joel, what are you talking about? If you don’t like it, make your own site and post the code to something useful.
Usually, the ones that complain are the ones that offer nothing themselves.
Antony offers something for nothing. Don’t complain. If you can do better, do better. If not…… (well, you know).