tab panel accordion Spry, link to a page of diferent

Similar Questions

• Menu accordion spry link does not

  I built a menu accordion spry using Dreamweaver CS5. I noticed that the menu accordion navigation labels cannot be linked to pages. See the Overview of link in the menu accordion and notice that it doesn't not goes not to "overview.html" I added in the code. What I am doing wrong?

  Thank you. Any help is greatly appreciated.

  I see this in your css spry file - you could try to remove the two entrances to the user to select

  * NOTE: * This rule uses -moz-user-select and -khtml-user-select properties to prevent the * user from selecting the text in the AccordionPanelTab. These are proprietary browser * properties that only work in Mozilla based browsers (like FireFox) and KHTML based * browsers (like Safari), so they will not pass W3C validation. If you want your documents to * validate, and don't care if the user can select the text within an AccordionPanelTab, * you can safely remove those properties without affecting the functionality of the widget. */.AccordionPanelTab {     background-color: #FFF;     border-bottom: dotted .5pt gray;     margin: 0px;     padding: 6px;     cursor: pointer;     -moz-user-select: none;     -khtml-user-select: none;     font-family: Georgia, "Times New Roman", Times, serif;     font-size: 9pt;     background-image: url(../images/mykcurve_expand.gif);     background-position: right;     background-repeat: no-repeat;
  

• Panel accordion SPRY (Version 1.6)

  QUESTION: Is it me, or is it Adobe? To the best of my knowledge, I have never fiddled the following IE hack; However, validity checking CSS FF ToolBox he rejects.
  
  CODE RELEVANT CSS (LINES 152-157)
  
  / * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.
  UL. MenuBarHorizontal iframe {}
  position: absolute;
  z index: 1010;
  Filter:alpha(opacity:0.1);
  }
  
  CSS VALIDITY CHECK
  156 ul. MenuBarHorizontal iframe are trying to find a semicolon before the name of the property. Add
  0 ul. MenuBarHorizontal null Parse Error iframe
  156 ul. MenuBarHorizontal iframe Opacity property does not exist in CSS level 2.1 but exists in [css3]: 0.1
  156 ul. MenuBarHorizontal iframe Parse Error 0,1);
  157 ul. MenuBarHorizontal iframe Parse Error}
  
  SOURCE: http://homepage.Mac.com/moogoonghwa/Imagine_Prototype/content/
  
  PAGE UNDER CONSTRUCTION: I apologize for the appearance of my page source, but I decided to rebuild my page and take advantage of knowledge news and upgrades that I won in your company especially good.
  
  Roddy

  SUMMARY
  It is a badly written hack that does not validate as proper CSS code. You can leave knowing that your CSS document will not validate, or delete it. The consequences of removal do not seem to be awesome.

  RECOGNITION: Thanks to David Powers and Al Sparber.

  MY RECOMMENDATION: If you should decide to leave and use the badge of W3 CSS validation, then place a comment in your CSS code to recognize what you've done.

  Roddy

• How to combine the Spry Accordion with link pseudo classes?

  Hello

  I tried to get the text of the link I've included in the tabs Panel accordion to behave according to the behaviour of the accordion (in particular the hover state) but so far struggled to do. I hope I explained that well - does anyone know if it's possible to do? I can provide the code later if necessary.

  Essentially, when you hover over the text of the link it works as expected, but as soon as you place the cursor on it - while still having your mouse over the tab-text changes color (which is okay) but because you're still hovering above the current tab, only the background color is clashing with the color of the text. If you mouse then on the tab itself the background color changes and everything seems normal again. I am looking for a way to combine the features of both, namely to have the sequence of the text, but with the right css applied so that it looks correctly part of the accordion behavior.

  Help would be very appreciated.

  See you soon.

  If you change

  onclick = "MM_goToURL ('parent', ' audio / index.ht ml');" return document. MM_returnValue'> Audio

  TO

  Audio

  It works the way you want.

  Also have a look here http://backyardfurniture.com.au on the Help menu of the Accordion Panel.

  GRAMPS

• Tabbed panels appear is no longer

  Hi people, recently I used the Spry tabbed panels 2.0 widge on this page: www.arrowmark.co.nz/clients and on this pagehttp://tatlerprime.co.nz/conference.html but the tabs no longer appear and everything is arranged vertically to the bottom of the page. With the help of the Gramps altruistic, I adapted my pages to activate quick links to tabs and named anchors and other useful settings to help visitors navigate through the tabs and their content.

  Several things happened since then that I built these pages: my Windows 7 profile became corrupted and I had to start a new profile which means I lost access to the data of the app. I also upgraded to DW cs6. And I also lost access to my widgets Panel.

  One of these issues could have caused the problem, but maybe also this widget no longer works in Cs6.

  However, there is another possibility: that I inadvertently brought a change in the code that prevents the tabs appear. Is anyone able to take a look and let me know which is the more likely before starting a rebuild from scratch?

  Thanks in advance,

  JO

  [Update: I've narrowed the problem.] The panels are apart when I change the value of 0 defaultTab to 'params.tab? params. Tab: 0 ", (which I use as part of a script that allows me to send email links and links of the menu bar value specific tabs and their content.) If anyone knows another way to achieve this without affecting the behavior of the tab, I would be really grateful. [As altruistic Gramps kindly provided me with the code I messaged him but also ask here in case anyone is able to help me until he gets to the next line]

  Post edited by: BoppyW update

  The problem is because you link to Adobe Labs for SpryURLUtils.js:

  Adobe has announced a couple of weeks ago that he was no longer invest in the development of Spry (see
  ( l http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm). Therefore, the files are no longer available on Adobe Labs.

  You must download the files Spry of GitHub. Copy SpryURLUtils.js in your local site and a link to the local version rather than on Adobe Labs.

• How to link to a specific spry in Adobe Dreamweaver CM³ tabs Panel?

  Hi all

  I have a homepage using panels to Spry tab with 6 panels. I want you assign a URL that is unique to each panel so that I can link directly to each tab to other pages in the Web site.

  I found this question asked and answered for previous versions of Dreamweaver. Dreamweaver CC now (starting August 2012) use widgets to jQuery UI for panels with tabs, so I think it's why I'm not having much success with solutions that are already out there.

  Please note that I am relatively new to the web languages and Web site design.

  I also created a version that shows how a link to a specific panel or a tab in a tab or jQuery UI accordion: http://foundationphp.com/tutorials/jqui_specific.php.

• Want to get spry accordion panel will remain open while a page to this article

  Is there a way to get an accordion spry tab remain open while on a page in a section? For example, if I am in the Panel "information section" and I click on a link (references.html) I want the menu accordion will stay open until I go to a new menu panel. Is this possible with this Spry Accordion widget?

  In documents (pages) at the bottom of the document, you will see a line similar to

  acc1 var = new Spry.Widget.Accordion ("acc1", {useFixedPanelHeights: false, defaultPanel:-1 });

  For each document in the Panel "ABOUT LSNY" - PUBLICATIONS, change the value to 1

  For each document in the "MEMBERSHIP - CONTACT" panel, set the value to 2

  And so on for each Panel
  

• a link to the Spry tabs Panel

  Hello
  I need help connecting a tab in the Spry tabs Panel, the second tab in this Panel is "details", I want to create a link in the homepage to this tab, so clicking on the link will take you to the Board page where the second tab is opened and displayed. How can I do this?
  Thank you

  Check out this tutorial by David Powers, I used it a few days ago and it works perfectly.

  http://foundationphp.com/tutorials/spry_url_utils.php

• Can I use Spry tab panels to create a multi page form?

  I am trying to install a multi-page form and failed using PHP Sessions.

  Would it not possible to use the Spry tab panels in DW CS3 and divide the various sections of the form in the panels?  My thought is that the Form around the main tab Div element and the button send at the end of the form.  Would this work?

  If so, is there a way to have a button 'Next' to Active the next tab so that the user can easily tab by each form field and easily go to the next tab to help ease of use?

  But you don't need to use behaviors. Simply type in the link in Code view.

  Moreover, the tabs themselves are a way to browse between panels.

  Your links at the bottom of each panel will be "extra" ways to get around.

  On Panel #1 tabs:

  (Nothing on the left)

  right: "Next Panel" (will move to tab #2)

  Next group

  The Panel tabs #2:

  left: "previous Panel.

  <>href =" # " OnClick =" TabbedPanels1.showPanel (0); return false; "> Previous Panel

  right: "next Panel."

  <>href =" # " OnClick =" TabbedPanels1.showPanel (2); return false; "> Next group

  and so on.

  Don't forget, the panels are counted from 0: the first Panel is 0, the second is 1, the third is 2, etc.

  Beth

• Link to Spry Panel tabs IN another panel of Spry tabs

  Hi, I can't try to understand how from another page a link to a tab within another panel tabs Panel.

  I followed the tutorial on this site http://foundationphp.com/tutorials/spry_url_utils.php and have the link work properly.  I changed a code and now I have a panel tabs residing in one of the tabs in an existing tab

  Here is a picture of what it looks like.

  

  I have my link on the page linked to "Hunt" for page B.  I added the animal tabs Panel.  Each tab includes pictures of each type of animal.

  Here's my link code:

  < a href = "galtemp.html? tab = 1 #gallery" >

  This works well and open the tab I want.

  Now what I want to do is to click on a link "Elk" in another page and have the tabs 'hunts' open and "Elk" open as well.

  I tried things like:

  < a href = "galtemp.html? tab = 1 #gallery & tab = 2 #huntgal" > This does not work.

  < a href = "galtemp.html? tab = 1 #gallery? tab = 2 #huntgal" > This does not work.

  On another site, I created, I used this code:

  < a href = "#" onclick = "TabbedPanels1.showPanel (1), TabbedPanels2.showPanel (0)" >

  It worked, but Island link was on the same page.  I could adapt it works in another page?

  Any help would be appreciated.

  Thanks Winrol

  Try

  How to get to the Panel tabs in the tabs Panel

  http://forums.Adobe.com/message/4980068

• Question of the accordion Spry tabs

  Hello

  I am trying to create a menu accordion spry for a navigation bar and have some difficulty.

  This is the first time I tried it, so I'd appreciate any help.

  The customer wants the tabs to be:

  Home

  Students

  The high school students

  College students

  Professionals of the

  Parents/carers

  Seminars

  Bio

  Q & a Blog

  Testimonials

  So what they want high school students and college students in child tabs under the parent tabs and all the other tabs parent.

  They asked a spry accordion.

  They want the navigation bar on the left.

  Here is the link to the online site:

  http://www.elynncohen.com/index2spry2.html#

  and here are my questions:

  1. the spry accordion has a box around it on the mouse down, but I can't understand how get rid of it. I checked all of the CSS rules for the spry accordion and none of them seem to have rules that surround them.

  2. all tabs have an area of content under them, and we want only the content tab of the student areas. You see what happens when you click on one of the tabs, you get a little thing that says content 1, 2, etc. I tried to delete them in the code and the page becomes completely crazy when I do and nav bar areas stretching all the way across the page.

  3. I can't figure out how to get the child tabs (which would be the tabs under the students who say high school and college) to have two tabs. You will see that there no tab high school here now. When I try to cut and paste the code to try to get two tabs, it doesn't. The spry malaccaaccordian framework only creates a content under each tab area.

  4. I would like the tabs of the child to be narrower than the parent tabs height and be indented so that they clearly will switch off and different than parent tabs.

  Any help would be appreciated!

  Thank you!!!

  Here is my code:

  <! DOCTYPE HTML >

  < html >

  < head >

  < meta charset = "UTF-8" >

  < title > your career guidance and college Counseling < /title >

  < meta name = "Keywords" content = "career guidance, College orientation, job search, career choices, College options, options career, work, jobs, opportunities, change career, new career, new job" / >

  < name meta = "Description" content = "" your career guidance: career and College Counseling ""Given your choice of college & career options"'Preparation for the world of work after College' 'Looking for a new job to pursue your career'"

  'In transition, and taking into account new opportunities '.

  "Search for a career important and significant change" / >

  < meta content = "Publisher" name = "Your career orientation, LLC" / >

  < name meta = 'Copyright' content = 'Copyright 2012, your career guidance, LLC. All rights reserved. "/ >

  < meta content = "Author" name = "Lisa Mark" / >

  < name meta = "Language" content = "en-US" / >

  < name meta = 'distribution' content = 'global' / >

  < meta content = "revisit-after" name = 'ten days' / >

  < name meta = "Robots" content = "All" / >

  < link rel = "Index" href = "index.html" / > "

  < link rel = "Site map" href = "sitemap.html" / > "

  "< script type =" text/javascript"src="//use.typekit.net/ifb2bte.js "> < / script >

  < script src = "SpryAssets/SpryAccordion.js" type = "text/javascript" > < / script > "

  < script type = "text/javascript" > try {Typekit.load () ;} catch (e) {} < /script >}

  < style type = "text/css" >

  <!--

  {body

  margin: 0;

  padding: 0;

  Color: #000;

  do-size: 100%;

  line-height: 1.4;

  background-image: url(images/background.gif);

  background-repeat: repeat;

  }

  / * ~ ~ Tag of the element selectors ~ ~ *.

  UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */

  padding: 0;

  margin: 0;

  }

  H1, h2, h3, h4, h5, h6 {p}

  margin-top: 0;     / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */

  padding-right: 15px;

  padding-left: 15px;

  }

  . Container .sidebar1 h3 {}

  padding-left: 0px;

  color: #C60651;

  font-size: XL;

  }

  H1 {fort

  color: #C60651;

  do-size: 90%;

  do-family: «Bold ITC Binary»;

  }

  H1 strong em {}

  }

  an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}

  border: none;

  }

  / * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */

  a: link {}

  color: #414958;

  text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.

  }

  a: visited {}

  color: #4E5869;

  text-decoration: underline;

  }

  a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}

  text-decoration: none;

  }

  / * ~ ~ This container surrounds all the other div tags giving them their percentage width ~ ~ * /.

  . Container {}

  Width: 80%;

  Max-width: 1260px; / * a max-width may be desirable to keep this provision to become too wide on a big screen. This keeps the more readable line length. IE6 does not respect this statement. */

  min-width: 780px; / * a min-width may be desirable to keep this provision to become too narrow. This keeps the more readable line length in the side columns. IE6 does not respect this statement. */

  Background: #FFF; / * set to auto on the sides, coupled with the width available to the centres. It is not necessary if you set the width of the .container to 100%. */

  margin-top: 0;

  margin-bottom: 0;

  margin-right: auto;

  left margin: auto;

  border-right-width: thick;

  border-left-width: thick;

  border-right-style: solid;

  border-left-style: solid;

  border-right-color: #C60651;

  border-left-color: #C60651;

  }

  / * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.

  . Header {}

  padding-top: 40px;

  }

  {#Quote}

  float: right;

  Clear: left;

  right margin: 1%;

  }

  / * ~ ~ These are the columns for page layout. ~~

  (1) padding is only placed on the top and/or bottom of the divs. The elements contained in these divs have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.

  (2) no margin was given to the columns, because they all floated. If you need to add the margin, avoid placing on the side you're floating into (for example: a right margin on a div set to float to the right). Many times, padding can be used instead. For divs where this rule needs to be broken, you must add a statement of ' display: inline ' to the rule of the div to tame a bug where some versions of Internet Explorer double the margin.

  (3) given that the classes can be used several times in a document (and an element can also have several classes applied), the columns have received the names of classes instead of IDs. For example, two sidebar div could be stacked if necessary. These can easily be changed to the ID if that's your preference, as long as you don't use them once per document.

  (4) If you prefer your nav on the right instead of the left, simply float those columns as the opposite direction (straight instead of left all) and they will return in reverse order. There is no need to move the div in the HTML source code.

  */

  {.sidebar1}

  float: left;

  Width: 15%;

  padding-bottom: 10px;

  top of the margin: 40px;

  margin left: 25px;

  background-color: #FFF;

  Police-family: museo - without.

  Arial;

  Max-width: 200px;

  min-width: 180px;

  }

  . Happy {}

  float: left;

  padding-top: 10px;

  padding-bottom: 10px;

  padding-left: 10;

  Police-family: museo - without.

  Arial;

  top of the margin: 40px;

  padding-right: 10px;

  Width: 50px;

  font size: large;

  }

  . Container content p {}

  padding-top: 0px;

  }

  {.sidebar2}

  float: left;

  Width: 20%;

  background-color: #D3CCB2;

  top of the margin: 40px;

  padding-top: 10px;

  border-bottom-color: #FFF;

  border-right-color: #FFF;

  border-bottom-color: #FFF;

  border-left-color: #FFF;

  border-right-width: 5px;

  Police-family: museo - without.

  Arial;

  do-size: 90%;

  right: 12%;

  }

  / * ~ ~ This group selector gives the lists in the domain content space ~ ~ * /.

  . Content ul, ol {} content

  padding-top: 0px;

  padding-right: 25px;

  padding-bottom: 15px;

  padding-left: 40px;

  Police-family: museo - without. Arial;

  do-size: 100%;

  color: #666;

  }

  . Container content p {}

  Police-family: museo - without.

  Arial;

  padding-top: 0px;

  padding-left: 17px;

  padding-bottom: 0px;

  }

  {#Quote}

  float: right;

  Clear: both;

  }

  / * ~ ~ The list of navigation styles (can be removed if you choose to use a contextual menu premade as Spry) ~ ~ * /.

  UL. NAV {}

  list-style: none; / * This creates space between the following content browsing * /.

  Police-family: museo - without. Arial;

  line-height: 250%;

  }

  . NAV {}

  Police-family: museo - without.

  Arial;

  padding-left: 0px;

  }

  {ul li. NAV

  Police-family: museo - without. Arial;

  padding-bottom: 10px;

  }

  UL. NAV, the ul.nav: visited {/ * these selectors of grouping allows you to ensure that your links to retain their look button even after the ongoing visit * /}

  display: block; / * Gives the link properties block causing it to fill the whole container LI. This causes the entire area responds to a mouse click. */

  text-decoration: none;

  Color: #333333;

  background-color: #FFF;

  Police-family: museo - without. Arial;

  padding-top: 5px;

  padding-right: 5px;

  padding-bottom: 10px;

  padding-left: 15px;

  }

  UL. NAV a: hover, ul.nav one: ul.nav active,: focus {/ * this changes the background and color of text for browsers of the mouse and the keyboard * /}

  color: #C60651;

  Police-family: museo - without. Arial;

  background-color: #FFF;

  background-image: url(images/navbar2.gif);

  padding-bottom: 10px;

  }

  . Content img {}

  }

  / * ~ ~ Footer ~ ~ * /.

  .footer {}

  position: relative; / * This gives hasLayout IE6 to well clear * /.

  Clear: both; / * This clear property forces the .container to understand where the columns end up and contain them * /.

  padding-top: 0px;

  padding-right: 0;

  padding-bottom: 10px;

  }

  / * ~ ~ various float/clear classes ~ ~ * /.

  .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */

  float: right;

  left margin: 8px;

  }

  .fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */

  float: left;

  right margin: 8px;

  }

  .clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}

  Clear: both;

  height: 0;

  font size: 1px;

  line-height: 0px;

  }

  . Container content {}

  Width: 50%;

  font size: large;

  Police-family: museo - without. Arial;

  }

  #footer {width: 100%;}

  background-color: #FFF;

  }

  . Container .sidebar2 h4 img {}

  padding-left: 20px;

  padding-top: 0px;

  }

  .sidebar2 p img {}

  border: medium solid #C60651;

  }

  {#Insert_logo2}

  border-top-width: 4px;

  border-right-width: 4px;

  border-bottom-width: 4px;

  border-left-width: 4px;

  border-bottom-color: #fff;

  border-right-color: #fff;

  border-bottom-color: #fff;

  border-left-color: #fff;

  }

  . Container content content p strong {}

  Police-family: museo - without. Arial;

  }

  . Container content content {}

  Police-family: museo - without. Arial;

  }

  . Container content ul li {strong

  Police-family: museo - without.

  Arial;

  font-size: 95%;

  line-height: 150%;

  list-style-type: disc;

  }

  . Container content ul {}

  }

  {test}

  do-family: «Bold ITC Binary»;

  }

  . Container .sidebar2 p img {}

  margin-right: auto;

  left margin: auto;

  border-top-width: medium;

  border-right-width: medium;

  border-bottom-width: medium;

  border-left-width: medium;

  border-bottom-color: #C60651;

  border-right-color: #C60651;

  border-bottom-color: #C60651;

  border-left-color: #C60651;

  }

  {Strong Li

  line-height: 130%;

  list-style-type: circle;

  color: #978980;

  }

  . Container content ul {}

  }

  . Container .sidebar1 .nav {}

  margin-top: 10px;

  margin-bottom: 10px;

  }

  .sidebar1 .nav li {}

  padding-bottom: 10%;

  }

  .nav li a {}

  background-image: url(images/navbar2.gif);

  background-repeat: no-repeat;

  background-position: Center-right;

  left: auto;

  right: auto;

  Clip: rect (auto, auto, auto, auto);

  }

  . Container .sidebar1 .nav li a {}

  }

  . Container .sidebar1 h6 {}

  padding: 0px;

  Color: #000000;

  }

  #footer h3 {fort

  font-size: 60%;

  color: #978980;

  }

  . Container content p {}

  padding-right: 0%;

  padding-left: 0%;

  font-size: 85%;

  }

  . Container .sidebar2 p {}

  padding-right: 8%;

  padding-left: 8%;

  padding-top: 5px;

  }

  {#Insert_logo2 #Insert_logo2}

  padding-left: 15px;

  }

  . Container content ul {}

  color: #C60651;

  }

  H6 {}

  color: #978980;

  Police-family: museo - without.

  Arial;

  font size: 82%;

  padding-left: 20%;

  text-align: left;

  text-indent: 8px;

  }

  .nav li a {}

  padding-bottom: 10px;

  }

  H8 {}

  Police-family: museo - without. Arial;

  do-size: 100%;

  }

  H4 {}

  Police-family: museo - without.

  Arial;

  do-size: 100%;

  color: #C60651;

  padding-left: 17px;

  padding-top: 5px;

  padding-bottom: 0px;

  }

  . Container content p {}

  padding-left: 17px;

  padding-right: 30px;

  }

  .sidebar1 h8 strong {}

  do-size: 80%;

  Police-family: museo - without. Arial;

  }

  . Container .sidebar1 h7 {}

  font size: 40%;

  color: #978980;

  }

  H7 {}

  Police-family: museo - without. Arial;

  font size: 15%;

  }

  . Container .sidebar1 h8 {}

  Police-family: museo - without. Arial;

  }

  .sidebar2 p img {}

  Max-width: 100%;

  }

  . Container content img {}

  padding-left: 3%;

  }

  IMG {}

  position: static;

  text-align: left;

  }

  body, td, th {}

  Police-family: museo - without. Arial;

  }

  H5 {}

  do-size: 150%;

  color: #C60651;

  padding-left: 0px;

  Police-family: museo - without. Arial;

  . Container content p {}

  padding-left: 17px;

  padding-right: 30px;

  font-size: 87%;

  }

  . Container .sidebar2 p {}

  do-size: 90%;

  }

  . Container .sidebar1 .nav li {}

  Police-family: museo - without.

  Arial;

  }

  . Container .sidebar1 .nav li a {}

  padding-left: 0px;

  margin-bottom: 0px;

  height: 30px;

  }

  Li a {}

  padding-left: 2px;

  }

  ->

  < / style > <!-[if lte IE 7] >

  < style >

  . Happy {right margin:-1px ;} / * this negative margin of 1px can be placed on any of the columns in this layout with the same corrective effect.} */

  UL. NAV a {zoom: 1 ;}}  / * the property zoom gives IE the hasLayout trigger to fix additional whiltespace between the links * /.

  < / style >

  <! [endif]-->

  < link href = "SpryAssets/SpryAccordion.css" rel = "stylesheet" type = "text/css" > "

  < / head >

  < body > < script type = "text/javascript" >

  function pageWidth() {}

  return window.innerWidth! = null? window.innerWidth: document.documentElement & & document.documentElement.clientWidth? document.documentElement.clientWidth: document.body! = null? document.body.clientWidth: null;

  }

  function pageHeight() {}

  return window.innerHeight! = null? window.innerHeight: document.documentElement & & document.documentElement.clientHeight? document.documentElement.clientHeight: document.body! = null? document.body.clientHeight: null;

  }

  < /script >

  < div class = "container" >

  < div class = "header" > <! - end .header - >

  < class p = 'clearfloat' > < a href = "" #index.html ' id = 'Insert_logo2' "> < img src="images/YCD-logo-tag-RGB-web-SM.gif "alt ="Logo of your career branch"name ="Insert_logo"width ="50% "id ="Insert_logo2"style =" background: #FFF ""

  ; Display: block; "/ > < /a > < /p >

  < div id = "Quote" > < img src = "images/quote.gif" alt = "choose a job you love" width = "355" height = "81" > < / div > "

  < class p = 'clearfloat' > < / p >

  < / div >

  < div class = "sidebar1″" >

  < ul class = "nav" >

  < li >

  < div id = "Accordion1" class = "Accordion" tabindex = "0" >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < a href = "#" > home < /a > < / div >

  < div class = "AccordionPanelContent" > content 1 < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < a href = "#" > students < /a > < / div >

  < div class = "AccordionPanelContent" > < a href = "#" > school < /a > < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < a href = "#" > Professional < /a > < / div >

  < div class = "AccordionPanelContent" > 3 content < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < a href = "#" > Parent/educator < /a > < / div >

  < div class = "AccordionPanelContent" > 4 content < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < a href = "#" > seminars < /a > < / div >

  < div class = "AccordionPanelContent" > content 5 < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < a href = "#" > Bio < /a > < / div >

  < div class = "AccordionPanelContent" > 6 content < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < a href = "#" > Q & amp; A Blog < /a > < / div >

  < div class = "AccordionPanelContent" > 7 content < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < a href = "#" > stories < /a > < / div >

  < div class = "AccordionPanelContent" > 8 content < / div >

  < / div >

  < / div >

  < /li >

  < /ul >

  < / div >

  < div class = "content" >

  < p > given today's competitive job market, the global economy and has changed the corporate culture.

  is no longer, we rely on others to ensure our professional future. Choose or

  change your career guidance requires personal reflection, career education and an action plan. < /p >

  < img src = "images/if-you-are-.gif" alt = "If you consider your choice of college and career options" width = "197" height = "31" align = "left" >

  < ul >

  < br > < br > < li > < strong > given your choice of college & amp; career < facilities > options < /li >

  < li > < strong > preparation for the world of work after College < facilities > < /li >

  < li > < strong > looking for a new job to pursue your career < / strong > < /li >

  < li > < strong > transition and given opportunities < facilities > < /li >

  < li > < strong > seeking to make an important and significant career < facilities > < strong change > < / strong > < /li >

  < /ul >

  < img src = "images/Onethingisforsureraster.gif" width = "352" height = "49" alt = "one thing is sure, we all run our own careers, our own lives!" > "

  < Br > < p > building a successful and rewarding career requires linking your interests, education and experience of the trends in employment, growth industries and a career choice. It takes smart decisions on your college major, professional training and training options. With enthusiasm, persistence and unparalleled job search techniques, you can succeed in finding a path to the career that suits you. < /p >

  < p > we are your lawyer. We listen, assess, strategize, inspire, counsel and network on your behalf. With a personalized and comprehensive approach, we will work with you to help you create a plan of action; a path designed for you to get where you want to go and become what you want to be. < /p >

  < img src = "images/yourcareerourpassionraster.gif" width = "441" height = "20" alt = "Your career guidance, YOUR career is our passion!" > < / div > "

  < div class = 'sidebar2' >

  < p > < img src = "images/Counselingastudent.gif" width = "100%" alt = 'Lisa Mark advising a student' > < / p > "

  < p > our mission is to help you to discover, choose and create your direction for a challenging and rewarding career path < /p >

  < p > integrate us our experience with the work force today and advice expertise with your passions and career interests. We will introduce new career ideas yourself, target companies and generate opportunities for job and internship for you. < /p >

  < p > guide us step by step to ensure your success when applying for college, job interview

  and decision making process.

  < /p >

  < / div >

  < div class = "footer" >

  < div id = "footer" >

  < h6 align = "left" > your career guidance, LLC • 96 Harvard Avenue, Maplewood, New Jersey 07040 • (973) 996-0207 • [email protected] < / h6 >

  < / div >

  < p > < / p >

  <! - end .footer - > < / div >

  <! - end .container - > < / div >

  < script type = "text/javascript" >

  var Accordion1 = new Spry.Widget.Accordion ("Accordion1");

  < /script >

  < / body >

  < / html >

  1. the spry accordion has a box around it on the mouse down, but I can't understand how get rid of it. I checked all of the CSS rules for the spry accordion and none of them seem to have rules that surround them.

  2. all tabs have an area of content under them, and we want only the content tab of the student areas. You see what happens when you click on one of the tabs, you get a little thing that says content 1, 2, etc. I tried to delete them in the code and the page becomes completely crazy when I do and nav bar areas stretching all the way across the page.

  3. I can't figure out how to get the child tabs (which would be the tabs under the students who say high school and college) to have two tabs. You will see that there no tab high school here now. When I try to cut and paste the code to try to get two tabs, it doesn't. The spry malaccaaccordian framework only creates a content under each tab area.

  4. I would like the tabs of the child to be narrower than the parent tabs height and be indented so that they clearly will switch off and different than parent tabs.

  1 line 454

  style = "" outline: none; " " >

  2 & 3. Change your line code 455-491:

  #"> Home".

  #"> Students.

  #"> High school.
  College

  #"> Professional.

  #"> Parent/educator.

  #"> Seminars»

  #">Bio

  #"> Q & a Blog.

  #"> Testimonials»

  4. Add your HTML code for tabs child like this:

  ID 'submenu' =>#"> high school.

  Create a new css #submenu rule in your CSS document and set the style as you wish.

• Tab panels act as accordion

  Hi all.

  What I try to achieve is to have a panel with tabs or accordion panels is another.

  That is to say. When you have a section of the menu with group names what ever and when you click on one of the previous panels panels closes automatically and how ever big the current Panel is it narrows and opens the page and when the new Panel is open, how ever did a big pushes down on the page making it longer or shorter depending on the content.

  Thank you

  Please allow the components to overlap below if you don't want content to move below.

  Thank you

  Sanjit

• Spry tabbed panels Act!

  I use Dreamweaver CS6

  I use panels to Spry tab and would add two tabs.  In the property page, I use signs + to add the second tab.

  I will quote the tab, then I click on split to see what I did.  I noticed there are 2 content that appears, but when I go back to see

  the properties page, under boards, I see the first tab indicating the name, it should be, the second tab shows the following: < lack the content panel >

  If I go to split view and look at the code, I see this:

  < div id = "apDiv9" >

  < div id = "TabbedPanels2" class = "TabbedPanels" >

  < ul class = "TabbedPanelsTabGroup" >

  < class li = "TabbedPanelsTab" tabindex = "0" > PayStation < /li >

  < class li = "TabbedPanelsTab" tabindex = "0" > < /li > IP settings

  < /ul >

  < div class = "TabbedPanelsContentGroup" >

  < div class = "TabbedPanelsContent" > < br / >

  < br / >

  PayStation is the first tab

  Settings IP is the second tab

  I don't understand why it says missing content panel?

  Thank you

  Neil

  Hi Nancy,.

  All errors are gone now:

  http://validator.w3.org/check?URI=http%3A%2f%2F108.132.131.149%3A80+&charset=%28detect+aut omatically%29&doctype=Inline&group=0&verbose=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2 Fvalidator.w3.org%2Fservices

  Unfortunately, the table is still outside the area of the tab?

  Neil

• Width of the Spry tabbed panels

  The width of the tabs at the top of the Spry tabbed panels appear to be about 70% of the width of the Panel. Adding additional tabs can wrap around to create a new line of tabs.

  How is it possible to extend the first line of tabs at 100% of the width of the Panel to avoid the film?

  Thank you very much.

  I had a quick glance at your pages using the URL you provided private.

  The width of the tabs is affected by the style of #content ul rule that starts at line 242 of style.css. It sets the width of the bulleted lists in the content

  75%. The tabs of a group of Panel tabs are actually an unordered list that's why tabs are affected.

  To resolve this issue, remove the width of #content ul or add this new rule of style:

  #content ul. {TabbedPanelsTabGroup}

  Width: 100%;

  }

  This will make the tabs fit into a single line in two of your pages. The other page was always three lines of tabs (one on the last row), but you can fix this by reversing the order of Customer-centric competitive positioning"and"focus group interviews.

• How do without panels on accordion Spry open by default?

  I have an accordion Spry of several panels.  I want the default behavior for any of the panels to open until a user clicks.  The default behavior is currently the first Panel to expand automatically when the page is first visited.  How can I fix it?

  Here it is:

  http://labs.Adobe.com/technologies/Spry/samples/accordion/AccordionSample.html

  Under the subheading "of starting with all the panels closed.

  Martin