Solved

Float Spry Collapsible Panel over other element

Posted on 2009-05-11
4
980 Views
Last Modified: 2012-06-22
Sorry if this question is naive, I am new to web-dev and have little/no experience of coding. I am learning to use dreamweaver CS4 and am currently working on a site. I would like to have a spry collapsible panel tab float over the image below it and I can get it to do so in live view... But when it comes to viewing in firefox or internet explorer it doesn't happen. The tab simply sits to the top of the element below.

I have left the content panel at 982px and shortened the tab to 200px for cosmetic reasons but that does not appear to be the problem.

Is it possible?

Help would be appreciated, I'm new here.
CSS for tab
 
.CollapsiblePanelTab {
	width: 200px;
	background-color: #000;
	border-bottom: solid 1px #CCC;
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	float: right;
	height: 25px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	line-height: 25px;
	z-index: 100;
	position: relative;
	visibility: visible;
}
 
SURROUNDING CODE FOR PANEL
 
   </tr>
  </table>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0">LOG IN</div>
  <div class="CollapsiblePanelContent">Content
    <div id="content_div">
      <p class="content">Please Log In.</p>
      <form id="form1" name="form1" method="post" action="<?php echo $loginFormAction; ?>">
        <table border="0">
          <tr>
            <td class="content">Email:</td>
            <td><input type="text" name="email" id="email" tabindex="10" /></td>
          </tr>
          <tr>
            <td><span class="content">Password</span>:</td>
            <td><input type="password" name="pwd" id="pwd" tabindex="20" /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input name="submit" type="submit" class="content" id="submit" tabindex="30" value="Log In" /></td>
          </tr>
        </table>
      </form>
      <p><a href="register.php">Not a registered user? Click here to REGISTER</a></p>
      <p>&nbsp;</p>
    </div>
  </div>
</div>
<table width="982" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="128"><img src="../IMAGES/BANNER IMAGE LAYERS3.jpg" name="BANNER" width="982" height="128" vspace="0" id="BANNER" /></td>
    </tr>
  </table>

Open in new window

panel-closed-in-browser.JPG
panel-closed-in-live-view.JPG
panel-open-in-live-view.JPG
0
Comment
Question by:TimDunton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 24359808
Hi TimDunton,

Because the Collapsible panel tab is set to position: relative, other elements will flow around it.

To make a panel "float" atop another div, you need to set the position to absolute and use the top, left (or bottom, right) declarations to "fix" it to a certain position regardless of the other content:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23130858.html

The z-index setting now becomes important as it will determine what is on top of the heap.


0
 

Author Comment

by:TimDunton
ID: 24359914
Thank you, you are totally correct however I presume this is going to cause me real problems? If I set the correct positioning as it appears for me, I presume it will be placed differently for everyone else. Is this the case, and if so, is there a way around it?

Thanks again for you assistance
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 500 total points
ID: 24359946
>> I presume this is going to cause me real problems?

Some, yes.

>> If I set the correct positioning as it appears for me, I presume it will be placed differently for everyone else. Is this
>> the case, and if so, is there a way around it?

You can set a div to have absolute position from the inside of another div.  That sets the 0,0 coordinate to the enclosing div and gives you more control over where things appear.  There is also a way to set an absolute div to show in the exact center of a browser window.

0
 

Author Closing Comment

by:TimDunton
ID: 31580344
You're a superstar, I've spent all day trying to work this out. Many thanks!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
DataTables + iCheck + pagination Issue 2 73
CSS Flex space-between 2 22
.CSS HTML Help 3 31
CSS Won't Show Up On Drupal Omega Sub-Theme 1 14
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question