PINNING AN ELEMENT
INTRODUCTION

by Florence W Deems

---

In a browser without CSS, or with CSS turned off, it will just be a normal list with links. But with CSS, thanks to the rules below, it will appear to “float” on top of the page, pinned to the right side of the browser window:

Look to the right margin and watch the pinned element stay in place as you scroll the contents of this page. You can put any kind of information in the fixed element, including an image. I chose to put links there.

<!-- put this in the head tag --> <style> #menu { position: fixed; right: 0; top: 50%; width: 8em; margin-top: -2.5em; } </style> <!-- Put this in the body right after the body tag, or in a table <td> tag if that table contains the page --> <ul id=menu> <li><a href="URL1">URL 1</a> <li><a href="URL2">URL 2</a> <li><a href="URL3">URL 3</a> </ul>

---

Border Styles Introduction ~ 2 ~ 3
Border Widths
Border Color Introduction ~ 2
Border Radius: Introduction ~ 2
Border Collapse Spacing ~ Pinning an Element
An older Border Playground from 2008


Visit these other Tutorials by Flo

Friday 17th of January 2025 10:42:57 AM



by

~~~

Tandem Tooters

Arbor Hosting