| 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 |
  |
|
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
|
|
| |
  |
 |
Kilian
Dabei seit: 12.07.2005
Ort: Magdeburg
Alter: 41
Geschlecht: 
|
Verfasst So 14.12.2008 16:14
Titel
|
|
|
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 
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.
|
|
| |
|
|
|
Anzeige
|
|
|
pumpe
Threadersteller
Dabei seit: 14.12.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 14.12.2008 18:07
Titel
|
|
|
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. 
|
|
| |
|
|
Kilian
Dabei seit: 12.07.2005
Ort: Magdeburg
Alter: 41
Geschlecht:
|
Verfasst So 14.12.2008 19:43
Titel
|
|
|
Najo, das scheint mir auch nur n Javascript Framework zu sein.
War ja eh mehr CSS-Trickserei als Javascript 
Freut mich aber wenn es dir weitergeholfen hat. 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
DW - Spry - Reduzierbare Paletten => Alle auf/zu klappen
Link vom Dreamweaver Spry Accordeon Button
Spry Menü in Dreamweaver CS4 - aktiven Button highlighten
Flash Button mit Animation wenn Cursor den Button Verlässt?
[html/css] Submit-Button ohne Button
xml / ajax / spry ... ?
|
|
Willkommen auf dem Portal für Mediengestalter
