Skip navigation
Livwell50
Livwell50 Calculating status...
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

446 Views   4 Replies   Latest reply: Nancy O., Mar 2, 2013 4:44 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Feb 22, 2013 3:08 PM   in reply to Livwell50
    Report

    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:
  • Livwell50
    Currently Being Moderated
    2. Livwell50,
    Feb 22, 2013 3:22 PM   in reply to Nancy O.
    Report

    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

     
    |
    Mark as:
  • Livwell50
    Currently Being Moderated
    3. Livwell50,
    Mar 2, 2013 3:43 PM   in reply to Livwell50
    Report

    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

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

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

    http://jsfiddle.net/SBv92/

     

     

    Nancy O.

     
    |
    Mark as:
Actions

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