Menu
I added the famous "Fork me on Github" ribbon to one of my projects. The tag looks like this:
<a href="https://github.com/Nurdok/htmlify">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
It looks great, but some of the divs on my webpage have minimum length, so when the window is small, one has to horizontally scroll the screen. When that happens, I want the "Fork me on Github" link to stick to the top-right side of the page, not the window. This is how it looks right now:
Scrolled all the way to the left:
Scrolled all the way to the right:
It seems that the ribbon is placed on the top-right side of the initial window, and stays static. What I want is for it to be out of sight in the first case and top-right in the second case (when I scroll to the right).
Edit: Thanks for the quick answers, people. However, most of the answers made the ribbon scroll horizontally and vertically with the page. What I want is for it to be fixed on the top-right side of the page (not the browser view), and only be seen if I scroll to where its position is.
718
To align a div with fixed position on the right side, we set the right CSS property of the div we want to align to the right side. to add a div with the class test . Then in the CSS code, we select the elements with class test , and set the right property on it.
The position Property Setting position: absolute on an element lets you use the CSS properties top , bottom , left , and right to move the element around the page to exactly where you want it. For example, setting top: 1em move the element so its top is 1em from the top of the page. That will display like this.
You can do a little trick and put your image into a div which has minimal-width.
<div style="position:relative;min-width:960px">
<img src="..." style="position: absolute;right:0;top:0" />
</div>
and put that div at the beginning of <body> section.
position:relative makes that all children of that elements that have position:absolute are positioned absolute according to that div, not whole page. When viewport is bigger than min-width, the div is the same width as the viewport. When the viewport is smaller, the div will have the min-width and the image stays at the corner of the div.
70
Two alternatives
<img style="position: fixed; top: 0; right: 0; border: 0;"
If you dont want to see the image when scrolling left then use a explicit width for this container I am talking about Here is a JSFiddle example.
I used a squared div instead of an image. CSS code as follows:
#container {
width: 700px;
height: 700px;
background: #55ff90;
position: relative;
}
#image {
width: 70px;
height: 60px;
background: #ffff90;
position: absolute;
top: 0px;
right: 0px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
