How to design floating text with pure html or css

Discussion in 'HTML & Website Design' started by 220volt, Dec 17, 2008.

0
  1. #1
    Anyone knows how to design floating box (or text) that moves with you as you're scrolling down and up the page?
    So it will not be static box. For example, if box is at the top of the page, it would have to move with the page as I scroll down to the bottom so I can see it at all times no matter where I am on the page.

    It could be either that the box moves with the page or that box stays stationary while page moves behind it. Whatever works.

    I want to use either css or html. No java or frames or mixed.

    I hope I explained this correctly.

    Thanks in advance
     
    220volt, Dec 17, 2008 IP
  2. PixelRaider

    PixelRaider Banned

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    HTML:
    <html>
<body>
<div id="annoying-box">Some text, a picture or something else</div>
</body>
</html>
    Code (markup):
    CSS:
    #annoying-box {
   position: fixed;
   top: 10px; /* space between top of browser and annoying box */
   left: 10px; /* space between top of browser and annoying box */
   width: 100px;
   height: 100px;
}
    Code (markup):
    ;)
     
    PixelRaider, Dec 17, 2008 IP
  3. 220volt

    220volt Peon

    Messages:
    58
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    That works perfect. Thanks a bunch.
     
    220volt, Dec 17, 2008 IP