How to Make this Css Widget Static?

Discussion in 'HTML - XHTML - CSS' started by flek, Jul 7, 2010.

Thread Status:
Not open for further replies.
  1. flek Banned

    Hello guys,

    I have created a simple css widget to redirect visitors to facebook,twitter,etc- check the left side) But unfortunately I don't know how to make it static like the feedback button in the same site at the right side.

    Now when some one scroll the page down, this widget is also scrolling down. Can anybody help me to make it static there?

    Thanks.
  2. enigma1 Guest

    Looks fine to me, so I suppose you changed the HTML. In such cases you can make a test page and try the elements, so you don't break the live site. Here is some sample code in case someone else needs it.

    1. CSS
    Code:
    #ltc {
      position: fixed;
      z-index: 100;
      left: 0px;
      top: 60px;
    }
     
    #rtc {
      position: fixed;
      z-index: 100;
      right: 0px;
      top: 130px;
    }
    
    2. HTML
    Code:
    <div id="ltc">
      <div>LText1</div>
      <div>LText2</div>
      <div>LText3</div>
    </div>
    <div id="rtc">
      <div>RText1</div>
      <div>RText2</div>
      <div>RText3</div>
    </div>
    
    The key to make the div go anywhere and stay at the top of the page is the position property with the fixed value. You can then setup the content to whatever you want.

    The left/right/top/bottom properties (because of the fixed position) are offsets in the viewport of the browser. The z-index forces the elements to stay at the top for some of the browsers like IE.
  3. flek Banned

    Thanks enigma - it works now..!!
Thread Status:
Not open for further replies.