We’re continuing our look at CSS positioning in this article. If you missed last week’s article on the subject, you might want to start there. Today’s article will take a look at two more ways in which absolute and relative positioning can really come in handy: absolute positioning ads and messages to ensure they’re not missed, and creating attractive fractions in your text with CSS and some semantically meaningful XHTML.
Absolute Positioning Ads and Messages
There may be times when you really, really need your website patrons to notice a certain bit of information. Perhaps you’ve added a new section to the site and want to draw attention to it. Maybe you’re moving your entire site to a new domain and want to give your readers a heads-up. Or maybe you’ve just released a new product and want to ensure it gets the attention it deserves. In these cases, absolutely positioning the information can really make it stand out.
The first thing you need to do is decide what you want your container to be: if you want to position your element according to the edges of the body tag, then you don’t need to do anything. If you want to position your message according to some other element (like a containing div), be sure to refer to last week’s tip on positioning inside of other elements.
Then, all you need to do is style your element and absolutely position it on the page. Something like this would do the trick:
.message {
/* Positioning the message box. */
position: absolute;
top: 0;
left: 0;
/* Styling the message. */
text-align: center;
width: 100%;
border-bottom: 1px solid #c00;
background-color: #faa;
font-weight: bold;
z-index: 10; }
And these styles would result in a difficult-to-miss message box that looks a little something like this. Or, for a real-world example, check out this absolutely-positioned advertisement on Woodsmith magazine’s homepage:
Classier Fractions with Relative Positioning
Every once in a while, you’ll come across a situation in which fractions could really come in handy (such as styling a recipe). If you already create a lot of documents with fractions, you’ve probably noticed by now that while it’s very easy to create attractive fractions in XHTML using the ¼, ½, and ¾ character entities (creating ¼, ½, and ¾, respectively), anything else comes out looking sub-par. There just isn’t a special character code to properly style nine-sixteenths. However, there is an easy way to do it with XHTML and CSS.
We’ll start with some XHTML that looks like this:
<p>Once planed, the board should be
<span class="frac"><sup>9</sup>/<sub>16</sub></span>"
thick.</p>
Already, just by using the <sub> (superscript) and <sub> (subscript) tags, we’re getting a lot closer to a realistic fraction. But let’s use CSS to get us a whole lot closer. With the markup given above, we have three selector “hooks”: the class on the span, the sup tag, and the sub tag. So let’s style all three:
.frac {
font-style: italic; }
.frac sup, .frac sub {
font-style: normal;
font-size: 65%;
position: relative; }
.frac sup {
top: 0.1em;
left: 0.05em;
vertical-align: text-top; }
.frac sub {
top: 0.1em;
left: -.1em;
vertical-align: text-bottom; }
We start out by italicizing our fraction: this makes the forward slash between our numerator and denominator even more pronounced. Then, we reset the font-style on our sub and sub tags (because they’re not italicized), make them a little smaller than normal, and give them a relative position. Finally, we position our superscript and subscript tags – bringing each slightly closer to the forward slash. We also ensure we’re measuring from the top of the superscript, and the bottom of the subscript, just to regularize any positioning problems.
The result, as you can see here, are fractions that are virtually indistinguishable from those created using XHTML entities. This means you could easily use both types of fractions in a single document and your readers would likely be none the wiser.
Thus concludes our look at the power and versatility of CSS positioning. Of course, these are only a few examples – there are countless other things you could accomplish with positioning and a bit of ingenuity. And if you have a favorite “position” or two that I haven’t mentioned, be sure to share them in the comments!