1 Reply Latest reply: Mar 19, 2014 11:53 PM by Ben Pleysier RSS

    how would absolute positioned divs work when placing 6 icons over an image in fluid grid

    Mr.adobe2341

      Untitled-3.jpgWhat you see is a very very rough outline of the image (very rough). I cant show the exact image to the public right now because its senseative.  Right below the circle and right above the long gray line there's space that strech the width of the image - this is where I want to place 6 icons for navigation. Now when I place the icons they need to be able to scale with the image without losing their position or size in differant browers or deives. Outside of the six icons this is one image.

        • 1. Re: how would absolute positioned divs work when placing 6 icons over an image in fluid grid
          Ben Pleysier MVP

          Something like ?

          <!doctype html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>Untitled Document</title>

          <style>

          body {

              max-width: 1000px;

              margin: auto;

          }

          div.column {

            /* The background image must be 800px wide */

            width: 40%;

              margin: auto;

          }

           

          figure.fixedratio {

            padding-top: 56.25%;  /* 450px/800px = 0.5625 */

            background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg);

            background-size: cover;

            -moz-background-size: cover;  /* Firefox 3.6 */

            background-position: center;  /* Internet Explorer 7/8 */

          }

          nav .menuitem {

              width: 33.333%;

              float: left;

              text-align: center;

          }

          </style>

          </head>

           

          <body>

          <div class="column">

            <figure class="fixedratio"></figure>

          </div>

          <nav>

            <div class="menuitem">icon</div>

            <div class="menuitem">icon</div>

            <div class="menuitem">icon</div>

            <div class="menuitem">icon</div>

            <div class="menuitem">icon</div>

            <div class="menuitem">icon</div>

          </nav>

          </body>

          </html>