Hi,

ich kenne mich noch nicht so gut mit Ajax oder Javascript aus und dachte ich verwende mal für meine Website so ein Schickes Spry Tabbed Panel von Dreamweaver, um in der Seitenleiste ein paar sachen kompakter darstellen zu können. Jedoch hab ich in meinem Screendesign (Photoshop) für die einzelnen Tabs grafiken vorgesehen, welche mit einem Hover- und Selectedeffekt ausgestattet sind. Wie kann ich sowas realisieren? Hab schon versucht bei Adobe in der Hilfe was zu finden, aber da steht nur das, was ich schon weiss.

Mfg

Ralle

ich weis ehrlich gesagt nicht welche art von lösung du gerne "serviert" bekommen würdest? würde gerne heute abend helfen mit an deinem prob zu scripten aber bitte beschreibe dein problem genauer und so dass man ohne vorwissen auf die (für mich komischen" frameworks bzw. bibliotheken die du benutzt verstehst.

MFG
Mark Paspirgilis

Na danke für die herzliche Begrüßung. Ich möchte jetzt nichts mehr "serviert" bekommen. Werd wo anders Hilfe suche, oder zur not das ganze anders lösen.

Mfg

Ralf

>.< sry so war das doch gar nicht gemeint.
sollte nur n joke sein welcher darauf hinweisen sollte, dass ich nachher lust habe nach der arbeit dein prob mit gedanken und tat zu lösen.

Jetzt bin ich wieder der "Buh-Mann" :'-(

Naja hoffe du bleibst noch bei der geilsten Coder-Community

MFG
Mark Paspirgilis

Hi und herzlich Willkommen RaleKay

Ich nutze zwar Dreamweaver nicht, bin aber im CSS-Forum schon einige Male über das angesprochene Menü gestolpert, sodass ich denke, dass sich deine vorliegenden Grafiken mittels CSS in das Menü einsetzen lassen.

Der Quellcode des Menüs (HTML und CSS) wäre ganz hilfreich, um dort zunächst mal einen Überblick zu gewinnen, wo überall die Grafiken eingesetzt werden sollen.

@Paspirgilis: Dir sollte eigentlich mittlerweile unsere Netiquette bekannt sein, und dass wir großen Wert auf die Einhaltung der deutschen Rechtschreibung legen, sprich durchgehend kleingeschriebene Beiträge nicht erwünscht sind.

Desweiteren dürfte dir das Menü eigentlich schon längst bekannt sein, wenn ich in dein letztes CSS-Thema schaue, und was sich dort als "Übeltäter" für das Problem herausgestellt hat

mfg Maik

Also. Nochma von vorne.

Ich bin dabei eine Website auf die Beine zu stellen. Ich habe links den Contentbereich und rechts eine Tool-Leiste. Oben nen Login und unten drunter einen Bereich für eine Buddyliste, Paypal und den Warenkorb.

Genau diesen Bereich möchte ich wie im Anhang gezeigt aufbauen (Ausschnitt aus Screendesign in Photoshop). Da ich mich aber nicht mit Ajax oder JS auskenne, sondern nur mit PHP, HTML, etc. wollt ich auf eine Funktion von Dreamweaver zurückgreifen (Spry-Widgets). Genauer gesagt eins mit Registerkarten (Tabs). Dieses Spry TabbedPanel, wie es Adobe schimpft ist aber nur (für mich) leicht zu ändern, solange ich keine extravaganten wünsche hab.

Die hab ich aber. Es solle nicht in jedem Register der gleiche Hintergrund mit unterschiedlichem Text zu sehen sein, sondern unterschiedliche Grafiken, welche auch noch mit einem Hover-Effekt ausgestattet sind. (wieder siehe Grafik).

Hoffe, das dies jetzt ausführlich genug war.

Mfg

Ralf

Mein CSS-Tutorial CSS-Rollover sollte dir für's Erste weiterhelfen

Ich schieb das Thema dann mal rüber ins CSS-Board.

mfg Maik

Hi Maik. Die ist keinesfalls ein CSS Problem. Dein Rollovertut ist gut gemeint, aber wenns damit lösbar wäre, hätte ichs so schon gelöst. Ich hab das schon mit voller Absicht ins JS-Board geschrieben.

Wenn du der Auffassung bist, dass mein Tutorial (insbesondere "Teil 2") dir nicht weiterhilft, weil der Bildertausch nicht mit CSS lösbar wäre, wandert die Chose eben wieder an ihren Ursprungsort zurück, und ich empfehle dir als Einstieg in die Materie das JS-Tutorial Rolloverimages, sowie das Thema 3 Button Menü erstellen.

Weitere Themen, die in der Vergangenheit den Grafiktausch mit JS behandelt haben, lassen sich über die Suchfunktion aufstöbern.

mfg Maik

Zitat von RaleKay

welche auch noch mit einem Hover-Effekt ausgestattet sind. (wieder siehe Grafik).

An einer statischen Grafik kann man recht schlecht Hovereffekte erkennen

Nun ja. Wenn man mit dem Mauszeiger über einen der 2 "ausgegrauten" Buttons geht, soll eine andere Grafik angezeigt werden. Bei einem Klick wird unten der inhalt geladen ohne, dass die ganze Seite neu aufgebaut werden soll. Der angeklickte Button soll dann so dargestellt werden wie der rechte button in der Grafik. Halt wie bei jeder anderen Registerkarte mit Text nur halt mit Grafiken. Da die Seite aber nicht jedes mal neu aufgebaut werden soll (komplett) sondern nur dieser kleine bereich, komm ich da mit ner reinen CSS Lösung nicht viel weiter.

Dann wird's mal langsam Zeit, dass du uns einen Einblick in den Quellcode (HTML + JS) gewährst, denn aus dem Attachment lässt er sich nicht ablesen, und hellsehen können wir auch nicht.

mfg Maik

Aso Ja. Ok. Is der Standard Code, der von Dreamweaver erstellt wird, wenn man das sog. TabbedPanels Spry einfügt.

HTML

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Unbenanntes Dokument</title> <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script> <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" /> </head>   <body> <div id="TabbedPanels1" class="TabbedPanels">         <ul class="TabbedPanelsTabGroup">                 <li class="TabbedPanelsTab" tabindex="0">Registerkarte 1</li>                 <li class="TabbedPanelsTab" tabindex="0">Registerkarte 2</li>         </ul>         <div class="TabbedPanelsContentGroup">                 <div class="TabbedPanelsContent">Inhalt 1</div>                 <div class="TabbedPanelsContent">Inhalt 2</div>         </div> </div> <script type="text/javascript"> <!-- var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); //--> </script> </body> </html>

CSS

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219

@charset "UTF-8";   /* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */   /* 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 {     margin: 0px;     padding: 0px;     float: left;     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: 4px 10px;     margin: 0px 1px 0px 0px;     font: bold 0.7em sans-serif;     background-color: #DDD;     list-style: none;     border-left: solid 1px #CCC;     border-bottom: solid 1px #999;     border-top: solid 1px #999;     border-right: solid 1px #999;     -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: #CCC; }   /* 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: #EEE;     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-left: solid 1px #CCC;     border-bottom: solid 1px #CCC;     border-top: solid 1px #999;     border-right: solid 1px #999;     background-color: #EEE; }   /* 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 {     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".  */   /* 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; }

und zu guter Letzt

JS

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219

@charset "UTF-8";   /* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */   /* 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 {     margin: 0px;     padding: 0px;     float: left;     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: 4px 10px;     margin: 0px 1px 0px 0px;     font: bold 0.7em sans-serif;     background-color: #DDD;     list-style: none;     border-left: solid 1px #CCC;     border-bottom: solid 1px #999;     border-top: solid 1px #999;     border-right: solid 1px #999;     -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: #CCC; }   /* 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: #EEE;     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-left: solid 1px #CCC;     border-bottom: solid 1px #CCC;     border-top: solid 1px #999;     border-right: solid 1px #999;     background-color: #EEE; }   /* 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 {     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".  */   /* 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; }

Mfg

Ralf

Zitat von RaleKay

und zu guter Letzt

JS

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219

@charset "UTF-8";   /* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */   /* 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 {     margin: 0px;     padding: 0px;     float: left;     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: 4px 10px;     margin: 0px 1px 0px 0px;     font: bold 0.7em sans-serif;     background-color: #DDD;     list-style: none;     border-left: solid 1px #CCC;     border-bottom: solid 1px #999;     border-top: solid 1px #999;     border-right: solid 1px #999;     -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: #CCC; }   /* 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: #EEE;     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-left: solid 1px #CCC;     border-bottom: solid 1px #CCC;     border-top: solid 1px #999;     border-right: solid 1px #999;     background-color: #EEE; }   /* 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 {     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".  */   /* 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; }

... zu guter Letzt hast du als Zugabe den CSS-Code wiederholt

mfg Maik

Uppala. Mom. Kommt sofort die Richtige Bestellung

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368

/* SpryTabbedPanels.js - Revision: Spry Preview Release 1.4 */   // Copyright (c) 2006. Adobe Systems Incorporated. // All rights reserved. // // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are met: // //   * Redistributions of source code must retain the above copyright notice, //     this list of conditions and the following disclaimer. //   * Redistributions in binary form must reproduce the above copyright notice, //     this list of conditions and the following disclaimer in the documentation //     and/or other materials provided with the distribution. //   * Neither the name of Adobe Systems Incorporated nor the names of its //     contributors may be used to endorse or promote products derived from this //     software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE // POSSIBILITY OF SUCH DAMAGE.   var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};   Spry.Widget.TabbedPanels = function(element, opts) {     this.element = this.getElement(element);     this.defaultTab = 0; // Show the first panel by default.     this.bindings = [];     this.tabSelectedClass = "TabbedPanelsTabSelected";     this.tabHoverClass = "TabbedPanelsTabHover";     this.tabFocusedClass = "TabbedPanelsTabFocused";     this.panelVisibleClass = "TabbedPanelsContentVisible";     this.focusElement = null;     this.hasFocus = false;     this.currentTabIndex = 0;     this.enableKeyboardNavigation = true;       Spry.Widget.TabbedPanels.setOptions(this, opts);       // If the defaultTab is expressed as a number/index, convert     // it to an element.       if (typeof (this.defaultTab) == "number")     {         if (this.defaultTab < 0)             this.defaultTab = 0;         else         {             var count = this.getTabbedPanelCount();             if (this.defaultTab >= count)                 this.defaultTab = (count > 1) ? (count - 1) : 0;         }           this.defaultTab = this.getTabs()[this.defaultTab];     }       // The defaultTab property is supposed to be the tab element for the tab content     // to show by default. The caller is allowed to pass in the element itself or the     // element's id, so we need to convert the current value to an element if necessary.       if (this.defaultTab)         this.defaultTab = this.getElement(this.defaultTab);       this.attachBehaviors(); };   Spry.Widget.TabbedPanels.prototype.getElement = function(ele) {     if (ele && typeof ele == "string")         return document.getElementById(ele);     return ele; }   Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element) {     var children = [];     var child = element.firstChild;     while (child)     {         if (child.nodeType == 1 /* Node.ELEMENT_NODE */)             children.push(child);         child = child.nextSibling;     }     return children; };   Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className) {     if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))         return;     ele.className += (ele.className ? " " : "") + className; };   Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className) {     if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))         return;     ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); };   Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps) {     if (!optionsObj)         return;     for (var optionName in optionsObj)     {         if (ignoreUndefinedProps && optionsObj[optionName] == undefined)             continue;         obj[optionName] = optionsObj[optionName];     } };   Spry.Widget.TabbedPanels.prototype.getTabGroup = function() {     if (this.element)     {         var children = this.getElementChildren(this.element);         if (children.length)             return children[0];     }     return null; };   Spry.Widget.TabbedPanels.prototype.getTabs = function() {     var tabs = [];     var tg = this.getTabGroup();     if (tg)         tabs = this.getElementChildren(tg);     return tabs; };   Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function() {     if (this.element)     {         var children = this.getElementChildren(this.element);         if (children.length > 1)             return children[1];     }     return null; };   Spry.Widget.TabbedPanels.prototype.getContentPanels = function() {     var panels = [];     var pg = this.getContentPanelGroup();     if (pg)         panels = this.getElementChildren(pg);     return panels; };   Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr) {     ele = this.getElement(ele);     if (ele && arr && arr.length)     {         for (var i = 0; i < arr.length; i++)         {             if (ele == arr[i])                 return i;         }     }     return -1; };   Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele) {     var i = this.getIndex(ele, this.getTabs());     if (i < 0)         i = this.getIndex(ele, this.getContentPanels());     return i; };   Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function() {     return this.currentTabIndex; };   Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele) {     return Math.min(this.getTabs().length, this.getContentPanels().length); };   Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture) {     try     {         if (element.addEventListener)             element.addEventListener(eventType, handler, capture);         else if (element.attachEvent)             element.attachEvent("on" + eventType, handler);     }     catch (e) {} };   Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab) {     this.showPanel(tab); };   Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab) {     this.addClassName(tab, this.tabHoverClass); };   Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab) {     this.removeClassName(tab, this.tabHoverClass); };   Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab) {     this.hasFocus = true;     this.addClassName(this.element, this.tabFocusedClass); };   Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab) {     this.hasFocus = false;     this.removeClassName(this.element, this.tabFocusedClass); };   Spry.Widget.TabbedPanels.ENTER_KEY = 13; Spry.Widget.TabbedPanels.SPACE_KEY = 32;   Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab) {     var key = e.keyCode;     if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))         return true;       this.showPanel(tab);       if (e.stopPropagation)         e.stopPropagation();     if (e.preventDefault)         e.preventDefault();       return false; };   Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func) {     var stopTraversal = false;     if (root)     {         stopTraversal = func(root);         if (root.hasChildNodes())         {             var child = root.firstChild;             while (!stopTraversal && child)             {                 stopTraversal = this.preorderTraversal(child, func);                 try { child = child.nextSibling; } catch (e) { child = null; }             }         }     }     return stopTraversal; };   Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel) {     var self = this;     Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);     Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);     Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);       if (this.enableKeyboardNavigation)     {         // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't         // rely on adding the tabindex attribute if it is missing to enable keyboard navigation         // by default.           // Find the first element within the tab container that has a tabindex or the first         // anchor tag.                 var tabIndexEle = null;         var tabAnchorEle = null;           this.preorderTraversal(tab, function(node) {             if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)             {                 var tabIndexAttr = tab.attributes.getNamedItem("tabindex");                 if (tabIndexAttr)                 {                     tabIndexEle = node;                     return true;                 }                 if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")                     tabAnchorEle = node;             }             return false;         });           if (tabIndexEle)             this.focusElement = tabIndexEle;         else if (tabAnchorEle)             this.focusElement = tabAnchorEle;           if (this.focusElement)         {             Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);             Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);             Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);         }     } };   Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex) {     var tpIndex = -1;         if (typeof elementOrIndex == "number")         tpIndex = elementOrIndex;     else // Must be the element for the tab or content panel.         tpIndex = this.getTabIndex(elementOrIndex);         if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())         return;       var tabs = this.getTabs();     var panels = this.getContentPanels();       var numTabbedPanels = Math.max(tabs.length, panels.length);       for (var i = 0; i < numTabbedPanels; i++)     {         if (i != tpIndex)         {             if (tabs[i])                 this.removeClassName(tabs[i], this.tabSelectedClass);             if (panels[i])             {                 this.removeClassName(panels[i], this.panelVisibleClass);                 panels[i].style.display = "none";             }         }     }       this.addClassName(tabs[tpIndex], this.tabSelectedClass);     this.addClassName(panels[tpIndex], this.panelVisibleClass);     panels[tpIndex].style.display = "block";       this.currentTabIndex = tpIndex; };   Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element) {     var tabs = this.getTabs();     var panels = this.getContentPanels();     var panelCount = this.getTabbedPanelCount();       for (var i = 0; i < panelCount; i++)         this.addPanelEventListeners(tabs[i], panels[i]);       this.showPanel(this.defaultTab); };