Last Morsel
Most Delicious
Thomas Merton
Love Attraction
The menu you see in the top right corner of this page is simply a [div] with some [a] elements inside. All the work to make it stay fixed in its place is done by rules in the style sheet. Here is the mark-up, it is taken straight from the source of this page: |
<div class="divFloatMenu"> <a href="http://data.bangtech.com">Technologies</a> <em>Content:</em> <a href="http://content.bangtech.com">Warehouse</a> </div> <style type="text/css"> div.cssFloatMenu { margin: 0; position: fixed; top: 80px; left: auto; width: 100px; right: 20px;} div.cssFloatMenu a, div.cssFloatMenu em { display: block; margin: 0 2px } div.cssFloatMenu a, div.cssFloatMenu em { border-top: 2px groove #003366 } div.cssFloatMenu a:first-child { border-top: none } div.cssFloatMenu em { color: #003366} div.cssFloatMenu em:first-child { border-top: none } div.cssFloatMenu a:link { text-decoration: none; color: #800000 } div.cssFloatMenu a:visited { text-decoration: none; color: #0000FF } div.cssFloatMenu a:hover { background: #003366; color: white } </style> |
In a browser without CSS, or with CSS turned off, it will just be a normal paragraph with links. Otherwise, it will appear to "float" on top of the page, pinned to the upper right of the browser window. |
The interesting rules here are the 'position: fixed', that makes the [div] stay fixed on the screen, and the 'display: block', that makes the [a] elements inside the [div] into block elements, and thus displayed below each other, rather than all on one line. |
Be careful with the order of the last three rules. They all have the same specificity, so the last one that applies determines the color. If the mouse hovers over the link, we want :hover to apply, so it has to be last. |
The rest, the margins, borders, colors, etc. can be removed or changed according to personal taste. Note, however, how we did the rules between the links: there are borders above all links, except the first, thanks to the rule with ':first-child'. A pair of rules like this (border-top on all elements plus a border 'none' on the first child) is very convenient for creating borders between elements. |
Note IE5 and IE6 don't implement 'position:fixed'. Please refer a work-around from Johannes Koch. IE-only feature: one can declare style using the expression() operator/function, and fill it with javascript code. Those who have tried this method know that, when you scroll the page, the fixed element will jitter and jump from a scrolled down (or up) position, to its correct (fixed) position. This is due to IE scrolling the page, updating the display, and only then, calculating the new values of all the expression(). |