{"id":75,"date":"2008-03-31T07:00:26","date_gmt":"2008-03-31T12:00:26","guid":{"rendered":"http:\/\/cssnewbie.com\/harnessing-positioning-2\/"},"modified":"2008-03-31T07:00:26","modified_gmt":"2008-03-31T12:00:26","slug":"harnessing-positioning-2","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/harnessing-positioning-2\/","title":{"rendered":"Harnessing CSS Positioning: Part 2"},"content":{"rendered":"

Yoga poses<\/p>\n

We\u2019re continuing our look at CSS positioning in this article. If you missed last week\u2019s article on the subject,<\/a> you might want to start there. Today\u2019s 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\u2019re not missed, and creating attractive fractions in your text with CSS and some semantically meaningful XHTML.<\/p>\n

Absolute Positioning Ads and Messages<\/h3>\n

There may be times when you really, really<\/em> need your website patrons to notice a certain bit of information. Perhaps you\u2019ve added a new section to the site and want to draw attention to it. Maybe you\u2019re moving your entire site to a new domain and want to give your readers a heads-up. Or maybe you\u2019ve 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.<\/p>\n

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\u2019t 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\u2019s tip on positioning inside of other elements.<\/a><\/p>\n

Then, all you need to do is style your element and absolutely position it on the page. Something like this would do the trick:<\/p>\n

.message {\n\t\/* Positioning the message box. *\/\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\t\/* Styling the message. *\/\n\ttext-align: center;\n\twidth: 100%;\n\tborder-bottom: 1px solid #c00;\n\tbackground-color: #faa;\n\tfont-weight: bold; \n\tz-index: 10; }<\/pre>\n
And these styles would result in a difficult-to-miss message box that looks a little something like this.<\/a> Or, for a real-world example, check out this absolutely-positioned advertisement on Woodsmith<\/em> magazine\u2019s homepage:<\/a><\/p>\n
Woodsmith magazine\u2019s website.<\/a><\/p>\n
Classier Fractions with Relative Positioning<\/h3>\n
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\u2019ve probably noticed by now that while it\u2019s very easy to create attractive fractions in XHTML using the &frac14;, &frac12;, and &frac34; character entities (creating ¼, ½, and ¾, respectively), anything else comes out looking sub-par. There just isn\u2019t a special character code to properly style nine-sixteenths. However, there is an easy way to do it with XHTML and CSS.<\/p>\n
We\u2019ll start with some XHTML that looks like this:<\/p>\n
<p>Once planed, the board should be \n<span class="frac"><sup>9<\/sup>\/<sub>16<\/sub><\/span>" \nthick.<\/p><\/pre>\n
Already, just by using the <sub> (superscript) and <sub> (subscript) tags, we\u2019re getting a lot closer to a realistic fraction. But let\u2019s use CSS to get us a whole lot closer. With the markup given above, we have three selector \u201chooks\u201d: the class on the span, the sup tag, and the sub tag. So let\u2019s style all three:<\/p>\n
.frac {\n\tfont-style: italic; }\n.frac sup, .frac sub {\n\tfont-style: normal;\n\tfont-size: 65%;\n\tposition: relative; }\n.frac sup {\n\ttop: 0.1em;\n\tleft: 0.05em;\n\tvertical-align: text-top; }\n.frac sub {\n\ttop: 0.1em;\n\tleft: -.1em;\n\tvertical-align: text-bottom; }<\/pre>\n
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\u2019re not italicized), make them a little smaller than normal, and give them a relative position. Finally, we position our superscript and subscript tags \u2013 bringing each slightly closer to the forward slash. We also ensure we\u2019re measuring from the top of the superscript, and the bottom of the subscript, just to regularize any positioning problems.<\/p>\n
The result, as you can see here, are fractions that are virtually indistinguishable<\/a> 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.<\/p>\n
Thus concludes our look at the power and versatility of CSS positioning. Of course, these are only a few examples \u2013 there are countless other things you could accomplish with positioning and a bit of ingenuity. And if you have a favorite \u201cposition\u201d or two that I haven\u2019t mentioned, be sure to share them in the comments!<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<\/p>\n
We\u2019re continuing our look at CSS positioning in this article. If you missed last week\u2019s article on the subject, you might want to start there. Today\u2019s article will take a look at two more ways in which absolute and relative […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[178],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/75"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}