Question

Ok, so I have this site: http://example.com/

And I was wondering two things – A) how can I prevent the side bar from overlapping the text of the resume when the window is small and I scroll? I want the sidebar to scroll vertically, but not horizontally.

B) How can I add little buttons into different parts of the margin? I want to add little buttons to go to my blog, Twitter and such.

Answer 1

I think you will need javascript to do this properly.

try sticking this in your head section and change your css #sidebar to position:absolute;

<script type="text/javascript">
  window.onscroll = moveEle;
  function moveEle() {

    //Alter top to be how many pixels you want from the top of the window
    var top = 50;

    ele = document.getElementById('sidebar');

    if(document.body && document.body.scrollTop) {
      ele.style.top = (document.body.scrollTop + top) + "px";
    } else if(document.documentElement && document.documentElement.scrollTop) {
     ele.style.top = (document.documentElement.scrollTop + top) + "px";
    }
  }
</script>

Oh, and the buttons, you could just put some anchor tags in the sidebar as well with href pointing to whatever addresses you have at twitter etc. Style them with display:block and then style further. You can make them the size you want with whatever background color and border or background image.