Skip navigation
Livwell50
Currently Being Moderated

Layers and Fluid Grid part 2

Feb 22, 2013 2:41 PM

Tags: #app #div #button #layout #rollover #cs6 #relative_positioning #absolute_positioning

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-yo u-want-it-in-adobe-dreamweaver

 
Replies
  • Currently Being Moderated
    Feb 22, 2013 3:08 PM   in reply to Livwell50

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 2, 2013 4:44 PM   in reply to Livwell50

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

    http://jsfiddle.net/SBv92/

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points