• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1467
  • Last Modified:

Dreamweaver Spry Collapsible panels

I have created two Collapsible panels using Dreamweaver CS3 Spry widgets.
Each is positioned within a absolute positioned div.

I can't seem to get the second panel to inherit any of the css properties like background color for the second panel seems to be transparent.

I must be missing something here.

Thanks,
Walt
<div id="CP1">      
          <div id="CollapsiblePanel1" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">
              <div align="center" >What's New!</div>
          </div>
          <div class="CollapsiblePanelContent">
            <p class="style2">February 2, 2009</p>
            <p class="style2">Glacier  Nursery, Inc. announces the new Plant Catalog for 2010. This catalog contains all the varieties of trees, evergreens, shrubs, perennials, and other native or adapted species for our northwestern Montana climate zones.</p>
            <p class="style2">Please check our Plant Selection Guide and our Availability sections to help pick your choices for this season and to place your orders early so we canship them when you need them.</p>
            <form action="" method="post" name="form2" id="form2">
              <div align="center"><span class="style2"><em> for full article and for archived articles </em></span><em><br />
                please select below<br />
                <select name="archived articles" id="archived articles">
                  <option selected="selected">February 2, 2009</option>
                  <option>January 2009</option>
                  <option>December 2008</option>
                  <option>November 2008</option>
                </select>
                </em></div>
            </form>
          </div>
        </div>
      </div>
        <div id="CP2">    
          <div id="CollapsiblePanel2" class="CollapsiblePanel2">
            <div class="CollapsiblePanelTab" tabindex="0">
              <div>
                <div align="center" onmouseover="MM_openBrWindow('http://www.ebizervices.us/','PSGtest','scrollbars=yes,resizable=yes,width=300,height=200')">Featured Plants</div>
              </div>
            </div>
            <div class="style2">
              <p><img src="images/iris.jpg" width="110" height="164" align="right" class="image-right" />This is the featured plant section. We provide updates and cool new plants to view from time to time.</p>
    
            </div>
          </div>
</div>

Open in new window

0
BigSky260
Asked:
BigSky260
  • 3
  • 2
1 Solution
 
LZ1Commented:
Show the CSS
0
 
BigSky260Author Commented:

@charset "UTF-8";
 
/* SpryCollapsiblePanel.css - Revision: Spry Preview Release 1.4 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel {
	padding: 0px;
	width: 230px;
	margin-top: 10px;
	margin-bottom: 10px;
	top: 20px;
	left: 692px;
}
 
/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanelTab {
	background-color: #550000;
	padding: 2px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	font-family: sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #FFFFCC;
}
 
/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanelContent {
	margin: 0px;
	background-color: #DFE1C1;
	padding: 5px;
}
 
/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */
.CollapsiblePanelTab a {
	color: black;
	text-decoration: none;
}
 
/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background-color: #550000;
}
 
/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
	color: #FF7F00;
	background-color: #550000;
}
 
/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanelTab {
	background-color: #550000;
}
#BoundaryDIV #container #RightHole #CP2 {
	position: absolute;
	z-index: 100;
}
 
#BoundaryDIV #container #RightHole #CP1 {
	position: absolute;
	z-index: 200;
 
}
.CollapsiblePanel2 {
	padding: 0px;
	width: 230px;
	margin-top: 60px;
	margin-bottom: 10px;
	top: 20px;
	left: 692px;
}

Open in new window

0
 
Jason C. LevineNo oneCommented:
The other CSS :)

(from the container divs)

Also, a link to the page in action would help a lot.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
BigSky260Author Commented:
URL is: http://www.ebizservices.us/test/gln3/index.html
The second collapsible panel seems to be the one I'm having trouble with.

/-- CSS for containers--------------------------
@charset "utf-8";
#container #RightHole #RightHoleDiv2 {
	margin-top: 100px;
}
 
#container #RightHole {
	float: right;
	height: 150px;
	width: 230px;
}
#container #Sidebar1 {
	float: left;
	height: 600px;
	width: 150px;
}
#container #Header1 {
	height: 10px;
	position: relative;
	background-color: #B93700;
	float: left;
	width: 780px;
}
#container #MainContent {
	position: relative;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #153F11;
	width: 605px;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	float: left;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #B93700;
}
#container #Sidebar1 #LowerSidebar2 {
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 10px;
}
 
#container #VertBar {
	background-color: #B93700;
	height: auto;
	width: 1px;
	float: left;
	margin-left: 5px;
}
 
#container #footer {
	clear: both;
	float: left;
	width: 780px;
	font-size: 12px;
}
 
#container {
	background-color: #FFFFcc;
	width: 780px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
#container #PhotoHole {
	float: left;
	height: 150px;
	width: 150px;
}
#container #Logo {
	width: 400px;
	height: 150px;
	float: left;
}
#container #Sidebar1 #LowerSidebar1 {
	background-color: #DFE1C1;
	width: 150px;
	margin-top: 15px;
}
#container #footer #HorizLine {
	background-color: #B93700;
	height: 1px;
}
.image-right {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 5px;
}
.image-left {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 10px;
}
UploadDIV {
	color: #FF7F55;
}
#Lwindow {
	float: left;
	width: 325px;
	height: 275px;
	overflow: auto;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	padding: 5px;
}
#Rwindow {
	float: right;
	width: 225px;
	height: 275px;
	overflow: auto;
	margin-top: 10px;
	margin-right: 2px;
	margin-bottom: 5px;
	margin-left: 2px;
	padding: 5px;
}
#AvailabilityDIV {
	background-color: #FFFFCC;
	clear: both;
}
#container #RightHole #C_Panel {
	width: 200px;
	z-index: 100;
}
#container #MainContent #LocateWindow {
	height: 300px;
	width: 590px;
	background-color: #DFE1C1;
	overflow: auto;
	padding: 5px;
	margin: 5px;
}

Open in new window

0
 
Jason C. LevineNo oneCommented:
You've given the second panel a different class name.  The first panel is

<div class="CollapsiblePanelContent"

The second one is

<div class="style2" with some inline elements to boot.
0
 
BigSky260Author Commented:
Thanks Jason1178:

Problem solved!

BigSky260
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now