100% width - Accordion Panels

Hello.
Is it possible to set width of accordion panels to 100%?
Site : http://faithdesign.businesscatalyst.com/index.html
As you can see, everything else in this page is nicely 100% to both sides...except those two panels.

I have an accordion widget that is set to 100% width and works on the desktop and tablet version but not on the phone version. It looks fine in the Muse preview and when I switch the preview viewer from horizontal to vertical it scales the accordion correctly, but then on a mobile device the accordion appears way over 100% width and is cropped on the right side. I have nothing on the mobile site other than the accordion to try and deduce why it's doing that, still no luck. Any thoughts?

Similar Messages

100% width accordion panel flipped upside down

i would like to use an accordion panel flipped 180 at 100% width for a pop up footer. it doesn't seem like this is supported at this time, just would like confirmation or some direction on how to make it happen. would love to see this supported, as it would really add some awesome possibilities. thanks in advance.

You can try rotated accordion and place that in footer with contents in container, there us no direct widget for such a 180 degree footer but you can try the rotated setting of accordion.
Thanks,
Sanjit

How do I center the text in full width accordion panel?

Hello!
Is it possible to center the text to follow the full width accordion widget?
When you expand to fill the screen, the text are fixed and doesn't follow the center headline...
I created a page so you see what I'm talking about: http://fullwidthissue.businesscatalyst.com/index.html
Please respond if you know what to do or if it's impossible..
Thanx

This believe this can be fixed within the <head> of the document. I had the same problem and it took me a bit to figure this solution.
Step 1
Find the <div> ID that muse gives to the content portion of the accordion element. you can find this by using a web browser that lets you inspect the code.
Step 2 once you have that code replace u6174. with your specific <div> then past this into your <Head> of the muse document. Almost forgot.....Get a general idea of the minimum size around your content this example it was a width of 750px. and change the width accordingly on this code.
<style>
#u6174{
width: 750px;
padding-left: 0px;
padding-right: 0px;
margin-right: auto;
margin-left: auto;
border-right-width: 0px;
border-left-width: 0px; "}
</style>
you can see a sample of this here:
Alain Hunkins
At the bottom is this solution working.
Let me know if that helps.

Why can't I change the width of my accordion panel?

I'm trying to set the width of this accordion panel by dragging the middle handle to the left so that it lines up with the page guide, making it 920px instead of 925px. Everytime I do this, it springs back to the right again, to 925px. I've tried setting the actual dimensions in pixels from 925 to 920, but it won't change. Why is this?

Refer to the following thread with a possible solution - http://forums.adobe.com/message/5140254
Thanks,
Vinayak

Slideshow Image Order of Go AND Problem with Sizing an Accordion Panel

SLIDESHOW Is there a way to set the start, middle, and end in a slideshow? I have tried arranging the position of the triggers (nothing happened); and moving the targets in the layers panel (again, nothing happened). I would like the slideshow to begin and end with specific slides.
ACCORDION PANEL Will not allow me to size it smaller than 962 pixels. The content area of the accordion panel is filled with one slide show per panel or tab, and I've checked all of the elements within the slideshow to make sure nothing exceeds 960 pixels. Nothing I can find exceeds 960 pixels, but when I remove all the elements from the content area, BOOM, I can make the panel any width I want.

Slide show sorting:
No, Mylenium, you are definitly wrong, You can choose any image order you want within slideshows:
1. Make thumbnail temporarily visible and drag the thumnail to the position you want.
or
2. Identify the slides in layers panel and drag their panel entries to the position you want.
Accordion panel:
You can choose whatever size you want – even with a slideshow within:
You have to make sure, that all element of the slideshow (caption, prev, next, counter) fit within the accordion panel. And – since the single accordeon panels don’t allow individual sizes – you have to make sure, that the content of every(!) accordeon panel does not exceed the size you want.

How do I collapse all the accordion panels

The problem that I still have is that I am trying to close all the Accordions when clicking on the last panel.
I have looked at the Accordion.closePanel() , but that throws an error
http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
see the code below. Any help would be greatly appreciated. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
<div class="AccordionPanelContent">
<img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="3" />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
<div class="AccordionPanelContent2">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
width: 174px;
overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
.AccordionPanelTab {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_blue.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTop {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_top.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 22px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelBot {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_bot.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: hidden;
margin: 0px;
.AccordionPanelContent2 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: auto;
margin: 0px;
height: 200px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;

Just so that you know for the next time, when you give us a URL, there is no need to post your code. This is by far the most preferred method for obtaining our assistance.
Having said that, place the fillowing in the HEAD section of your document, ensuring that you do have the file in that location
<script src="SpryAssets/SpryDOMUtils.js"></script>
Then, near the bottom of the page within the same SCRIPT content as your constructor(s), place the following code
Spry.$$(".AccordionPanelBot").addEventListener("click", function(){
Accordion1.closePanel();
The Spry Element Selector (Spry.$$) requires SpryDOMUtils.js. Here we place an event listener to your last tab with a class name of AccordionPanelBot, which when clicked will close the currently open panel(s).
I hope this helps.

Accordion Panel problem in IE

Using DW8 - and Interakt Ajax tookit, I have an Ajax panel
that contains the Spry Accordion. I have tried EVERYTHING, and
although it works perfectly in Firefox, the panels open slightly as
soon as you mouse over or open any of them. I have tried editing
everything I can think of in the code, the CSS and even editing in
doc type in the panel page.... but it still does it....just
slightly. Also...I can only use fixed height... becuase if I use
the auto-height... it slides up sluggishly, but ONLY if there is a
LOT of content. I am pulling my hair out.
I figured the only people who can help me at this point have
to live in Romania.... if any are watching this post... please
help!!!
Thanks guys, and gals.

Here is the CSS for that area: I tried setting margins in
every state just as an experiment? Maybe I need to use the
!important comment?
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* This is the selector for the main Accordion container. For
our default style,
* we draw borders on the left, right, and bottom. The top
border of the Accordion
* will be rendered by the first AccordionPanelTab which
never moves.
* If you want to constrain the width of the Accordion
widget, set a width on
* the Accordion container. By default, our accordion expands
horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector
is not necessary
* to make the widget function. You can use any class name
you want to style the
* Accordion container.
.Accordion {
border-left: solid 1px gray;
border-right: solid 1px gray;
border-bottom: solid 1px gray;
overflow: hidden;
/* This is the selector for the AccordionPanel container
which houses the
* panel tab and a panel content area. It doesn't render
visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This
container houses
* the title for the panel. This is also the container that
the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel tab container.
.AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-weight: bold;
/* This is the selector for a Panel's Content area. It's
important to note that
* you should never put any padding on the panel's content
area if you plan to
* use the Accordions panel animations. Placing a non-zero
padding on the content
* area can cause the accordion to abruptly grow in height
while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on
the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in
this selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 150px;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open. The class "AccordionPanelOpen" is
programatically added and removed
* from panels as the user clicks on the tabs within the
Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of the
panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover"
is programatically added
* and removed from panel tab containers as the mouse enters
and exits the tab container.
.AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelOpen .AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of all
the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is
programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;

Problem with Accordion Panels

Hi
I have an issue with Accordion Panels.
http://characteraday.businesscatalyst.com/guided.html
You can see in the link above that I have Accordion Panels on the right side that say open/close tip. The first one open and close and displays the tip. All the others do the same but when they open then push the one under it down. The first one does not do this and I like this a lot better. Any ideas how to make them all work the way the first one "Enter the Character's name" works.
Thanks for your time.

Modify the following line by adding the mark-up coloured red.
<div class="AccordionPanelContent"><span class="CollapsiblePanelContent"><img src="productimages/tinyimages/doorkitseat.jpg" width="50" height="50">The <strong>Door Insert Kit</strong> is a bathtub conversion kit. By removing a portion of the bathtub wall and inserting a door, an existing bathtub becomes accessible, retaining its use a a bathtub. <em><a href="doorkitandseat.html"><strong>More</strong></a></em></span></div>
I hope this helps.
Ben

Spry Accordion Panels view incorrect in IE8

I have a page set up using both spry menu and spry accordion panels. The problem is that in FireFox and Chrome, the pages view as they should. However, in IE, the panels on the accordion spread and are open, it doesn't view as it should. The test page is here www.sbcvote.us/index1.html the source code is below. My initial guess is that I have an open or not closed tag somewhere?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Paul Gonzalez San Benito County Clerk-Auditor-Recorder-Registrar of Voters</title>
<meta name="keywords" content="Joe Paul Gonzalez, San Benito County, Clerk, Auditor, Recorder, Registrar of Voters, fppc form 460, reconveyance deed, deed of reconveyance, reconveyance, homepage, mechanics lien release, quit claim deed form, release of mechinics lien, form, san, reconveyance, county, deed, 460, california, fppc, nacimiento, trust, elections, ca, solictud, certifacadas, reporting, statements, nominees, handbook, contribution, joe, paul, gonzalez" />
<meta name="description" content="Joe Paul Gonzalez San Benito County Clerk-Auditor-Recorder-Registrar of Voters" />
<link href="scripts/style.css" rel="stylesheet" type="text/css" />
<script src="/SpryAssets/menu/SpryMenuBar.js" type="text/javascript"></script>
<script src="/SpryAssets/accordion/SpryAccordion.js" type="text/javascript"></script>
<link href="/SpryAssets/menu/SpryMenuBarHorizontal_sbcvote.css" rel="stylesheet" type="text/css" />
<link href="/SpryAssets/accordion/SpryAccordion_sbcvote.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function clearText(field)
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
</script>
</head>
<body>
<div id="wrapper">
    <div id="header">
      <div id="header_right">
            <ul id="header_button">
                <li><a href="#"><img src="images/home.jpg" alt="home" /></a></li>
                <li><a href="#"><img src="images/contact.jpg" alt="contact us" /></a></li>
            </ul>
            <div class="cleaner"></div>
            <form action="#" method="get">
                <input type="text" value="Enter a keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
                <input type="submit" name="Search" value="" alt="Search" id="searchbutton" title="Search" />
            </form>
      </div>
    </div> 
    <div id="banner">
    <div id="banner_box">
        <ul>
        <li><a href="clerk.htm" ><span class="current"></span><img src="images/countyClerk.jpg" alt="San Benito County Clerk" /></a></li>
            <li><a href="auditor.htm"><span></span><img src="images/countyAuditor.jpg" alt="San Benito County Auditor" /></a></li>
            <li><a href="recorder.htm"><span></span><img src="images/countyRecorder.jpg" alt="San Benito County Recorder" /></a></li>
            <li><a href="http://results.sbcvote.us" target="_new"><span></span><img src="images/coRegistrar_results.jpg" alt="" /></a></li>
        </ul>
        </div>
    </div> 
    <div id="menu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="index.html">Home</a>
          <ul>
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
          </ul>
        </li>
        <li><a href="registrar/candidateinfo.htm" class="MenuBarItemSubmenu">Candidate Info</a>
          <ul>
            <li><a href="candidate_forms_manuals.htm">Forms & Manuals</a></li>
            <li><a href="pdf/forms/registrar/candidates/2010CandidateHandbook.pdf">2010 Candidate Handbook</a></li>
            <li><a href="registrar/form460.htm" class="MenuBarItemSubmenu">FPPC 460s</a>
              <ul>
                <li><a href="registrar/form460_all.htm">Candidate Form 460s</a></li>
                <li><a href="registrar/2010_form460.htm">2010 Candidate 460 Forms</a></li>
                <li><a href="registrar/2009_form460.htm">2009 Candidate 460 Form</a></li>
                <li><a href="registrar/2008_form460.htm">2008 Candidate 460 Form</a></li>
                <li><a href="registrar/2007_form460.htm">2007 Candidate 460 Form</a></li>
              </ul>
            </li>
            <li><a href="candidate_reporting.htm">Reporting</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="registrar/votebymail.htm">Vote-By-Mail</a>
          <ul>
            <li><a class="MenuBarItemSubmenu" href="overseasvoting.htm">Overseas Voting</a>
              <ul>
                <li><a href="pdf/forms/registrar/votebymail/oversees_votebymail_request.pdf">Overseas Vote-By-Mail Request</a></li>
                <li><a href="pdf/forms/registrar/votebymail/guide_military_overseas.pdf">Guide Military Overseas</a></li>
                <li><a href="#">Untitled Item</a></li>
              </ul>
            </li>
            <li><a href="mailvotestatus.htm">Ballot Status</a></li>
            <li><a href="pdf/forms/registrar/votebymail/votebymail_app_gen_eng.pdf">Application </a></li>
            <li><a href="pdf/forms/registrar/votebymail/votebymail_app_gen_SPAN.pdf"> Español</a></li>
          </ul>
        </li>
        <li><a href="/registrar/registration.htm" class="MenuBarItemSubmenu">Register to Vote</a>
          <ul>
            <li><a href="registrar/national_vrc_notice.htm">Form English</a></li>
            <li><a href="http://www.sbcvote.us/registrar/national_vrc_notice_sp.htm">Español</a></li>
            <li><a href="registrar/statement_distribution.htm">Distribution</a></li>
          </ul>
        </li>
        <li><a href="registrar/pollworker.htm" class="MenuBarItemSubmenu">Pollworker</a>
          <ul>
            <li><a href="registrar/pollworker.htm">Become a Pollworker</a></li>
            <li><a href="registrar/pollworker.htm#student">Students</a></li>
            <li><a href="registrar/pollworker.htm#student">State Employees</a></li>
          </ul>
        </li>
        <li><a href="registrar/hava_faqs.htm" class="MenuBarItemSubmenu">HAVA</a>
          <ul>
            <li><a href="registrar/hava_complaint_procedure.htm">Complaint Procedure</a></li>
            <li><a href="registrar/hava_compliancemanual.htm">Compliance Manual</a></li>
          </ul>
        </li>
</ul>
</div> 
    <div id="content_wrapper">
    <div id="left_sidebar">
        <div class="box">
            <h2><span></span>Click on a Tab for Info</h2>
                <div class="body">
                    <ul class="side_menu">
                      <li>
                        <div id="Accordion1" class="Accordion" tabindex="0">
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Vote-By-Mail (VBM)</div>
                            <div class="AccordionPanelContent"><a href="/registrar/votebymail.htm">Vote-By-Mail Voting</a><a href="/pdf/forms/registrar/votebymail/overseas_votebymail_request.pdf">Overseas VBM Request</a>
                              <a href="/pdf/forms/registrar/votebymail/VBM_Application.pdf">Application for Permanent VBM </a><a href="/pdf/forms/registrar/votebymail/guide_military_overseas.pdf">Guide to Military Voting</a>
                              <a href="/pdf/forms/registrar/votebymail/votebymail_app_general_county_fill.pdf">Application VBM General Election</a><a href="/registrar/mailvotestatus.htm">Did My VBM Ballot Get Counted?</a><br />
                                <br />
                              <br />
</div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Voto Por Correo</div>
                            <div class="AccordionPanelContent"><a href="/registrar/spanish/voto.por.correro.html">Voto Por Correro</a><a href="/registrar/spanish/overseasvoting.SPAN.html">Votante Información Extranjero</a><a href="/registrar/mailvotestatus.htm">Cheque se recibimos su voto por correro</a> <a href="/pdf/forms/registrar/votebymail/VBM_ApplicationSPAN.pdf">Solicitud de Balota de Votación por correo en California</a></div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Voter Information</div>
                            <div class="AccordionPanelContent"> <a href="/registrar/national_vrc_notice.htm">Register to Vote</a>
                              <a href="http://www.voterguide.sos.ca.gov/pdf/english/" target="_new">Voter Information Guide Nov 2010</a>
                              <a href="/pdf/forms/registrar/register/YourRightToVote_ENG.pdf">Your Right to Vote</a>                              <a href="/pdf/forms/registrar/register/eng-list-of-certified-candidates11.10.pdf">Certified Candidates Nov 2010</a>
                              <a href="/pdf/forms/registrar/register/TimeOfftoVote_ENG.pdf">Time Off to Vote </a><br />
                              <br />
                            </div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Votante Información</div>
                            <div class="AccordionPanelContent"> <a href="/pdf/forms/registrar/register/Guide_Voting_SPAN.pdf" target="_new">Guía para Votar</a> <a href="/registrar/national_vrc_notice_sp.htm">Inscíibase para Votar</a> <a href="/pdf/forms/registrar/register/Voter-bill-of-rights.SPAN.pdf">Declaración derechos de Votantes</a> <a href="/pdf/forms/registrar/register/spanish-vig-nov-2010.pdf">Guía Oficial Información Nov 2010</a> <a href="/pdf/forms/registrar/register/spanish-list-of-certified-candidates11.10.pdf">Lista Candaditos Certificados 2010 </a><a href="/pdf/forms/registrar/register/TimeOfftoVote_SPAN.pdf">Tiempo Libre Para Votar</a></div>
                          </div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">For the Candidates</div>
                            <div class="AccordionPanelContent">Blank 460 Forms<br />
                              Candidates 460 Forms Index<br />
                            2010 Candidate Handbook<br />
                            2010 Calendar </div>
                        </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Nov 2, 2010 Election</div>
                            <div class="AccordionPanelContent">Election Results Page<br />
                              Canvass of the Vote
                                <br />
                                Vote-By-Mail Ballot Look up<br />
                                State Vote Pamphlet<br />
                                Sample Ballot Statewide
                            </div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Label 7</div>
                            <div class="AccordionPanelContent">Content 7</div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Label 8</div>
                            <div class="AccordionPanelContent">Content 8</div>
                          </div>
                        </div>
                      </li>
                        <li> <a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Donec bibendum semper</a></li>
                        <li><a href="#">Proin tincidunt dapibus</a></li>
                        <li><a href="#">Nulla consequat</a></li>
                        <li><a href="#">In enim justo</a></li>
                        <li><a href="#">Aenean vulputate</a></li>
                        <li><a href="#">Etiam ultricies</a></li>
                        <li><a href="#">Nullam vehicula egestas </a></li>
                    </ul>
</div>
            <div class="box_bottom"><span></span></div>
            </div>
            <div class="box">
            <h2><span></span>Our Departments</h2>
                <div class="body">
          <ul class="side_menu">
                        <li><a href="clerk.html">County Clerk</a></li>
                        <li><a href="auditor.html">County Auditor</a></li>
                        <li><a href="recorder.html">County Recorder</a></li>
                        <li><a href="index.html">Registrar of Voters</a></li>
                        <li><a href="http://results.sbcvote.us" target="_new">Election Results</a></li>
                        <li></li>
                        <li></li>
                        <li></li>
</ul>
                </div>
            <div class="box_bottom"><span></span></div>
            </div>
        </div> 
        <div id="content">
<div class="box">
            <h2><span></span>Welcome to the San Benito County Registrar of Voters</h2>
                <div class="body">
                    <p> Welcome to our new and updated website for the County of San Benito Clerk-Auditor-Recorder- Registrar of Voters. </p>
              </div>
            <div class="box_bottom"><span></span></div>
            </div>
            <div class="box">
            <h2><span></span>News and Updates</h2>
                <div class="body">
                    <div class="news_box">
                      <h3><a href="http://results.sbcvote.us" target="_new">November 2, 2010 Election Results</a></h3>
                        <p>Up to the minute election results for San Benito County will be uploaded to our website at the close of the polls on Tuesday, November 2, 2010 at<a href="http://results.sbcvote.us" target="_new"> http://results.sbcvote.us.</a></p>
                      <div class="cleaner"></div>
                  </div>
              <div class="news_box">
                <h3><a href="registrar/mailvotestatus.htm">Vote-By-Mail Ballots</a>
                </h3>
                <p>Verify that your Vote-By-Mail Ballot has been received <a href="/registrar/mailvotestatus.htm">here.</a> To insure that your vote is counted, drop off your VBM ballot to our offices on the second floor of the courthouse building room 406 BEFORE Tuesday, Nov. 2, 2010.</p>
                    <div class="cleaner"></div>
                </div>
              <div class="news_box">
                    <a href="#"><img class="news_image" src="images/image_08.jpg" alt="image" /></a>
               <h3><a href="#">Auditor's Department</a></h3>
                    <p> Praesent rhoncus faucibus nibh, non molestie lectus sagittis sed. Praesent ac sem lectus. Cras molestie elit sit amet velit tincidunt imperdiet. Mauris nulla purus.</p>
                <div class="cleaner"></div>
                </div>
                <div class="more float_r"><a href="#">View All</a></div>
                <div class="cleaner"></div>
                </div>
            <div class="box_bottom"><span></span></div>
            </div>
        </div> 
       <div id="right_sidebar">
        <div class="box">
            <h2 align="center"><span></span>Joe Paul Gonzalez</h2>
                <div class="body">
                  <ul class="side_menu">
                        <li></li>
                        <li></li>
                        <li><img src="images/joepaul_new.jpg" width="207" height="262" alt="joe paul gonzalez" /></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li><a href="#">County Clerk-Auditor-Recorder</a></li>
                  </ul>
              </div>
            <div class="box_bottom"><span></span></div>
            </div>
            <div class="sidebar_box">
      <a href="http://results.sbcvote.us" target="_new"><img src="images/results.jpg" alt="Election Results" /></a>            </div>
            <div class="sidebar_box">
            <a href="#"><img src="" alt="City Zoo" /></a>            </div>
      </div> 
        <div class="cleaner"></div>
    </div> 
</div> 
<div id="footer_wrapper">
<div id="footer">
        <ul class="footer_menu">
        <li><a href="#">Homepage</a></li>
            <li><a href="#">Site Map</a>
            </li>
            <li><a href="#">Clerk</a>
            </li>
            <li><a href="#">Auditor</a></li>
            <li><a href="#">Recorder</a></li>
            <li><a href="#">Registrar of Voters</a></li>
            <li><a href="#">Election Results</a></li>
            <li><a href="#">Forms</a></li>
            <li class="last_menu"><a href="#">Contact</a></li>
        </ul>
        Copyright © 2010 <a href="http://www.netwidesales.com" target="_new">NetWideSales</a> |
        <a href="http://www.netwidesales.com" target="_new">Designed by Irma C. Gonzalez</a> |
    <a href="http://www.joepaulgonzalez.com" target="_new">Joe Paul Gonzalez</a> </div> 
</div> 
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/images/menubar/SpryMenuBarDownHover.gif", imgRight:"/images/menubar/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
I appreciate any help here, it really doesn't make sense to me, it did work for a few viewing in IE and I must have changed something by mistake?
Thanks again.

I added a set width to the accordion css and that solved the problem of the widget running across the page. The IE issue appears to be an ongoing issue with IE. If a viewer has IE8, then hitting the compatibility button on the menu bar will solve the viewing problem. If not, it doesn't view correctly. It views fine on other browsers (Chrome, etc). Problem is how many people will know to hit the compatibility button?
Thank you for your help, I appreciate the time taken.

Help tweaking Spry accordion panel code!

Hello all,
I'm currently working on an information portal for a client and am having trouble with creating code to open a specific accordion panel on another html page without messing up the code so that the accordion panels have adjustable heights based on content.
The website has an Interactive Map page, which has some tooltips that have links to the Nurseries page. The Nurseries page has accordion panels with nursery entries ordered by province; anchor links were added to nursery entries that are linked to the Map page. In theory, when a user clicks on a "Click here for information" link on the Map page, the Nurseries page will load and automatically open the exact panel where the entry is housed with the exact entry showing at the top of the browser window. So I tested it out and it works exactly as I want it to, HOWEVER, the adjustable height feature that I added to the accordion panels on the Nurseries page now no longer works (now there are scrollbars on the right if the height exceeds the default height), AND all the panels by default are open instead of closed!
Here is the pertinent code that I am using on the NURSERIES page:
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></ script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></ script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
<script type="text/javascript"> var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: params.panel ? params.panel: 0 });
</script>
This is the code I added to one of the tooltips on the MAP page:
<a href="nurseries.html?panel=9#mangatarem" title="Go to native species nursery listing" target="_blank">
What do I need to do in order for this to work? I tried reordering the code to read { defaultPanel: params.panel ? params.panel:
0, useFixedPanelHeights: false } and even tried combining the two { useFixedPanelHeights: params.panel ? true: false } but nothing worked. Any suggestions?
Many thanks in advance for your assistance!!
Joy

Hi Joy,
Without going to a lot of trouble in writing an onload event, the following method is feasable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" />
<style>
.region {
    color: #090;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 2em;
</style>
<script src="SpryAssets/SpryAccordion.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script> var params = Spry.Utils.getLocationParamsAsObject(); </script>
</head>
<body>
<div id="acc" class="Accordion" tabindex="0">
<span class="region">Luzon</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1.1</div>
    <div class="AccordionPanelContent">
      <div class="nurseryProfile">
        <table border="0" >
          <tr>
            <th width="122" class="nurseryCategory" scope="row" >Location:</th>
            <td width="422">Morong; Bataan</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Institution:</th>
            <td>Center for Biomolecular Science</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Contact Person:</th>
            <td>Dr. Lourdes J Cruz <br />
              [email protected]</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Species Available:</th>
            <td> </td>
          </tr>
        </table>
      </div>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1.2</div>
    <div class="AccordionPanelContent">Content 1.2</div>
</div>
<span class="region">Visayas</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2.1</div>
    <div class="AccordionPanelContent">Content 2.1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2.2</div>
    <div class="AccordionPanelContent">Content 2.2</div>
</div>
<span class="region">Mindanao</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Bukidnon Province</div>
    <div class="AccordionPanelContent">
      <div class="nurseryProfile">
        <table border="0" >
          <tr>
            <th width="122" class="nurseryCategory" scope="row" >Location:</th>
            <td width="422">San Vincente; Baungon; Bukidnon</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Institution:</th>
            <td>Kalangan San Vincente Farmer’s Association</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Contact Person:</th>
            <td>Mr. Nonito Antoque <br />
            0926 904 7336</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Species Available:</th>
            <td> </td>
          </tr>
        </table>
      </div>
      <hr width="565" align="center"/>
      <div class="nurseryProfile">
        <table border="0" >
            <tr>
              <th width="122" class="nurseryCategory" scope="row" >Location:</th>
              <td width="422">Brgy. Imbayao; Malaybalay City; Bukidnon</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Institution:</th>
              <td>DENR Community-Based Rainforestation Project</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Contact Person:</th>
              <td>Mr. Felix Mirasol (CENRO & PASU)<br />
              [email protected]</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Species Available:</th>
              <td> </td>
            </tr>
        </table>
      </div>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Compostela Valley Province</div>
    <div class="AccordionPanelContent">
        <div class="nurseryProfile">
        <table border="0" >
            <tr>
              <th width="122" class="nurseryCategory" scope="row" >Location:</th>
              <td width="422">Maragusan; Compostela Valley</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Institution:</th>
              <td>Kasilak Development Foundation</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Contact Person:</th>
              <td>Joemil Montebon<br />[email protected]</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Species Available:</th>
              <td> </td>
            </tr>
        </table>
      </div>
    </div>
</div>
</div>
<script>
    var acc = new Spry.Widget.Accordion("acc", { defaultPanel: params.panel ? params.panel: 0 });
</script>
</body>
</html>
Notes:
Apart from the 14 errors created by the table elements and their style rules, the above document is HTML5 validated.
The panels count include the <span>'s so that panel 0 is Luzon and panel 1 is the first accordion panel
Because the <span>'s are part of the accordion, they take on the accordion style rules so that you will have to tweak them.
I hope this helps.
Ben

Dashed rule between menu items nested inside an accordion panel widget in Muse?

I have a vertical menu widget nested inside an accordion panel widget and I want a dashed rule under each menu item. I already know I can have a solid rule by assigning a stroke to just the bottom of each menu item container.
I manually created dashed rules by "step and repeating" a 1px black square followed by 2px of space to a 380px width. I positioned these dashed rules under each menu item and grouped them with the menu. Then I placed the menu widget with the dashed rules into the content container for the accordion panel. The menu expands and collapses in the Preview mode but the dashed rules don't show up.
Muse CC 2014, iMac OS10.9

The link again is I forgot to add http to the link before, but it should have worked.
http://www.lipowiec.org/test/index.php
a) used Dreamweaver to create new site selected 1 column, elastic, centered, header, and footer
b) used spry to add horizontal menu to header
c) followed instructions from Spry Help
http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US ->
working with spry widgets -> working with the menu bar widget -> Customize the dimension of menu items as indicated
To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the width property to a desired width (or change the property to auto to remove a fixed width).
Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
Add the following properties to the rule: float: none; and background-color: transparent;.
Delete the width: 8.2em; property and value.
Under IE it's broken, under the other browsers it works.
There need to be more IE HACKS added.

Lightbox nested in Accordion panel is not working.

I am attempting to nest a lightbox slideshow in an accordion panel with less than desired results. I can get the Lightbox to nest and I can arrange the buttons just fine .However, when I preview it my forward and back buttons appear in the upper left corner and they are all messed up. This is absolutly useless as it destroys the aesthetics. Any insights as to how to fix this (not work around, I can do that...) would be appreciated.
Here are some screens:
1) layout is fine. Note the advance arrows on left and right of layout.
2) Layout seems to be fine in the preview. Thumbnails look good...
3) The advance arrows are not where I placed them in the layout. They are overlapping in the upper left corner.

Well, it's not recreating what I did becauseI don't see any images in your example. Did you populate the gallery?
Anyhow:
I created an accordion panel.
The first top panel contains a price list with text only.
Using the "+" I made a second panel and placed a "slideshow lightbox" widget
I populated the widget with roughly 100 jpegs compressed to 50% and edited my arrow keys placing them on the left and right which
gave the results in the image above.
This is repeatable on my end.

Accordion panels as navigation

Hi i want to use the accordion panels as navigation problem is when I load a new page the widget defaults to open on the first panel. I would like it to stay open on the panel which the link was made from also I can't figure the css to target the "AccordionPanelContent" and adjust :active.
Thanks dan

sorry ben don't know what you mean code below
cheers Dan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>DDI</title>

<link href="ddi.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script>
var params = Spry.Utils.getLocationParamsAsObject();
</script>

<link href="ddi.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script>
var params = Spry.Utils.getLocationParamsAsObject();
</script>

</head>
<body>
<div id="wrapper">
<div id="big_holder">
<div id="wrapper">
<div id="big_holder">
<div id="main_holder">
    <?php include "logo_topnav.php" ?><div id="main_pic"><?php include "gallery_print_1.php" ?><br />
hover on image to control</div>
    <div id="left_holder">
      <div id="copyheader">
       <a href="images/our-work_TV.gif"><img src="images/our-work_TV.gif" width="150" height="49" /></a>
</div>
    <div id="left_nav">
        <?php include "nav.php" ?>
</div>
    </div>    <div id="main_text">
DDI's close association with the print media, especially the glossies, has given rise to a number of special opportunities from inverting imagery to capture attention, to stitching sealed envelopes into the editorial sections and taking over entire covers!
    </div>
    <br class="clearfloat" />
</div>
<div id=footer>
    <?php include "footer.php" ?>
    </div>
</div>
</div>
<script>var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 0});
</script>

</div>
</body>
</html>

Adobe Muse Accordion Panel tabs drop down too far in the browser

I have designed a 3 tab accordion panel which works fine in Adobe Muse design mode but when I preview in the browser each drop down panel appears a lot deeper than the design.
I designed the drop down panels as 100px high and when looking at inspect elements on the browser it says they are 157px high? How can I fix this to display correctly?
Thanks

Hi,
I recreated it and it appears to work ok now.
Thanks
Sonia Hine
Graphic Designer
Trade Only Ltd
APG expo - the biggest events this autumn with 100+ exhibitors
Putting people and products together
10 September - Sandown Park Exhibition Centre
11 September - Manchester United Football Club
17 September - Red Cow Moran Hotel Dublin
www.tradeonly.co.uk/apg-expo<http://www.tradeonly.co.uk/apg-expo>
The Trade Only National Show 2015
The biggest event of the year!
21 and 22 January 2015
Ricoh Arena, Coventry, UK
www.tradeonly.co.uk/shows/tons<http://www.tradeonly.co.uk/shows/tons>
Nothing beats the power of face to face contact!
Trade Only Ltd., Unit 4, Rhodes Business Park, Middleton, Manchester M24 4NE
Trade Only Ltd. is registered in England and Wales, company number 05225734
Tel: 0844 880 2751 Fax:0870 145 3861 www.tradeonly.co.uk<http://www.tradeonly.co.uk/>

ANNC: Deja Vu Automated CSS Page Pack for Accordion Panel Magic

Deja Vu captures the clean and simple approach to design that
has gone into
our web sites for many years. In fact, we're sure you'll find
Deja Vu very
familiar.
Deja Vu comes with 5 page designs. Layouts are CSS-based,
fixed-width, and
centered. Pages are automatically created using the PVII Page
Pack interface
inside Dreamweaver.
Navigation menus are powered by the latest version of
Accordion Panel Magic
(required), which automatically highlights the current page
link and expands
the panel that contains it.
You'll learn how multi-column layouts can be designed in
Fireworks and how
Fireworks is used to develop the CSS that makes your columns
render with
equal heights. It's mathematically precise yet clear and easy
to
understand - and kind of fun if you're a designer just
getting into CSS.
Deja Vu comes with a comprehensive User Guide and free
technical support.
Additional features:
Works in Dreamweaver Templates
Search engine friendly
Standards-based code
$60
http://www.projectseven.com/products/templates/pagepacks/dejavu/
The PVII Team

Well I had the same thought when I tried your demos (very
nice looking
BTW) but I guess it's not a problem for the majority of
people. Anyway
since you announce it on this NG I guess you're also
interested in
feedback too.
Kim
http://www.geekministry.com
Al skrev:
> On Tue, 05 Dec 2006 15:34:38 -0500, Thierry |
www.TJKDesign.com
> <[email protected]> wrote:
>
>> Al Sparber- PVII wrote:
>>> It's kind of like having a CSS guardian angel
hovering over you you.
>>
>>>
http://www.projectseven.com/products/templates/pagepacks/bpotter/demo.htm
>>>
>>
>> Al,
>> I know you didn't ask, but I thought I'd give you a
heads-up regarding
>> the
>> menu in this template:
>> I find it difficult (impossible?) for keyboard-users
to "get rid of" that
>> flyout menu once it is opened.
>>
>
>
>
http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm
>
>
> We deliver our pages in a default configuration. It's
different from
> your opinion so let's just agree to disagree. We've had
this discussion
> before and a rehash would serve no constructive purpose.
Feel free to
> email me if you have any further questions.
>
>
> Cheers
> --Al

100% width - Accordion Panels

Similar Messages

Maybe you are looking for