How to change the content of a 'div '?

Hello!

To keep it short: I've recently started working with dreamweaver and stumbled upon this question:

I've got 2 DIV tags In one of them (has) I had several images in the other (B) I got the images and the text.

I press one of the images in the div tag has, I want the content of the div B to change.

That is, I can navigate in different parts of the page (thanks to the div B) by pressing one of the div tag hasimages, while the rest of the page remains the same.

I suspect this action will involve JavaScript, but since I'm fresh to this, I can't say with certainty. If you understand what I'm trying to make here, I'd appreciate your help. If you want to be able to keep things simple or give me a clue where to start to solve this, it would be awsome!

Thank you!

But what happens if I tabs as the images of my collection?

You can insert text images in your HTML markup.

What happens if I want the background to be transparent?

Change properties background CSS in the CSS panel tabs.

Is it possible to have several panels directly below the other tabs where each tab you click gives a new set of tabs?

Ever tried stacking panels with tabs, but I imagine you could.

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB
http://ALT-Web-design.blogspot.com/

Tags: Dreamweaver

Similar Questions

  • HTML Help Home button - how to change the content

    I use Robohelp 11 and we post our content as microsoft HTML help.  I wonder how to change the content of the button the top of the page next to the front buttons and back at home.  Since it's HTML Help I can't use a skin to change the buttons, but I need to change what is displayed when you click the home button.  I can't find how to change when the button links to.  I just want to link to our home page.

    Thank you!

    Matthew

    Hello

    On luck outside, that you are not really wanting to address the 'skin in a CHM' quite yet, try this.

    First, note the path and the name of the file that you want to appear when the user clicks on the Home link.

    Open the pod of setting up a project. (View > pods > project configuration)

    Expand Windows, and then double-click the CHM window. (If you do not see a CHM window, you will need to create a)

    In the Properties window, click the Advanced Properties button.

    And from the Advanced Properties dialog box, you type (Yes, you heard that right, TYPE) the path and the name of the file you want. (Remember this first step?) Note that you can also type a URL pointing to a website here.

    Hope this helps... Rick

  • How to change the content of the 'account name' column in the' overview of accounts. "

    Hello

    I use Oracle Identity Manager 11 GR 2!

    In the Self-Service under "My access", I see a list of all the service accounts. If for example I create a account, then there's a strage number displayed in the "Account name" column  See my photo...

    See the image: IOM user

    My question is, how can I change the contents of this column? I never put this number!

    Thank you!

    BR

    To change the name of the account to the account user id, you can follow the instructions below:

    1. open the form of the process of the resource that you want to display the user id as the name of account, instead of this strange number for example. UD_IPNT_USR

    2. create a new version of the form.

    3. go in the Properties tab.

    4. Select the user ID property and click on add property button.

    5. Select the account name and the value is false.

    6. save the form and make the version active.

    7 connect to IOM self-service console, select a user with iplanet account for her. You can see the user id of the account in the account instead of the strange number name,

    HTH

  • How to change the content of the file edge.js programmatically

    Hello

    I want to change the content of the file _edge.js programmatically using _edgeActions.js. Is this possible?

    I would like to add other elements (see the image attached) into the DOM of _edge.js using _edgeActions.js.

    edge_question.jpg

    How to do this?

    Thank you

    As you try to edit the same file that is running to make your content and the edge of the actions, I don't think its possible.

    On the other hand, I think that browsers restict you to write directly on the drive of the browser.

  • How to change the content to display dynamically

    Hello

    In my application I need to change the contents of the active screen

    on the buttonclick... After click on the button I can't refresh content

    What could be the solution for this?

    Hi Sheeluwiki

    Thnx for the reply

    I solved it myself

    For BrowserField, we write

    _browserField.setFocus();_browserField.requestContent({HTML PAGE PATH});
    

    . setFocus() is necessary, or it gives IllegalStateException.

    and for LabelField and title... It is same as you suggest

  • How to change the content of the body of the notification email process?

    Hi Jari,

    With your help, I've implemented the e-mail notification process in our application. Now users need a few details of the form should be included in the e-mail.
    for example:

    Content of the body of the email should include

    -> Resorce management Form (Form name)

    -> test project (list of selection field value) has been changed.

    Train details - etc.

    Must be included.

    I tried the code below
    declare

    l_body_html varchar2 (4000);

    Start

    l_body_html: = "< br > < p > resource management form: P8_PROGRAM_NAME changed < /p > ';"


    () apex_mail. Send
    p_to = > 'ramya.n.flash.com ',.
    P_FROM = > '[email protected] ',.
    P_CC = > '[email protected] ',.


    P_BODY = > l_body_html,
    P_BODY_HTML = > l_body_html,

    p_subj = > "Notification Mail!");

    wwv_flow_mail.push_queue ();

    end;

    I received the email, but here, I can see: P8_PROGRAM_NAME (field name) has been changed, not the value as Test 1 project has been changed.

    Please help me solve this problem.

    Thank you
    Robette.

    Hello

    You are in the wrong place with urgent questions. It's volunteer forum.

    But try

    declare
      v_name  appl_tbl.name%TYPE;
    begin
    
      SELECT name
      INTO v_name
      FROM appl_tbl
      WHERE ID = :P8_PROGRAM_NAME;
    
      l_body_html := 'Resource Management Form ' || v_name || ' has been changed';
    
     -- rest of needed code here
    

    Kind regards
    Jari

    http://dbswh.webhop.NET/dbswh/f?p=blog:Home:0

  • How to make the content of the DIV on the page that I'm going to fade out?

    I'm trying to figure out how to make the content of a DIV on the page I'm clicking away from fade. I know how to do the Next page load with a fade in. So I'm half there (I guess).  WiX has many designs which use for this purpose. Here is a link to an example:

    http://www.wix.com/website-template/view/HTML/633?originUrl=http%3A%2f%2Fwww.wix.com & numbe r page = 1 & = 1 position-in-page

    This is the code I use to make a DIV load with a melted in:

    I have add this CSS code in the div I want to apply the fade in effect to:

    Animation: fadein 2s;

    -moz-animation: fadein 2s; / * Firefox * /.

    -webkit-animation: fadein 2s; / * Safari and Chrome * /.

    -o - animation: fadein 2s; / * Opera * /.

    And I add this additional code to the CSS stylesheet:

    }

    fadein {} @keyframes

    of {}

    opacity: 0;

    }

    to {}

    opacity: 1;

    }

    }

    @-moz - keyframes fadein {/ * Firefox * /}

    of {}

    opacity: 0;

    }

    to {}

    opacity: 1;

    }

    }

    @-webkit - keyframes fadein {/ * Safari and Chrome * /}

    of {}

    opacity: 0;

    }

    to {}

    opacity: 1;

    }

    }

    @-o - keyframes fadein {/ * opera * /}

    of {}

    opacity: 0;

    }

    to {}

    opacity: 1;

    }

    }

    Tutorial with demo & downloadable files here: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

  • I need to create a table of contents in iPages but I want only one word for the title, not the line of holes. Or, how can I change the contents of the table? Thank you!

    I need to create a table of contents in iPages but I want only one word for the title, not the line of holes. Or, how can I change the contents of the table? Thank you!

    Yes, you can have a one word title, by assigning a paragraph style title to this one word. No, you cannot change the text in a Table of contents, but you can change paragraph style font attributes (line) and add for example, a head of points between the types of OCD paragraph and page numbers. No part of the table of contents will not provide hyperlinks in exported PDF documents.

    When you look up in the menu bar, you can see the word iPages, or simply Pages. There is no product of iPages.

  • I have 5 html pages that share a common header, footer and sidebar. How to use my navigation bar to change the content of the body without duplicating a lot of code?

    I have 5 html pages that share a common header, footer and sidebar. How to use my navigation bar to change the content of the body without duplicating a lot of code? Thank you!

    Read the help section of DW on models.

    Using Dreamweaver | Creating a Dreamweaver template

    Or use Server-Side Includes

    Nancy O.

  • How I change the fonts and colors of default return?

    I changed the font and the color of the text through the Tools button and the button options and the tab content. I can't find anything tell me how to change the fonts and colors to the colors and fonts by default. Can you advise me? I use Windows 7 Home Premium OS. Thank you.

    Hi Brenda19605,

    You can use this article to set the fonts and colors: https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use?esab=a & s = do & r = 0 & s = as

    The default settings for the police are in this article:
    https://support.Mozilla.org/en-us/KB/some%20text%20shows%20up%20bold%20after%20upgrade

    Unfortunately for the default color has no good reference. For the text, but it is black (most lower-left), the background is white (color above left). Unvisited links is blue (column 8, line 5) and the visited link is purple (column 9, line 5).

    Let me know if you need help more!

    Lordfreak

  • Im trying to change the content of my internet but it askes me the supervisor password and I never set one what do I do?

    Im trying to change the content of my internet but it askes me the supervisor password and I never set one what do I do?

    * original title - I do not know my supervisor password by trying to change the content of my internet, how can I know? *

    Hello

    1. what operating system is installed on your computer?

    2. what version of Internet explore is installed on your computer?

    3. you are the administrator of the computer?

    4. what internet content are you trying to change?

    5. where are you trying to change the content?

    Refer to this article on the lost or forgotten password: http://support.microsoft.com/kb/189126 of Microsoft's strategy concerning lost or forgotten passwords

  • Using paint and how to change the text box.

    How can I select a text box that you want to modify in the paint - Windows 7 Home Premium?  Once I leave the text box I can't select again a second time to change the text or grab it to move... I must be missing something very simple?  Is there a manual program somewhere?  Yes, the zoom is 100% and I am the administrator.  Thanks for any help!

    The painting is a very simple program and does not support the re - select a text box to change the content.

    "mikecvista" wrote in the new message: * e-mail address is removed from the privacy... *

    How can I select a text box that you want to modify in the paint - Windows 7 Home Premium? Once I leave the text box I can't select again a second time to change the text or grab it to move... I must be missing something very simple?  Is there a manual program somewhere?  Yes, the zoom is 100% and I am the administrator.  Thanks for any help!

  • How to change the product ID of Windows 7, when you put the disc in the other PC

    I PC_1 with an SSD and a valid license of Windows 7 OEM (HP).  I want to put this SSD in a new, more powerful PC_2.  PC_2 holds a valid license of Windows 7 OEM (Packard Bell).

    My thoughts are:

    1 use Double driver to make a backup of all the PC_2 drivers.  Use ABR Activation Backup and Restore to save the certificate key and activation license for W7 on PC_2

    2 put the SSD in PC_2 and change the license key and activation of the certificate (it has the PC_1 keys/certificates) to the PC_2 keys/certificates

    3. install missing drivers to disk backup Double.

    The problem is How to change the key/certificate in step 2?

    Of course I could rebuild W7 on the SSD and give him the key to license PC_2 for the reconstruction, but that would mean reinstall all my other programs that I prefer not to do so.  I downloaded and still have, a copy of W7 iso website digitalrivers if this can help.

    Thank you

    Put the SSD from PC 1, PC 2 and startup, update drivers, and change it to the product key located on the certificate of authenticity.

    As long as they are running the same edition should not be a problem.

    Click Start, right click on computer

    Click on properties

    Scroll down to the Windows Activation

    Click on the link 'change product key '.

    Enter the product key located on the COA sticker attached to the bottom of your laptop or in the battery compartment. Click next to activate via the Internet.

    COA certificate of authenticity:

    http://www.Microsoft.com/howtotell/content.aspx?PG=COA

    ??

    What is the certificate of authenticity for Windows?

    http://Windows.Microsoft.com/en-us/Windows7/what-is-the-Windows-certificate-of-authenticity

  • How to change the search fields displayed on the homepage of UCM 11g?

    Hello

    How to change the search fields displayed on the homepage of UCM 11g?

    Another option for you.

    Follow the links below.

    How to: Customize the home page of Oracle UCM with configuration manager. -Blog of BlueStudios Johns

    Example of a custom component.

    bluestudios.co.uk/blog/wp-content/uploads/2009/02/ether_homepage1.zip

    -Prashant

  • How to change the Spry CSS tab

    I like to use these old screens provided with the former DW Spry tab.  I just looked in DW CC and it looks like they aren't there and more.  But anyway, I made one for my client.  Now, they want to get one of the tabs on the far right of the margin.  See the image below:

    tabs.jpg

    I don't know yet if it's possible to do and if someone has done this before, can you tell me what code I need to change in the CSS?  I would have joined the CSS file, but it seems that you cannot attach files in this forum, so I've copied below.

    Please offer any means to change the color of the tabs, etc. - I just need to know how - or at all - this tab can be moved to the right.

    Thanks, Guy deaf

    PS I'm sorry that the CSS code does not correctly appear in this forum.  When I type this message, looks like it will display line-by-line, but it's not.  I'm sorry.

    ---------------------------------------------

    @charset "UTF-8";
    
    
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    
    
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    
    
    /* Horizontal Tabbed Panels
     *
     * The default style for a TabbedPanels widget places all tab buttons
     * (left aligned) above the content panel.
     */
    
    
    /* This is the selector for the main TabbedPanels container. For our
     * default style, this container does not contribute anything visually,
     * but it is floated left to make sure that any floating or clearing done
     * with any of its child elements are contained completely within the
     * TabbedPanels container, to minimize any impact or undesireable
     * interaction with other floated elements on the page that may be used
     * for layout.
     *
     * If you want to constrain the width of the TabbedPanels widget, set a
     * width on the TabbedPanels container. By default, the TabbedPanels widget
     * expands horizontally to fill up available space.
     *
     * The name of the class ("TabbedPanels") used in this selector is not
     * necessary to make the widget function. You can use any class name you
     * want to style the TabbedPanels container.
     */
    .TabbedPanels {
      overflow: hidden;
      margin: 0px;
      padding: 0px;
      clear: none;
      width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    }
    
    
    /* This is the selector for the TabGroup. The TabGroup container houses
     * all of the tab buttons for each tabbed panel in the widget. This container
     * does not contribute anything visually to the look of the widget for our
     * default style.
     *
     * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
     * necessary to make the widget function. You can use any class name you
     * want to style the TabGroup container.
     */
    .TabbedPanelsTabGroup {
      margin: 0px;
      padding: 0px;
    }
    
    
    /* This is the selector for the TabbedPanelsTab. This container houses
     * the title for the panel. This is also the tab "button" that the user clicks
     * on to activate the corresponding content panel so that it appears on top
     * of the other tabbed panels contained in the widget.
     *
     * For our default style, each tab is positioned relatively 1 pixel down from
     * where it wold normally render. This allows each tab to overlap the content
     * panel that renders below it. Each tab is rendered with a 1 pixel bottom
     * border that has a color that matches the top border of the current content
     * panel. This gives the appearance that the tab is being drawn behind the
     * content panel.
     *
     * The name of the class ("TabbedPanelsTab") used in this selector is not
     * necessary to make the widget function. You can use any class name you want
     * to style this tab container.
     */
    .TabbedPanelsTab {
      position: relative;
      top: 1px;
      float: left;
      padding: 5px 20px;
      margin: 0px 1px 0px 0px;
      font: bold 12px sans-serif;
      background-color: #f1c185;
      list-style: none;
      border-left: solid 1px #CCC;
      border-bottom: solid 1px #999;
      border-top: solid 1px #999;
      border-right: solid 1px #999;
      border-radius: 5px 5px 0px 0px;
      -moz-user-select: none;
      -khtml-user-select: none;
      cursor: pointer;
    }
    
    
    /* This selector is an example of how to change the appearnce of a tab button
     * container as the mouse enters it. The class "TabbedPanelsTabHover" is
     * programatically added and removed from the tab element as the mouse enters
     * and exits the container.
     */
    .TabbedPanelsTabHover {
      background-color: #ffd197;
    }
    
    
    /* This selector is an example of how to change the appearance of a tab button
     * container after the user has clicked on it to activate a content panel.
     * The class "TabbedPanelsTabSelected" is programatically added and removed
     * from the tab element as the user clicks on the tab button containers in
     * the widget.
     *
     * As mentioned above, for our default style, tab buttons are positioned
     * 1 pixel down from where it would normally render. When the tab button is
     * selected, we change its bottom border to match the background color of the
     * content panel so that it looks like the tab is part of the content panel.
     */
    .TabbedPanelsTabSelected {
      background-color: #ffe9cd;
      border-bottom: 1px solid #EEE;
    }
    
    
    /* This selector is an example of how to make a link inside of a tab button
     * look like normal text. Users may want to use links inside of a tab button
     * so that when it gets focus, the text *inside* the tab button gets a focus
     * ring around it, instead of the focus ring around the entire tab.
     */
    .TabbedPanelsTab a {
      color: black;
      text-decoration: none;
    }
    
    
    /* This is the selector for the ContentGroup. The ContentGroup container houses
     * all of the content panels for each tabbed panel in the widget. For our
     * default style, this container provides the background color and borders that
     * surround the content.
     *
     * The name of the class ("TabbedPanelsContentGroup") used in this selector is
     * not necessary to make the widget function. You can use any class name you
     * want to style the ContentGroup container.
     */
    .TabbedPanelsContentGroup {
      clear: both;
      border-top: solid 1px #999;
      background-color: #FFF;
    }
    
    
    /* This is the selector for the Content panel. The Content panel holds the
     * content for a single tabbed panel. For our default style, this container
     * provides some padding, so that the content is not pushed up against the
     * widget borders.
     *
     * The name of the class ("TabbedPanelsContent") used in this selector is
     * not necessary to make the widget function. You can use any class name you
     * want to style the Content container.
     */
    .TabbedPanelsContent {
      overflow: hidden;
      padding: 4px;
    }
    
    
    /* This selector is an example of how to change the appearnce of the currently
     * active container panel. The class "TabbedPanelsContentVisible" is
     * programatically added and removed from the content element as the panel
     * is activated/deactivated.
     */
    .TabbedPanelsContentVisible {
    }
    
    
    /* Vertical Tabbed Panels
     *
     * The following rules override some of the default rules above so that the
     * TabbedPanels widget renders with its tab buttons along the left side of
     * the currently active content panel.
     *
     * With the rules defined below, the only change that will have to be made
     * to switch a horizontal tabbed panels widget to a vertical tabbed panels
     * widget, is to use the "VTabbedPanels" class on the top-level widget
     * container element, instead of "TabbedPanels".
     */
    
    
    .VTabbedPanels {
      overflow: hidden;
      zoom: 1;
    }
    
    
    /* This selector floats the TabGroup so that the tab buttons it contains
     * render to the left of the active content panel. A border is drawn around
     * the group container to make it look like a list container.
     */
    .VTabbedPanels .TabbedPanelsTabGroup {
      float: left;
      width: 10em;
      height: 20em;
      background-color: #EEE;
      position: relative;
      border-top: solid 1px #999;
      border-right: solid 1px #999;
      border-left: solid 1px #CCC;
      border-bottom: solid 1px #CCC;
    }
    
    
    /* This selector disables the float property that is placed on each tab button
     * by the default TabbedPanelsTab selector rule above. It also draws a bottom
     * border for the tab. The tab button will get its left and right border from
     * the TabGroup, and its top border from the TabGroup or tab button above it.
     */
    .VTabbedPanels .TabbedPanelsTab {
      float: none;
      margin: 0px;
      border-top: none;
      border-left: none;
      border-right: none;
    }
    
    
    /* This selector disables the float property that is placed on each tab button
     * by the default TabbedPanelsTab selector rule above. It also draws a bottom
     * border for the tab. The tab button will get its left and right border from
     * the TabGroup, and its top border from the TabGroup or tab button above it.
     */
    .VTabbedPanels .TabbedPanelsTabSelected {
      background-color: #EEE;
      border-bottom: solid 1px #999;
    }
    
    
    /* This selector floats the content panels for the widget so that they
     * render to the right of the tabbed buttons.
     */
    .VTabbedPanels .TabbedPanelsContentGroup {
      clear: none;
      float: left;
      padding: 0px;
      width: 30em;
      height: 20em;
    }
    
    
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
      overflow: visible !important;
    }
    .TabbedPanelsContentGroup {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
    }
    .TabbedPanelsContent {
      overflow: visible !important;
      display: block !important;
      clear:both !important;
    }
    .TabbedPanelsTab {
      overflow: visible !important;
      display: block !important;
      clear:both !important;
    }
    }
    

    !-[CodeBlockStart:dffe5525-a787-4a98-a87f-f24554b12141]-->@charset 'UTF-8'; / * SpryTabbedPanels.css - 0.6 - pre-release Spry 1.6.1 version * / / * Copyright (c) 2006] Adobe Systems Incorporated. All rights reserved. * / / * Horizontal tabbed panels * the default style for a TabbedPanels widget puts all the tab buttons * (stalled left) above the content panel. * / / * This is the selector for the main container of TabbedPanels. For our * style by default, this container does not contribute anything visually, * but it is floated to the left to ensure that all floating or compensation done * with any which of her children the elements lie entirely within the limits the * TabbedPanels container, in order to minimize any impact or unwanted * interaction with other floating elements on the page which may be used * for page layout. * If you want to limit the width of the widget TabbedPanels, define a * width of the container TabbedPanels. By default, the widget TabbedPanels * extends horizontally to fill the available space. * The name of the class ("TabbedPanels") used in this selector is not * necessary to make the widget service. You can use a class name, you * want to style the TabbedPanels container. */ . TabbedPanels {overflow: hidden;}   margin: 0px;   padding: 0px;   Clear: none;   Width: 100%; / * Hack IE to force the layout correct when preceded by a paragraph. (hasLayout bug) * /} / * this is the selector for the TabGroup. The container of TabGroup houses * all buttons on the tab for each tabs in the widget panel. This container * does not contribute to what both visually in the appearance of the widget for our * default style. * The name of the class ("TabbedPanelsTabGroup") used in this selector is not * necessary to make the widget service. You can use a class name, you * want to style the TabGroup container. */ . TabbedPanelsTabGroup {margin: 0px;}   padding: 0px; } / * This is the selector for the TabbedPanelsTab. This container houses * the title of the Panel. It is also tab 'button' that the user clicks on * to activate the corresponding content panel so that it appears on top * of the other tabs in the widget panels. * For our style by default, each tab is positioned relatively 1 pixel down from * where it would normally. This allows each tab overlap content * panel that renders underneath. Each tab is rendered with a background of 1 pixel * border which has a color that corresponds to the upper edge of the current content * panel. This gives the appearance that the tab is drawn behind the * content panel. * The name of the class ("TabbedPanelsTab") used in this selector is not * necessary to make the widget service. You can use any class name you want * to style the tab container. */ . TabbedPanelsTab {position: relative;}   Top: 1px;   float: left;   padding: 5px 20px;   margin: 0px 1px 0px 0px;   Police: bold 12px without serif.   background-color: #f1c185;   list-style: none;   border-left: 1px solid #CCC;   border-bottom: 1px solid #999;   border-top: 1px solid #999;   border-right: 1px solid #999;   border-radius: 5px 0px 5px 0px;   -moz-user-select: none;   -khtml-user-select: none;   cursor: pointer; } / * This selector is an example how to change the appearance of a button in the tab * container as the mouse enters in the it. The class is "TabbedPanelsTabHover" * programatically add and remove the element tab as the mouse between in * in and out of the container. */ . TabbedPanelsTabHover {background-color: #ffd197 ;} / * this selector is an example how to do to change the appearance of a button in the tab * container after the user has clicked on it to activate a content panel.} * The 'TabbedPanelsTabSelected' class is programmatically added and removed * the tab element as long as the user clicks button tab containers in * the widget. * As mentioned above, for our style by default, the tab buttons are positioned * 1 pixel down where he would normally. What is the tab key * selected, we change its bottom border to match the background color of the * content panel so that it looks like the tab is the content panel. */ . TabbedPanelsTabSelected {background-color: #ffe9cd;}   border-bottom: 1px solid #EEE; } / * This selector is an example of how to make a link inside a tab button * look like normal text. Users may want to use the links within a tab button * so that when it gets the focus, the text * inside * the tab button gets a focus * ring around it, instead of the ring around the whole tab. * /. TabbedPanelsTab a {color: black;}   text-decoration: none; } / * This is the selector for the ContentGroup. The ContentGroup container houses * all panels of content for each tabs in the widget panel. For our * style by default, this container provides the background color and borders that * surround content. * The name of the class ("TabbedPanelsContentGroup") used in this selector is * not necessary to make the widget function. You can use a class name, you * want to style the ContentGroup container. */ . TabbedPanelsContentGroup {clear: both;}   border-top: 1px solid #999;   background-color: #FFF; } / * This is the selector for the content panel. The content panel contains the * content for a single panel tabs. For our default style, this container * provides some padding, so that content is not pushed upward against the * widget borders. * The name of the class ("TabbedPanelsContent") used in this selector is * not necessary to make the widget function. You can use a class name, you * want to style the content container. */ . TabbedPanelsContent {overflow: hidden;}   padding: 4px; } / * This selector is an example of how to change the appearance of the currently * active panel container. The class is "TabbedPanelsContentVisible" * programatically added and removed from the content as the Panel item * is enabled/disabled. */ . TabbedPanelsContentVisible {} / * vertical tabbed panels * following rules override some of the default rules above so that the * TabbedPanels widget is rendered with its buttons on the tab on the left of * the active content panel. * With the rules defined below, the only change that will be made * to move a widget panels to horizontal tabs to vertical tabbed panels * widget, is to use the 'VTabbedPanels' class on the top-level widget * element container, instead of "TabbedPanels. */ . VTabbedPanels {overflow: hidden;}   Zoom: 1; } / * This selector floats the TabGroup so that the tab buttons it contains * make left of active content panel. A border is drawn around * the group container to make it look like a container from the list. */ . VTabbedPanels. TabbedPanelsTabGroup {float: left;}   Width: 10em;   height: 20em;   background-color: #EEE;   position: relative;   border-top: 1px solid #999;   border-right: 1px solid #999;   border-left: 1px solid #CCC;   border-bottom: 1px solid #CCC; } / * This selector disables the float property that is placed on each button of the tab * by the rule above TabbedPanelsTab default selector. He also draws a background * border for the tab. The tab button will get his left and right border of * the TabGroup and its superior border of the tab above it or button TabGroup. */ . VTabbedPanels. TabbedPanelsTab {float: none;}   margin: 0px;   border-top: none;   border-left: none;   border-right: none; } / * This selector disables the float property that is placed on each button of the tab * by the rule above TabbedPanelsTab default selector. He also draws a background * border for the tab. The tab button will get his left and right border of * the TabGroup and its superior border of the tab above it or button TabGroup. */ . VTabbedPanels. TabbedPanelsTabSelected {background-color: #EEE;}   border-bottom: 1px solid #999; } / * This selector fleet contained signs of the widget while they * make it to the right of the tabs buttons. */ . VTabbedPanels. TabbedPanelsContentGroup {clear: none;}   float: left;   padding: 0px;   Width: 30em;   height: 20em; } / * Printing styles * / @media print {.} TabbedPanels {overflow: visible! important;}. TabbedPanelsContentGroup {display: block! important;}   overflow: visible! important;   height: auto! important; } . TabbedPanelsContent {overflow: visible! important;}   display: block! important;   clear: both! important; } . TabbedPanelsTab {overflow: visible! important;}   display: block! important;   clear: both! important; } }

    Add the class like below:

  • Open Ocean
  • Delete the following in your css spry as file its in the ' query print media "and has no effect on the screen - have added you it to the wrong place."

    {.alignRight}

    position: relative;

    Top: 1px;

    float: right! important;

    padding: 5px 20px;

    margin: 0px 1px 0px 0px;

    Police: bold 12px without serif.

    background-color: #f1c185;

    list-style: none;

    border-left: 1px solid #CCC;

    border-bottom: 1px solid #999;

    border-top: 1px solid #999;

    border-right: 1px solid #999;

    border-radius: 5px 0px 5px 0px;

    -moz-user-select: none;

    -khtml-user-select: none;

    cursor: pointer;

    }

    Add the below css just above the press query written:

    {.alignRight}

    float: right! important;

    }

    / * Print styles * /.

    @media print {}

Maybe you are looking for