mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 08.04.2020 05:05 Benutzername: Passwort: Auto-Login

Thema: Spry Reduzierbare Palette Button verschieben vom 14.12.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Spry Reduzierbare Palette Button verschieben
Autor Nachricht
pumpe
Threadersteller

Dabei seit: 14.12.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst So 14.12.2008 15:14
Titel

Spry Reduzierbare Palette Button verschieben

Antworten mit Zitat Zum Seitenanfang

Hallo Gemeinde

Ich habe ein Problemchen mit der Spry Reduzierbare Palette.
Ich hätte gerne aus Design technischen gründen gerne das der Button ( Registerkarte ) Unterhalb des Inhaltes liegt.
Natürlich sollte sich der Button beim anklicken mit bewegen.
Hat irgendjemand einen Tipp wie ich dies ermöglichen könnte.
Die Palette funktioniert ansonsten sauber.

Ich Danke ganz herzlich für eure Hilfe
  View user's profile Private Nachricht senden
Kilian

Dabei seit: 12.07.2005
Ort: Magdeburg
Alter: 37
Geschlecht: Männlich
Verfasst So 14.12.2008 16:14
Titel

Antworten mit Zitat Zum Seitenanfang

Hallöchen!
Hab jetzt mit Spry an sich noch nicht zu tun gehabt und nur eben mal schnell den Code überflogen, der für die Funktionalitt des Widgets verantwortlich ist. Leider konnte ich keine Einstellung finden, die dafür sorgt dass die Registerkarte unterhalb des Inhalts ist...

ABER Lächel

Da der Spaß ja auch nur mit den HTML Elementen und CSS arbeitet, und selber nichts an dem Aufbau ändert hab ich einfach mal probiert per CSS dafür zu sorgen, dass die Registerkarte unten ist.
Erstmal der Code und darauf folgt mein Gedankengang:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel" style="position:relative; min-height:1em;">
     <div class="CollapsiblePanelTab" tabindex="0" style="position:absolute; bottom:0px; height:1em;">Registerkarte</div>
   <div class="CollapsiblePanelContent" style="margin-bottom:1em;">
       Inhalt<br />
        Inhalt<br />
        Inhalt<br />       
    </div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>
</body>


Ziel ist, die Registerkarte am unteren Ende des Panels zu halten - also bekommt diese schonmal folgende Einstellung:
position:absolute; bottom:0px;

Damit sich die Position der Registerkarte allerdings nicht am Dokument ausrichtet, sondern am Panel, benötigt dieses ebenfalls eine Angabe zu Position:
position:relative;
Relative ist quasi die Standarteinstellung und heißt nichts weiter, als dass sich das Panel nach wie vor relativ zu seinem Elternelement befindet. Jedoch richtete sich die Registerkarte nach dem Dokument wenn hier keine Einstellung vorgenommen wäre.

Da sich die Registerkarte nun außerhalb des Texflusses befindet, verschwindet der Inhalt hinter der Registerkarte - also ist es notwendig für den Inhalt einen unteren Außenabstand einzustellen, der mindestens der Höhe der Registerkarte entspricht. Also habe ich der Registerkarte eine Höhe zugewiesen, und den gleichen Wert für den Außenabstand des Tab-Inhaltes benutzt:
height:1em; auf der Registerkarte
sowie margin-bottom:1em; auf dem Inhalt

Jetzt gilt es nur noch sicher zu stellen, dass die Höhe des gesamten Panels mindestens der Höhe seiner Registerkarten entspricht. Da die Registerkarte jetzt absolut positioniert ist, wächst das Panel nicht mehr mit seiner Größe. Also hab ich das mit einer Mindesthöhe, die wieder der Höhe der Registerkarte entspricht, kompensiert:
min-height:1em;


Joa, das war's auch schon. Also in meinem aktuellen Firefox und IE hat's geklappt. Überdies hinaus kann ich jetzt allerdings keine Browserkompatibilität garantieren.
Ich hoffe du kannst damit was anfangen. Lächel
  View user's profile Private Nachricht senden
Anzeige
Anzeige
pumpe
Threadersteller

Dabei seit: 14.12.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst So 14.12.2008 18:07
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo Kilian

Dafür das du noch nicht damit gearbeitet hast, ist die lösung aber genau richtig.
Super dickes Danke

Jetzt läuft es genau wie es sollte. * huduwudu! *
  View user's profile Private Nachricht senden
Kilian

Dabei seit: 12.07.2005
Ort: Magdeburg
Alter: 37
Geschlecht: Männlich
Verfasst So 14.12.2008 19:43
Titel

Antworten mit Zitat Zum Seitenanfang

Najo, das scheint mir auch nur n Javascript Framework zu sein.
War ja eh mehr CSS-Trickserei als Javascript *hehe*

Freut mich aber wenn es dir weitergeholfen hat. *Thumbs up!*
  View user's profile Private Nachricht senden
 
Ähnliche Themen DW - Spry - Reduzierbare Paletten => Alle auf/zu klappen
Link vom Dreamweaver Spry Accordeon Button
Spry Menü in Dreamweaver CS4 - aktiven Button highlighten
[html/css] Submit-Button ohne Button
Flash Button mit Animation wenn Cursor den Button Verlässt?
Spry Menu
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.