4 Replies Latest reply: Mar 2, 2013 4:44 PM by Nancy O. RSS

    Layers and Fluid Grid part 2

    Livwell50

      Hi

       

      I recently had a post in here about Layers and Fluid Grid,

       

      I had said i was happy with the answer but turned out i am not able to have it work like it should.

      So instead of continuing that post i made another one to further the conversation. A link to that first post here:

       

      http://forums.adobe.com/message/5073511

       

      I did what Nancy O suggested and placed her code in a style sheet and also the html:

       

      #holder  {

      position:relative;

      top: xxxpx;

      left: xxxpx;

      z-index1;

      }

       

      #button   {

      position:absolute;

      top: xxx px;

      left: xxxpx;

      z-index: 10;

      }

       

       

      HTML

       

      <div id="holder">

      <div id="#button">your button here</div></div>

       

      Thank you Nancy for that.  I entered my values and must have done something to effect it how it connects to the parent.

      Something i am missing? The app div is absolute and the parent is relative

       

      Even with a fixed page of html5 with no fluid grid i tried to make an app div stay put in many browsers only to have it move around.  I used an swf file video as the file size is much smaller for the web. I just want to put a simple rollover button over a flash video inside an app div and have it work or stay put in all browsers.

      Thanks so much for the anticipated help .

       

      I could not get it to work as the  x- axis when page is grabbed and shrunk down the video moves but the app div rollover button stays fixed.  .

      The y- axis works fine.

       

      I had also found this video which explains another way to do it and same thing. I followed this video to a T and nothing.

       

      http://www.videorolls.com/watch/position-a-div-ap-div-exactly-where-you-want-it-in-adobe-d reamweaver

        • 1. Re: Layers and Fluid Grid part 2
          Nancy O. CommunityMVP

          Without seeing a link to your page, it's impossible to give you anything but generic answers to your question.

           

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Button</title>
          <style>
          
          #holder {
              position:relative;
              width: 200px;
              height: 200px;
              margin: 45px auto;
              background: maroon;
              color:#FFF;
              z-index:1;
          }
          button {
              position:absolute;
              top: 50%;
              left: 50%;
              z-index: 100;
          }
          
          </style>
          </head>
          
          <body>
          
          <div id="holder">
          Flash object code goes inside this container
          <button id="button1">Button Text</button>
          </div>
          
          </body>
          </html>
          

           

           

          Nancy O.

          • 2. Re: Layers and Fluid Grid part 2
            Livwell50 Community Member

            Nancy

            Thank you for the reply and your time.

            I think i see something i missed.

            The % for the button top and left

            Makes sense because the button has to flex with the page in percentage form.

            That may do it. 

            I will try and reply back results

            Appreciate

            Dan

            • 3. Re: Layers and Fluid Grid part 2
              Livwell50 Community Member

              Hi

               

              I wanted to follow up.

              Everything worked well with the holders and placement over the video. I ran it through the W3C and it gave me errors for using the z index for each holder. It said to only use a z index for the parent and not the child.  I am also having overflow problems now and sort of at a standstill.

               

              I have everything including the video inside of this container

               

              <div class="c1">

              Then i have the swf file

              <object classid=xxx999xxxx width= "100"%  hieght="720"px id=" flashID">

              Then further down

              </object>

              Then all of the holders with rollover buttons seven total

              closing with all inside of this "c1"

              </div class="c1">

               

              The rule for the "c1" :

               

              The postioning in css is 100% for width and position is relative

               

               

              The rule for the holders are:

              box:

              width and height : inherit

              my margins are from -840 bottom on up to -600

              more like this:

               

              }

              #holder5 {

              postion: relative;

              width: inherit;

              height: inherit;

              top -840

              }

              button6 {

              position: absolute;

              top:  680px;

              }

               

              positioning:

              relative

              width and height inherit

              placement top -840

               

              I know one of these is wrong or all and I'm sure an easier method is around?

              Thanks so much if anyone can help

              Dan

              • 4. Re: Layers and Fluid Grid part 2
                Nancy O. CommunityMVP

                A URL is the best way to get help with layout issues. 

                http://jsfiddle.net/SBv92/

                 

                 

                Nancy O.