Need Sliding Panel on top of other divs

[joshtheflame]

Hi All,

I am developing a page where I have a div and inside the div I have a grid. now i want to provide my users a SEARCH facility so therefore I have got a search panel div along with a toggle button which slides down and slide up on toggle. I have placed that SEARCH slide down panel on top of my grid div. Problem is that when I slide down it pushes down the grid div which i dont want. i want my grid div to stay there and slide div panel should appear on top of it with a transparent effect. I am using IE7 or IE8 later.

here is the CSS

#panel {

background: #F0FEDC;

height: 200px;

display: none;

border: 1px solid #000;

}

#panel h2, p{

margin:0px; padding:0px; padding-top:20px; padding-left:20px; color:#666



}

.slide {

margin: 0;

padding: 0;

border-top: solid 4px #2b5386;

background: url(../images/btnslider.png) no-repeat center top;

}

.btn-slide {

/*(background: url(white-arrow.gif) no-repeat right -50px;*/

text-align: center;

width: 144px;

height: 31px;

padding: 3px 10px 0 0;

margin: 0 auto;

display: block;

font: bold 60%/60% Arial, Helvetica, sans-serif;

color: #fff;

text-decoration: none;

}

.active {

background-position: right 12px;

}

and here is the html

---

Slide Panel Heading


This is Jquery Example of Slide Panel. sample text(One of the most significant elements of a good user interface is visibility of the system’s status. Users must notice immediately what’s going on behind the scenes and whether their actions have actually led to the expected results. To achieve a more sophisticated level of system visibility, Web applications these days use AJAX (of course),)


Visit more Examples: www.csscody.com








Search










 this is a sample paragraph full of text .......................................... 

[cybershot]

a link to your site would be helpful. Also, maybe if you positioned your panel, that would solve the problem. Using relative and absolute positioning. This would take your panel outside the normal flow. I don’t think it would push on anything if you did that. Of course, I would have to play around with it which is why a link to your site would be hlepful

[joshtheflame]

cybershot thanks for your reply. Its my intranet application and i am doing it in ASP.NET so cannot be published over the internet. i would appreciate if you can find any solution.

[cybershot]

try the positioning. that should work

[joshtheflame]

oh i just uploaded the snap on imaging site..have a look and u will notice on slide down its pushing the div down in which i have a GRID.
http://img207.imageshack.us/img207/8335/appsnap2.jpg

[cybershot]

I don’t see what you are talking about, you need to show a before and after. I don’t see what is wrong in your picture. it looks fine to me

[joshtheflame]

cyber the search box should come on top of GRID div without pushing it down by clicking on “SEARCH” button which is toggled…get it?

[cybershot]

no, I don’t get it. I don’t get it because I can’t see your code. I don’t know what you are trying to do. Your code above doesn’t have a grid div in it. What I see looks fine. which box is the grid div? how is it pushing it down? what is it suppose to look like? I can’t help you if you don’t show these things. right now I feel like you are asking me to read your mind. I have not been working with your code so I don’t know what you are trying to accomplish and what you have here isn’t explaining it properly

[joshtheflame]

this one is a position when SEARCHBOX is closed. Now check the position of my GRID..i want my GrID to stay there and the searchbox panel should overlap on it.

http://img268.imageshack.us/img268/7373/appsnap3.jpg

[joshtheflame]

in the code i have all ASP.NET code…i deliberately removed the code from the div because its a lengthy code and this forum is a general CSS forum. the child div under “Wrapper” div can be filled with any html.

[cybershot]

okay, then you need to use positioning I would imagine to do that. Right now, your search box is in the normal flow of code, so when you expand it, it does push things down. You need to take it out of normal flow by using positioning. You might also need to add some z-index. I would try using absolute positioning on your search box and see what happens

[joshtheflame]

:) now u got it…thanks:)

[cybershot]

put

position: relative; on the parent div

and position: absolute;
top: 0;
left: 0;

on your search

[cybershot]

so it’s working?

[joshtheflame]

Cyber for ur ease i’ve uploaded the slider button image i m using..just copy from here.
http://img530.imageshack.us/img530/3828/btnslider.png

[Author]

Posts