Home/ Questions/Q 6877623
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T04:37:21+00:00

So, a freelance client wants a fork-me-on-github-like overlay ribbon for her site. the ribbon

  • 0

So, a freelance client wants a fork-me-on-github-like overlay ribbon for her site. the ribbon she sent is way bigger than the github one, so when i resize the browser, it messes up some existing divs.

heres the code i’m using: (relying heavily on twitter boostrap)

   <body>
<a href="#"><img style="position: absolute; top: 0; left: 0; border: 0;" src="ribbon.png" alt="hello"></a>
<div class="navbar">
    <div class="container">
      <ul class="nav">
        <li><a href="services.html">SERVICES</a></li>
        <li><a href="#contact">CONTACT / QUOTE</a></li>
      </ul>
    </div>
</div>

<div class="container">
  <div class="box">

and here’s how it looks:
https://i.stack.imgur.com/PoE2I.png
(‘box’ being the container box in question)

as you can probably tell, if i resize the browser, the ‘Hey guys..’ text gets moved under the ribbon. just wondering if you guys could offer any elegant ways to handle this. thanks!

edit: just realized, is this because i’m calling the ribbon outside of the container?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your ribbon image is absolutely positioned, but most likely your div.container and inner elements are not. Try adding a position:absolute and an explicit top + left (based on the size of the ribbon image) to position it correctly independent of browser resizing.

    • 0