Search code examples
htmlcssoverlayribboncss-position

site ribbon overlay + resizing browser

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.sstatic.net/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?

Solution

  • 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.