PDA

View Full Version : need help positioning with z index and AP divs...


deafboyzaudio
04-19-2010, 09:24 PM
I have a pop out menu that uses a lil Javascript to display on the page when a small 50px X 50px button is clicked....

The pop out works great.

In order to get the z-index to work correctly I neeed to absolutely position the divs but then the divs are on the left side, not the right....

I have tried doing relative but then the z-index doesnt work right....

How can I position a div on the right and still have z-index work?

here is some code..... and a working example at the link
#right-colButton{
position:absolute;
width: 50px;
background-color: #B9BDC6;
float: right;
overflow: hidden;
z-index: 5000;
}

#right-col{
position:absolute;
width: 287px;
background-color: #B9BDC6;
float: right;
overflow: hidden;
display: none;
z-index: 5000;
}
#right-col .inner{
width: 225px;
overflow: hidden;
margin: 0 0 0 27px;
z-index: 5000;
}
#right-col-content{
background-color: #B9BDC6;
padding-top: 20px;
z-index: 5000;
}link: http://www.deafboyzaudio.com/downloads2.php

the site is a project so yea....

gentleone
04-20-2010, 12:24 PM
the float property doesn't work on absolute positioned divs either. You have to position with values on top, right, bottom and/or left.
I can't test it at the moment for you, but I believe this will set the button far to the right:

#right-colButton{
position:absolute;
width: 50px;
background-color: #B9BDC6;
top: 0px;
left: auto
right: 0px;
overflow: hidden;
z-index: 5000;
}

And perhaps you should consider to drop the whole absolute positioned divs and use two columns positioned with floats. Left column with float: left and the right column with float: right in your CSS.

rico1931
04-20-2010, 02:09 PM
I tried to do this a lil while ago and if you are using CS4 sprytip works great for this.

deafboyzaudio
04-20-2010, 06:10 PM
And perhaps you should consider to drop the whole absolute positioned divs and use two columns positioned with floats. Left column with float: left and the right column with float: right in your CSS.

what exactly do you mean? i made a new div called menu and floated it to the right, i put my hiding menu in that div. The position is good but when the menu opens it pushes all the content down the page.

I'm not sure how to make this work and have tried for a while now... here is the code I have now:
#menu {
float: right;
height: auto;
width: 50px;

}

#right-colButton{
width: 50px;
background-color: #B9BDC6;
overflow: hidden;

}

#right-col{
position:relative;
width: 287px;
background-color: #B9BDC6;
float: right;
overflow: hidden;
display: none;
z-index: 5000;
}
#right-col .inner{
width: 225px;
overflow: hidden;
margin: 0 0 0 27px;

}
#right-col-content{
background-color: #B9BDC6;
padding-top: 20px;

}

all the html is pretty much the same except that everything is now in a right floated "menu" div.

deafboyzaudio
04-26-2010, 10:18 PM
i still cant get this to sit right, anyone have any ideas?