Two Simple HTML/CSS Questions [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question does not appear to be about programming within the scope defined in the help center.

开发者_开发技巧

Closed 3 years ago.

Improve this 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.

---

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.

---

My method for the Buttons, would be not to create individual classes, but create a <div>.

#navigation{margin-top:-50px}

Now, all buttons and all things in that navigation will be -50px to the top. But, it get's better!

#navigation .littledifference{margin-top:-35px !important}

Now, you can set the button (or again, anything) in that navigation to have this class, and the margin will be different! This saves on having extra coding for every single button.

Edit as Psyrus says above, you could also use <a> tags. This requires a fair amount of work from my own personal experience, though you can do anything with them. My system above should still work though - just make sure the <a> tags still are inside the #navigation and don't have conflicting margin attributes. The class selector should still work as well.

---

You should use % value.

#wrap{width:100%; max-width:1024px;}
#sidebar{width:15%;}
#main{width:80%; padding:10px 2.5%;}

This way, when you will resize your window, your content size will adjust in consequence. So they won't overlap.

---

To prevent overlapping You can use negative value and positive Values for specific padding and margin so that you can place any <div> at any place you want.One thing you have to keep in mind you can give negative values and negative percentage while setting padding and margin

    .ClassName
    {
    padding-left:-20px;
    padding-top:-10%;
    }