tab order with a customized theme
franco12 May 14, 2007 8:19 AMhi,
I made my own theme but I've a little problem with my tabs :
tab order is reversed
If I try with another theme (default themes) : tab order is good
so I think it's related to my css theme
here is my theme :
/***************** * MDP Theme CSS * ******************/ #body { /*background-image: url( images/portal_background.gif );*/ margin: 0px; padding: 0px; } /***************** * Portal Header * ******************/ /* spacer to keep header at certain width regardless of display size done to avoid overlapping of tab navigation in header */ #spacer { width: 770px; line-height: 0px; font-size: 0px; height: 0px; } /* Wrapper for Header */ #header-container { background:url("images/banier_right.jpg") ; background-repeat: repeat-x; height: 100%; min-width: 770px; width: 100%; /* test to reposition header on page position: absolute; bottom: 5px;*/ } /* Header background */ #header { /*float:right;*/ width:100%; background: url("images/bannier.gif") ; background-repeat: no-repeat; line-height:normal; } /*#header ul { margin:0; padding:56px 10px 0 0%; list-style:none; }*/ #header_topbar { background-image:url("images/topbar.gif"); background-repeat: repeat-x; width:100%; height: 100%; } /* *** Affichage du logo *** */ #logoName { /* Original Logo...*/ /*background-image: url( images/JBossLogo.gif );*/ /* background-image: url( images/logologin.jpg); background-repeat: no-repeat; width: 89px; height: 80px; position: absolute; left: 5px; top: 5px; z-index: 2; */ } #logoParis { /* Original Logo...*/ background-image: url( images/logo_mdeparis.gif); background-repeat: repeat; width: 140px; height: 17px; } /************************ * Portal Layout Regions * *************************/ /* *** Menu Vertical *** */ .leftnav{ background-image:url(images/leftnav.jpg); background-repeat: no-repeat; margin-left:5px; padding-left:20px; padding-top:2px; padding-bottom: 2px; display:block; text-decoration: none; color: #000000; height: 20px; } .leftnavsub{ background-image: url(images/submenu.gif); display: block; height: 19px; margin-left: 8px; padding-top: 2px; padding-left: 7px; color: #333333; } .hide{ display: none; } .show{ display: block; } /* wrapper for entire portal. starts/ends after/before body tag */ #portal-container { /* part of below IE hack to preserve min-width for portlet regions */ /*width: 100%;*/ padding: 0 350px 0 350px; } /* min width for IE */ #expander { position: relative; padding: 0 0 0 0; margin: 0 -350px 0 -350px; min-width: 770px; padding: 0 0 0 0; } /* min width hack for IE */ #sizer { width: 100%; } /* IE Hack \*/ * html #portal-container, * html #sizer, * html #expander { height: 0; } /* end IE min-width hack */ /* table that contains all regions. does not include header */ #content-container { height: 100%; text-align: left; width: 100%; min-width: 770px; /* position: absolute; top: 70px; left: 0px; / * z-index: 1; * / / * part of below IE hack padding: 0 350px 0 350px; * / padding: 0px 100px 0px 0px; */ } /* Login JSP Selectors */ #login-container { position: relative; left: 35%; top: 55px; right: 45%; width: 320px; height: 250px; margin: 0px; } #login-container label, #login-container input { display: block; float: left; width: auto; margin-top: 15px; } #login-container label { text-align: right; padding-right: 20px; width: 95px; } #login-container br { clear: left; } #loginButton { } #login-container legend { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #768591; } #loginForm { margin: 0px; padding: 0px; } /* end Login Page Selectors */ /* portlet regions within content-container. this includes footer-container. */ #regionA { /* test to swap columns... float: right; */ width: 30%; float: left; margin: 0px; padding: 0px; min-width: 250px; /*height: 300px;*/ } #regionB { /* test to swap columns.. margin: 0 30% 0 0; */ /*two column layout margin: 0 0 0 30%;*/ padding: 0px; /* test to add 3rd region in layout...*/ width: 67%; float: left; /*height: 300px;*/ } #regionC { /* inclusion of 3rd region - comment out for 2 region testing */ padding: 0px; margin: 0px; width: 28%; float: left; /*hide 3rd region*/ display: none; } /* give a maximized portlet more space */ #regionMaximized { width: 100%; float: left; margin: 0px; padding: 0px; min-width: 400px; } #footer-container { /* margin: 30px 25% 0 25%;*/ text-align: center; width: 100%; } #navigation-container { margin: 0px; position: absolute; width: 100%; z-index: -1; } /* used to clear float in regionA,B,C divs so that footer spans bottom of page */ hr.cleaner { clear: both; height: 1px; margin: -1px 0 0 0; padding: 0; border: none; visibility: hidden; } /**************************** * Tab Navigation for Header * *****************************/ UL#tabsHeader { margin: 0; padding-left: 0px; margin-top: 58px; margin-right: 9px; min-width: 550px; z-index: 100; /* added for submenu hover */ /*position: relative; added for submenu hover */ list-style:none; } UL#tabsHeader li { float:right; background:url("images/onglet_left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; list-style:none; } /*UL#tabsHeader li:hover { background-image: url( images/highlightedTab.gif ); background-repeat: repeat-x; }*/ /* hover selectors for main header tabs done to deal with IE not liking hover pseudo class on li */ /*UL#tabsHeader li.hoverOn { background-image: url( images/highlightedTab.gif ); background-repeat: repeat-x; }*/ /*UL#tabsHeader li.hoverOff { background-image: none; }*/ UL#tabsHeader a { float:right; display:block; background:url("images/onglet_right.gif") no-repeat right top; padding:9px 15px 4px 6px; text-decoration:none; color:#596874; font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif; font-size: 12px; } UL#tabsHeader a:hover { color:#000; font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif; font-size: 12px; } UL#tabsHeader #current a { background-image:url("images/onglet_right_on.gif"); color:#333; padding-bottom:3px; font-weight:bold; } UL#tabsHeader #current { background-image:url("images/onglet_left_on.gif"); } /* Begin Submenu selectors */ /* hide the sub levels and give them a positon absolute so that they take up no room */ /* UL#tabsHeader ul { margin:0; padding:55px 10px 0; list-style:none; } UL#tabsHeader ul a { font: 12px; font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif; font-weight: normal; color: #5078aa; } UL#tabsHeader ul a:hover { font: 12px; font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif; font-weight: normal; color: #5078aa; } */ /* UL#tabsHeader #current ul a { background-image:url("images/onglet_right_on.gif"); color:#333; padding-bottom:3px; font-weight:bold; } */ /* UL#tabsHeader li:hover ul { visibility: visible; } UL#tabsHeader ul li { background: #EDECEC; color: #5078aa; padding: 3px; width: 120px; border: 1px solid #FFFFFF; border-width: 1px 1px 0 0; margin-left: 0px; margin-top: 0px; margin-right: 0px; } UL#tabsHeader ul li:hover { background: #E2E2E2; } */ /* End Submenu selectors */ /* used for sub navigation if applicable UL#tabsHeader #currentSubNav, UL#tabsHeader #currentSubNav a { color: #000; line-height: 19px; padding-top: 0px; padding-bottom: 1px; margin-bottom: -1px; background: #eeeeef; }*/ /* Tab background color for selected global nav item */ li.currentTabBackground { background: #fff; } /* used for sub navigation if applicable li.currentTabBackgroundSubNav { background: #eeeeef; }*/ /* backslash hack for IE5-Mac \*/ UL#tabsHeader a { float: none; } /* End Mac Hack */ html>body UL#tabsHeader a { width: auto; } /* fixes IE6 win hack */ /*************************** * Utility Navigation * *****************************/ #dashboardnav { float: right; font-size: 10px; padding: 6px 12px 0px 0px; color: #000000; z-index: 20; } #dashboardnav a { color: #000000; } #dashboardnav .addcontent { background-image: url( images/ico_addcontent.gif ); background-repeat: no-repeat; background-position: left; height: 20px; width: 20px; padding-left: 16px; } /**************************** * Portlet Container Windows * *****************************/ .portlet-container { /*margin: 10px;*/ padding: 5px; } .portlet-titlebar-title { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 500; color: #596874; white-space: nowrap; line-height: 100%; float: left; text-indent: 15px; } .portlet-titlebar-decoration { background-image: url( images/portlet-win-decoration.gif ); background-repeat: no-repeat; height: 11px; width: 11px; float: left; position: relative; top: 6px; } /* wrapper for floating portlet window modes */ .portlet-mode-container { float: right; } .portlet-titlebar-left { background-image: url( images/portlet-top-left.gif ); background-repeat: no-repeat; width: 9px; height: 33px; background-position: right; min-width: 9px; } .portlet-titlebar-center { background-image: url( images/portlet-top-middle.gif ); background-repeat: repeat-x; height: 33px; } .portlet-titlebar-right { background-image: url( images/portlet-top-right.gif ); background-repeat: no-repeat; width: 10px; height: 33px; min-width: 10px; } .portlet-content-left { background-image: url( images/portlet-left-vertical.gif ); height: 100%; background-repeat: repeat-y; background-position: right; width: 9px; min-width: 9px; } .portlet-content-center { background-color: #f7f7f7; background-repeat: repeat; vertical-align: top; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; } .portlet-body { background-color: #f7f7f7; } .portlet-content-right { background-image: url( images/portlet-right-vertical.gif ); height: 100%; background-repeat: repeat-y; background-position: left; width: 10px; min-width: 10px; } .portlet-footer-left { background-image: url( images/portlet-bottom-left.gif ); width: 9px; height: 9px; background-repeat: no-repeat; background-position: top right; min-width: 9px; } .portlet-footer-center { background-image: url( images/portlet-bottom-middle.gif ); height: 14px; background-repeat: repeat-x; } .portlet-footer-right { background-image: url( images/portlet-bottom-right.gif ); width: 10px; height: 9px; background-repeat: no-repeat; min-width: 10px; } /*********************** * Portlet Window Modes * ************************/ .portlet-mode-maximized { background-image: url( images/maximize.gif ); width: 16px; height: 23px; background-repeat: no-repeat; float: left; display: inline; cursor: pointer; } .portlet-mode-minimized { background-image: url( images/minimize.gif ); width: 16px; height: 23px; background-repeat: no-repeat; float: left; display: inline; cursor: pointer; } .portlet-mode-normal { background-image: url( images/normal.gif ); width: 16px; height: 23px; background-repeat: no-repeat; float: left; display: inline; cursor: pointer; } .portlet-mode-help { background-image: url( images/help.gif ); width: 16px; height: 23px; background-repeat: no-repeat; float: left; display: inline; cursor: pointer; } .portlet-mode-edit { background-image: url( images/edit.gif ); width: 16px; height: 23px; background-repeat: no-repeat; float: left; display: inline; cursor: pointer; } .portlet-mode-remove { background-image: url( images/remove.gif ); width: 16px; height: 23px; background-repeat: no-repeat; float: left; display: inline; cursor: pointer; } .portlet-mode-view { background-image: url( images/view.gif ); width: 16px; height: 23px; background-repeat: no-repeat; float: left; display: inline; cursor: pointer; } .portlet-mode-reload { background-image: url( images/reload.gif ); width: 16px; height: 23px; background-repeat: no-repeat; float: left; display: inline; cursor: pointer; } /********************** * Copyright Selectors * ***********************/ .portal-copyright { width:600px; height:25px; /* background-color:#94CFEF; */ background-image: url( images/PageBottom.gif ); background-repeat: repeat-x; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 9px; color: #5E6D7A; } a.portal-copyright { color: #768591; text-decoration: none; } a.portal-copyright:hover { color: #96A5B1; text-decoration: none; } #ThemeBy:before { content: "Theme by Unisys"; } /************* * Elements * **************/ a { color: #768591; text-decoration: none; } a:hover { color: #96A5B1; text-decoration: none; } INPUT { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; } SELECT { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; } FONT { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; color: #768591; } FIELDSET { background-color: #f7f7f7; border: 1px solid #BABDB6; padding: 6px; } LEGEND { background-color: transparent; padding-left: 6px; padding-right: 6px; padding-bottom: 0px; font-size: 12px; } /******************* * Table Selectors * ********************/ /* Table header */ .portlet-table-header { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 12px; font-weight: bold; background-color: #768591; color: #fff; } /* Normal text in a table cell */ .portlet-table-body { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; } /* Text in every other row in the table */ .portlet-table-alternate { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; background-color: #ececec; } /* Text in a selected cell range */ .portlet-table-selected { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; background-color: #768591; color: #fff; } /* Text of a subheading */ .portlet-table-subheader { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-weight: bold; } /* Table footer */ .portlet-table-footer { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 10px; } /* Text that belongs to the table but does not fall in one of the other categories (e.g. explanatory or help text that is associated with the table). */ .portlet-table-text { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-style: italic; } /******** * FONTS * *********/ /* Font attributes for the normal fragment font. Used for the display of non-accentuated information */ .portlet-font { color: #000; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; /*margin-top: 7px; margin-bottom: 5px;*/ } /* Font attributes similar to the portlet.font but the color is lighter */ .portlet-font-dim { color: #888385; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; } /******** * FORMS * *********/ /* Text used for the descriptive label of the whole form (not the label for fields)...why not call this portlet-form-title? */ .portlet-form-label { color: #000; text-decoration: none; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-weight: bold; } /* Text on a form button */ .portlet-form-button { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; color: #000; } /* Text that appears beside a context dependent action icon */ .portlet-icon-label { } /* Text that appears beside a "standard" icon (e.g Ok, or Cancel) not sure if we need this one?.. */ .portlet-dlg-icon-label { } /* Text for form field labels */ .portlet-form-field-label { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; color: #000; vertical-align: bottom; } /* Text for a form field */ .portlet-form-field { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; color: #000; margin-top: 10px; } /* Text of the user-input in an input field. not sure if we need this guy? */ .portlet-form-input-field { color: #000; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; } /******** * LINKS * *********/ .portal-links:link { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-weight: bold; color: #242424; text-decoration: none; } .portal-links:hover { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-weight: bold; color: #5699B7; text-decoration: none; } .portal-links:active { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-weight: bold; color: #242424; text-decoration: none; } .portal-links:visited { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-weight: bold; color: #242424; text-decoration: none; } /*********** * MESSAGES * ************/ /* Status of the current operation. */ .portlet-msg-status { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-style: normal; color: #788793; } /* Help messages, general additional information, etc. */ .portlet-msg-info { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-style: italic; color: #000; } /* Error messages. */ .portlet-msg-error { color: red; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-weight: bold; } /* Warning messages. */ .portlet-msg-alert { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-weight: bold; color: #821717; } /* Verification of the successful completion of a task. */ .portlet-msg-success { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; font-weight: bold; color: #359630; } /*********** * SECTIONS * ************/ /* Table or section header */ .portlet-section-header { font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #768591; background-color: #f7f7f7; /*background-image: url(interf/head.jpg);*/ } /* Normal text in a table cell */ .portlet-section-body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } /* Text in every other row in the cell */ .portlet-section-alternate { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; background-color: #ececec; } /* Text in a selected cell range */ .portlet-section-selected { background-color: #768591; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 11px; color: #fff; } /* Text of a subheading */ .portlet-section-subheader { font-weight: bold; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000; /*margin: 3px; padding: 3px;*/ } /* Table or section footnote */ .portlet-section-footer { font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #f7f7f7; font-size: 10px; } /* Text that belongs to the table but does not fall in one of the other categories (e.g. explanatory or help text that is associated with the section. */ .portlet-section-text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: italic; } /******** * MENUS * *********/ /*General menu settings such as background color, margins, etc. */ .portlet-menu { } /* Normal, unselected menu item. */ .portlet-menu-item { color: #242424; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; } .portlet-menu-item:hover { color: #5699B7; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; } /* Selected menu item. */ .portlet-menu-item-selected { } /* Selected menu item when the mouse hovers over it. */ .portlet-menu-item-selected:hover { } /* Normal, unselected menu item that has sub-menus. */ .portlet-menu-cascade-item { } /* Selected sub-menu item that has sub-menus */ .portlet-menu-cascade-item-selected { } /* Descriptive text for the menu (e.g. in a help context below the menu) */ .portlet-menu-description { } /* Menu caption */ .portlet-menu-caption { } /* A separator bar similar to a horizontal rule, but with styling matching the page */ .portlet-horizontal-separator { } /* Allows portlets to mimic the title bar when nesting something */ .portlet-nestedTitle-bar { } /* Allows portlets to match the textual character of the title on the title bar. */ .portlet-nestedTitle { } /* Support portlets having tabs in the same style as the page or other portlets */ .portlet-tab { } /* Highlight the tab currently being shown */ .portlet-tab-active { } /* Highlight the selected tab (not yet active) */ .portlet-tab-selected { } /* A tab which can not be currently activated */ .portlet-tab-disabled { } /* Top level style for the content of a tab. */ .portlet-tab-area { } /***************** Menu Vertical *****************/ .leftbuttontype{ background-image:url(images/leftbuttontype2.jpg); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; } /****************** Breadcorumb *******************/ .breadcorumb { background-image:url(images/breadcrumb.gif); background-repeat: no-repeat; width: 250px; height: 100%; }
thanks for your help! :)